用于Codemirror的SCSS linter

Question

如何在Codemirror for SCSS模式下使linter工作？

如果我使用css-lint.js，则会收到错误，例如Unknown @ rule: &mixin。

Answer 1

  

以下结果主要基于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，但现在codemirror中只有一个css-linter。并且有一个sass-lint在github上有1k星。 sass-lint只支持nodejs环境（它取决于fs，path等等）和可用于lint scss 。

我们该怎么做？

根据css-lint，我们应该有一个 scss-lint.js 注册scss linter和一个 scsslint.js 用于lint scss 。现在让我们来做。

SCSS-lint.js

只需参考css-lint.js，我们的scss-lint.js就是这样：

＆＃13;

＆＃13;

// 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;
    });

});

＆＃13;

＆＃13;

＆＃13;

取决于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，但它主要不是我的工作。我会问维护人员对orignal repo他们的看法。

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>

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

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