如何使用 Stylelint（为什么使用 Stylelint 作为 Linter？）

Linters 已经存在了很长一段时间。但如果您是 css 新手，这可能是您第一次听说它们。CSS linter 将检查您的样式表并使您成为更好的编码器！

CSS Linter 有什么好处？

作为前端开发人员，我们希望我们编写的代码能够投入生产并为我们产品的用户所喜爱。我们花费大量时间确保我们编写的代码没有错误和错误。但是我们可以在不实际运行代码的情况下找出这些错误中的多少？这就是测试的用武之地，尽管肯定有一些东西测试不会被接受，或者可能根本不会被测试。

例如，作为一名 javascript 开发人员，您会优先考虑并编写测试来处理缺少分号的情况吗？或者更确切地说，是针对使用通用选择器引起的性能问题？

使用 CSS linter 可以捕获您可能不知道的 CSS 问题。这对初学者特别有帮助，他们的技能处于早期阶段。除此之外，使用 linter 的好处远远超出性能，还涉及安全问题、静态分析等领域。

为什么使用 Stylelint 作为 Linter？

Stylelint，用开发人员自己的话说：

“一个强大的、现代的 linter 可以帮助你避免错误并在你的风格中强制执行惯例。”

以下是 Stylelint 为您提供的一些功能；

• 它支持最新的 CSS 语法并理解 SCSS 和 Less 等类似 CSS 的语法。

• 它会自动修复某些类型的错误。

• 它有 170 多个内置规则来捕获错误并强制执行风格约定。

• 它是自以为是的，使您能够仅启用您想要使用的规则并配置它们以适合您的偏好。

• 它支持可共享的配置，在团队工作时可以很方便。

您可以在 此处找到更多功能。

如何使用 Stylelint

有多种使用 Stylelint 的方法，例如为您最喜欢的代码编辑器安装插件，或为 post CSS 安装插件，但我们将使用命令行。

通过在你的机器上安装 NPM 包开始 linting。打开终端并输入以下命令：

npm install -g stylelint

上面的命令全局安装 Stylelint。如果您希望它基于项目，您可以使用以下命令来实现：

npm install stylelint --save-dev

然后你可以在你的项目中添加 package.json 文件。

"scripts": {  "stylelint": "stylelint ’**/*.scss’"}

运行 Linter 命令

注意：在实际运行 linter 之前，您需要设置配置，我们稍后会介绍。没有配置就会抛出错误。

运行命令对样式表进行 lint 时有不同的组合。让我们从上面的开始。

stylelint "**/*.scss"

此命令将在您的应用程序中搜索样式并尝试对它们进行 lint。如果你想在一个特定目录下运行 Stylelint，你必须使用：

stylelint "styles/*.css"

如果您已经在您的机器上全局安装了 Stylelint，则此方法有效。如果不这样做，您可以将其添加到package.json文件的脚本部分。该命令将对样式目录中包含的所有.css文件进行 lint 。

对于要对 html 文件中包含的样式进行 lint 处理的情况，还有一个命令。

stylelint "home/*.html"

这将处理<style>在home.

Stylelint 配置

Stylelint 使用配置来确定您希望如何对样式进行 lint。作为一个没有意见的工具，它默认没有打开样式，即使有可以使用的默认配置。 

您希望使用的规则将包含在配置中。如果您尝试在没有配置的情况下进行 lint，您将遇到错误。Stylelint 将无法在没有配置的情况下做什么，它需要一个配置文件。 

设置配置时可以采用不同的方法：

1. package.json 文件中的一个stylelint属性。

2. 一个.stylelintrc文件。此文件可以是 JSON 或 YAML 格式。

3. stylelint.config.js导出 JavaScript 对象的文件。

这些是 Stylelint 在搜索要使用的配置时查找的位置。Stylelint 期望的配置是一个对象，它应该具有以下键；rules, extends, plugins, processors, ignoreFiles.

以下是配置文件的外观示例：

{

    "extends": "stylelint-config-standard",

    "plugins": [

        "stylelint-no-browser-hacks/lib"

    ],

    "rules": {

        "indentation": 2,

        "string-quotes": "double",

        "no-duplicate-selectors": true,

        "color-hex-case": "lower",

        "color-hex-length": "long",

        "color-named": "never",

         "property-no-unknown": true,

        "plugin/no-browser-hacks": [true, {

          "browsers": [

            "last 2 versions",

            "ie >=8"

          ]

        }],

    }

}

这里我们指定了我们想要扩展的配置：标准配置。

然后我们添加一些我们想要使用的规则。开始使用 Stylelint 时，您可能希望从使用现有配置文件开始。扩展已经存在的配置是一种相对简单的开始方式，然后您可以通过将样式添加到rules具有您自己的配置值的对象来覆盖样式。

规则

除了默认关闭的规则外，任何规则都没有默认值——您必须配置要使用的规则。要配置规则，您必须使用规则的名称（即键）和规则配置（即值）。这是一个外观示例：

"rules": {    "indentation": 2}

在上面的片段中，我打开了indentation规则。我通过将键和值对（即规则的名称和配置）添加到rules对象来做到这一点。

根据文档，可以通过三种方式设置规则配置：

1. 一个单一的值，就像我们上面的例子一样。

2. 一个有 2 个值的数组——第一个是主要选项，第二个是次要选项

3. 一个null值——这会关闭规则。

这些规则分为不同的类别，例如错误规则、风格问题和限制语言特征。

检查文档以正确通过可能的规则。以下是我们可以介绍的一些内容：

防止无效的十六进制值

Styelint 可以使用color-no-invalid-hex规则防止无效的十六进制值。

"rules": {    "color-no-invalid-hex": true}

这将使这样的样式无效：

a { color: #00; }

此规则将帮助您和您的团队避免错误地color为您的、 或使用无效的十六进制值，background-color或者您需要使用十六进制颜色的其他情况。

在分号后添加新行

还有一个规则是在声明块中的分号后添加换行符。

"rules": {    "declaration-block-semicolon-newline-after": "always"        }

此规则具有三个可能的值：

• always: 这要求总是在分号后添加一个新行。

• always-multi-line：当规则跨越多行时，这需要一个新行。

• never-multi-line: 使用此值，在多行规则中，分号后绝不能有空格。

您可以查看文档以了解有关此规则的更多信息。

Stylelint 插件

插件可以使用默认情况下未在 Stylelint 中定义的规则。您或社区成员可以构建采用 Stylelint 方法的插件。除了 Stylelint 之外，还可以使用这些插件。已经有大量插件可供您尝试使用。

stylelint-color-format是一个将十六进制颜色转换为 RGB 或 HSL 格式的插件。要使用它，您需要先安装软件包。

npm install --save-dev stylelint-color-format

接下来，将其添加到配置中的插件数组中。

{  "plugins": ["stylelint-color-format"]}

然后，您可以添加到规则对象以表示规则的名称和您要使用的值。

{  "rules": {    "color-format/format": {      "format": "rgb"    }  }}

结论

有很多关于 Stylelint 的知识，你现在应该很好地掌握它是什么以及它是如何工作的。展望未来，您可以开始将它应用到您的工作流程中，并考虑使用其他 linter（例如 ESLint）来检查您编写的 javaScript 和其他代码！

有用的链接

• stylelint.io

• VS 代码的 Stylelint