25 - Stylelint - Lint CSS 程序码

样式表虽然较 JavaScript 单纯，但随着规则定义越来越多，样式表还是会因复杂的结构与繁杂的规则配置而使得可读性降低，甚至造成错误。

让 CSS 代码更漂亮 - Stylelint

Stylelint 使开发者可以规范样式写法，除了增加可读性外，也可以避免部分在运行中可能发生的错误。

除了纯样式表（ .css ）外， Stylelint 也可以作用於内嵌在 HTML 、 markdown 的样式或是 CSS-in-JS 中。而除了标准的 CSS 外，透过 Plugins 也可以支援 SCSS 、 Sass 、 Less 或是 SugarSS 等不同的样式语言。

Stylelint 利用静态分析解析样式并将可能的问题抛出，并修复部分的问题，如此一来可以降低错误的发生也可以减少 code review 所花费的时间。

安装 Stylelint

Stylelint 为 npm 套件，须要先安装：

npm install stylelint --save-dev

使用 Stylelint

安装完成後，由於 Stylelint 一定要配置设定档，因此要建立档案 stylelint.config.js ：

module.exports = {
  rules: {
    'declaration-block-single-line-max-declarations': 1,
    'block-opening-brace-space-before': 'always',
  },
};

配置档除了可以是 .js 外，还可以是 .json 、 .yaml 等。

Stylelint 预设不设定任何规则，需要自己手动配置，因此要加上 rules 设定才会依照设定的规则做检查。

现在使用下面这个范例检验 Stylelint 效果：

a{top:0;--height:10px;color:pink; }

执行 Stylelint ：

> npx stylelint samples/style.css

samples/style.css
 1:1  ✖  Expected single space before "{"      block-opening-brace-space-before
 1:2  ✖  Expected no more than 1 declaration   declaration-block-single-line-max-declarations

依照规则每一行只能有一个样式定义，并且至少要在 { 留有一格空白，由於范例违反了规则，因此 Stylelint 会输出讯息。

而有些规则是可以被 Stylelint 自动修复的，例如 block-opening-brace-space-before ，像这类规则可以使用 --fix 来覆写原档直接修复问题：

npx stylelint --fix samples/style.css

详细的规则说明可以在 Stylelint 的 User guide 中找到。

使用预置的规则包

Stylelint 的规则众多，一个一个设定十分耗时，因此 Stylelint 在配置中提供 extends 属性让使用者设定已经预设规则设定的规则包，可以此为基准再使用 rules 客制规则。

规则包为 npm 套件，需要先行安装，以 stylelint-config-standard 为例：

npm install stylelint-config-standard --save-dev

安装完成後使用 extends 设定：

module.exports = {
  extends: 'stylelint-config-standard',
  // ...
};

如此以来就可以直接使用 stylelint-config-standard 中配置的规则了。

扩充 Stylelint 的规则

Stylelint 提供了许多的规则，但有时我们会需要增加自己所需的规则，为了这个需求， Stylelint 提供 plugin 的设计，让我们可以藉由 plugin 让 Stylelint 拥有扩充规则的能力。

以 stylelint-order 为例，它让我们可以排序样式表中的规则。

plugin 也都是 npm 套件，因此先安装：

npm install stylelint-order --save-dev

然後使用 plugins 设定：

module.exports = {
  plugins: ['stylelint-order'],
  rules: {
    'order/order': [
      'custom-properties',
      'dollar-variables',
      'declarations',
      'rules',
      'at-rules',
    ],
    // ...
  },
  // ...
};

可以看到 stylelint-order 让 Stylelint 多了 order/order 的规则，并且可以做相关的设定。

规则的设定

Stylelint 的规则设定会是字串或是阵列，分为 primary 与 secondary 两个选项。

primary 选项是必要的，它用来设定规则的定义，其值对应规则的设定参数：

module.exports = {
  rules: {
    'declaration-block-single-line-max-declarations': 1,
    'block-opening-brace-space-before': 'always',
  },
};

declaration-block-single-line-max-declarations 的 1 与 block-opening-brace-space-before 的 always 都是 primary 选项。

在有些规则中，需要设定额外的配置， Stylelint 提供阵列的方式让使用者可以设定 secondary 选项：

module.exports = {
  rules: {
    'selector-max-type': [0, { ignore: ['child', 'descendant', 'compounded'] }],
  },
};

例子中的 { ignore: ['child', 'descendant', 'compounded'] } 就是 secondary 选项。

与 VS Code 整合

首先，安装 Stylelint 插件：

code --install-extension stylelint.vscode-stylelint

如此一来， Stylelint 插件会使用设定档 stylelint.config.js 的配置，在编辑器上显示各种提示。

接着我们要调整配置，使得档案在储存时执行 Stylelint 修复档案内容：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}

将设定存於专案中

为了让每次新开此专案的使用者都可以使用到 Stylelint ，我们可以将设定配置在 .vscode 目录中。

首先，我们需要纪录要安装的插件，在 .vscode/extensions.json 中：

{
  "recommendations": ["stylelint.vscode-stylelint"]
}

另外相关的设定也可以在 .vscode/settings.json 中纪录：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}

这样一来，开启此专案的新使用者就可以使用插件推荐清单安装 ESLint ，并将相关的配置做设定。

本文重点整理

• 随着专案规模的扩大，样式表会越趋庞大，许多的规则混杂在列表中，造成开发时的可读性降低，在各个设定的影响下也可能造成样式的错误。
• Stylelint 利用静态分析，帮助使用者在开发时就找出问题，并优化可读性，使得开发效率增加，在生产环境下也可以减少错误的产生。
• 设定预设的规则包来减少配置的花费。
• 可以在配置档中覆写原本的设定，达到客制的效果。
• 使用 VS Code 的 Stylelint 插件，可以在储存时启动 Stylelint 对样式表做 lint。

参考资料

• stylelint: Getting Started
• stylelint: Configuration
• stylelint: About rules