Codemirror 的 SCSS linter

Question

如何让 linter 在 SCSS 模式的 Codemirror 中工作？

如果我使用 css-lint.js，那么我会收到诸如 Unknown @ rule: &mixin.

之类的错误

Answer 1

The result below is mainly based on sass-lint

现场演示：

http://blackmiaool.com/soa/43127937/cm.html

源代码

https://github.com/blackmiaool/sass-lint

和

https://github.com/blackmiaool/soa/tree/gh-pages/43127937

如何？

真是个大工程，让我一步步介绍一下吧。

我们有什么？

你想要一个 scss-linter，但是只有 css-linter in codemirror now. And there is a sass-lint which has 1k star on github. The sass-lint 只支持 nodejs 环境（它取决于 fs、path 和类似的东西）和 可用于lint scss.

我们该怎么办？

根据css-lint，我们应该有一个 scss-lint.js 来注册 scss linter 和一个 scsslint.js 用于检查 scss。现在开始吧。

scss-lint.js

参考一下css-lint.js，我们的scss-lint.js是这样的：

// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: http://codemirror.net/LICENSE


(function (mod) {
    if (typeof exports == "object" && typeof module == "object") // CommonJS
        mod(require("../../lib/codemirror"));
    else if (typeof define == "function" && define.amd) // AMD
        define(["../../lib/codemirror"], mod);
    else // Plain browser env
        mod(CodeMirror);
})(function (CodeMirror) {
    "use strict";

    CodeMirror.registerHelper("lint", "scss", function (text, options) {        
        var found = [];
        if (!window.SCSSLint) return found;
        var results = SCSSLint.verify(text, options),
            messages = results.messages,
            message = null;
        for (var i = 0; i < messages.length; i++) {
            message = messages[i];
            var startLine = message.line - 1,
                endLine = message.line - 1,
                startCol = message.col - 1,
                endCol = message.col;
            found.push({
                from: CodeMirror.Pos(startLine, startCol),
                to: CodeMirror.Pos(endLine, endCol),
                message: message.message,
                severity: message.type
            });
        }
        return found;
    });

});

这取决于window.SCSSLint。

从 scss-lint 到 scsslint.js

1. 我们实际上没有文件，所以我们只是使用它的lintText功能。

2. 我们在浏览器中运行它，所以最好避免yaml。将 yaml 文件更改为 json。

3. 我们在浏览器中没有fs和path，所以只需将它们替换为要求json。

4. 我们需要一个工具将项目中的所有文件整合到一个文件中，所以这里使用webpack。

5. 许多其他细节。

终于

在浏览器中使用：

html:

<script src="./dist/scsslint.js"></script>
<script src="./cm/scss-lint.js"></script>

js:

CodeMirror.fromTextArea(document.getElementById("code-css"), {
    lineNumbers: true,
    mode: "text/x-scss",
    gutters: ["CodeMirror-lint-markers"],
    lint: {
        options: {
            rules: {//try to remove this rule
                "no-empty-rulesets": 1,
            }
        }
    }
});

如何构建自己的scsslint？

1. 下载我的回答repo
2. 进入43127937目录
3. 在那里克隆我的sass-lint
4. 进入sass-lint目录
5. npm i && cd .. && npm i && webpack
6. 检查dist目录

和

我的 sass-lint 叉子应该发布到 npm，但这主要不是我的工作。我会询问原始仓库的维护者他们对此的看法。

TL;DR

将此代码段插入您的 html:

<script src="http://blackmiaool.com/soa/43127937/dist/scsslint.js"></script>
<script src="http://blackmiaool.com/soa/43127937/cm/scss-lint.js"></script>

像这样配置你的代码镜像：

CodeMirror.fromTextArea(document.getElementById("code-css"), {
  lineNumbers: true,
  mode: "text/x-scss",
  gutters: ["CodeMirror-lint-markers"],
  lint: {
    options: {
      rules: {
        "no-empty-rulesets": 1,
      }
    }
  }
});