1

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

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

4

1 回答 1

2

下面的结果主要是基于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 linter 的scss-lint.js和一个用于 lint scss 的 scsslint.js 。现在让我们开始吧。

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. 我们在浏览器中没有fsand path，所以只需将它们替换为required 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. 下载我的答案库
  2. 进入43127937目录
  3. 在那里克隆我的sass-lint
  4. 进入 sass-lint 目录
  5. npm i && cd .. && npm i && webpack
  6. 检查dist目录

和

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

TL;博士

将此代码段插入到您的 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,
      }
    }
  }
});

于 2017-04-04T09:20:26.603 回答