npm 包 scss-lint 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，样式是一个不可忽视的部分。而一些较大的项目会有很多样式文件，这时候就需要进行代码的规范化以及一些常见错误的检查。

scss-lint 就是一个可以用来进行 Sass/SCSS 代码检查的工具。它可以让你在写样式的时候遵守一些良好的习惯和规范。在这篇文章中，我们将会学习如何使用 scss-lint。

如果你还没有安装 scss-lint，可以通过下面的命令进行安装：

npm install -g scss-lint

安装完成后，你可以通过如下命令来检查你的样式文件：

scss-lint path/to/your/scss/files

这个命令会列出代码中的所有错误以及警告。

如果你只有一个文件想要检查，可以使用：

scss-lint file/path/to/your/scss/file

默认配置文件存储在 $HOME/.scss-lint.yml，可以通过以下命令来查看：

scss-lint --show-linters

它会列出当前所有的 linter，以及它们的 id，不过这个列表可能有点长。

可以通过以下命令来查看在根目录下有没有一个配置文件 .scss-lint.yml：

scss-lint --config-exists

如果你想自定义你的配置，可以在根目录下创建一个 .scss-lint.yml 文件，并使用 exclude 选项来定义哪些文件不需要被检查。例如：

---
exclude:
    - 'file/to/exclude/**/*'
    - 'another-file/to/exclude/**/*'

如果你有自定义的 linter，可以通过以下命令来将其添加到配置文件中：

scss-lint --config /path/to/custom/config.yml

scs-lint 包含了很多默认的 linter。下面我们会介绍其中的几个主要的 linter。

这个 linter 用来检查选择器的深度，避免像 .foo .bar .baz 这样的选择器。

SelectorDepth:
    max_depth: 3

上面的例子中，最大深度被限制为 3。也就是说，.foo .bar .baz 这样的选择器会被视为错误。

这个 linter 检查属性的名称，确保它们符合一些限制。例如，它可以检查你的样式表中是否使用了位于黑名单之中的属性名称。

PropertyName:
    - property_blacklist:
        - "text-align"

这个配置将不允许使用 text-align 属性。如果你尝试设置 text-align，则会得到一个警告。

这个 linter 会检查你的数字中是否包含前导零。例如，0.5em 是正确的写法，而 0.50em 是一个错误的写法。你可以设置 style 属性来确定你希望使用哪种风格。

LeadingZero:
    style: exclude_zero

上面的例子中，数字中以 0. 开头的前导零被排除了。

这个 linter 会检查你的数字中是否包含了不必要的小数位。例如，1.0 是可以被简写为 1 的。你可以设置 style 属性来决定你希望使用那种风格。

UnnecessaryMantissa:
    enabled: true
    style: zeros # 将省略 '.0'

scss-lint 可以帮助你提高代码的可读性和可维护性。虽然这个工具可能会显得有些复杂，在学会使用它之前可能需要一些时间，但是它能够帮助我们发现一些错误并遵循一些最佳实践。希望这篇文章能够对你有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/169446