如何使用 ESLint + Stylelint 进行 CSS 样式检查

作为一名前端开发人员，我们需要保证我们的代码在输出前经过充分的测试和检查。对于 CSS 样式的代码质量，我们可以通过使用 ESLint 和 Stylelint 进行检查来避免错误和不必要的麻烦。本文将会介绍如何使用 ESLint 和 Stylelint 进行 CSS 样式检查。

ESLint

ESLint 是一个能够对 JavaScript 代码进行检查的工具，它可以用来发现代码中的问题，并提供规范化的代码风格。ESLint 使用 JavaScript 书写的规则来定义你的代码风格，而这些规则可以自定义。

ESLint 也能够检查 HTML 和 Vue 组件中的 JavaScript 代码，但是它不能检查 CSS 样式。为了让 ESLint 能够检查 CSS 样式，我们需要安装一个插件：eslint-plugin-css-modules。

安装和配置

1. 安装 ESLint：运行 npm install eslint --save-dev
2. 安装 eslint-plugin-css-modules 插件：运行 npm install eslint-plugin-css-modules --save-dev
3. 在 .eslintrc.js 文件中添加以下代码：

module.exports = {
  // ...
  plugins: [
    'css-modules'
  ]
};

创建规则

ESLint 中的规则可以自定义来适应团队自己的代码规范。在本示例中，我们将创建一个规则来指定 display: none 的使用：

module.exports = {
  // ...
  rules: {
    'css-modules/no-undef-class': [2, { severity: 'warning', displayNone: 'never' }]
  }
};

以上代码中，我们指定了 css-modules/no-undef-class 规则，它会检查 CSS 文件中未定义的 class。我们同时指定了 severity 和 displayNone 选项。如果 display: none 被使用了，该规则会抛出一个警告。

运行 ESLint

在项目的根目录下运行以下命令是最方便的：

eslint --ext .js,.html,.vue,.css src/

以上命令将会对 src/ 目录下所有后缀为 .js，.html，.vue 和 .css 的文件运行 ESLint 检查。

Stylelint

Stylelint 是一个 CSS / SCSS 检查工具，它能够检查你的样式代码是否符合预先定义的代码规范。Stylelint 中的规则可以容易地被自定义。

安装和配置

1. 安装 Stylelint：运行 npm install stylelint stylelint-config-standard --save-dev
2. 在 .stylelintrc.js 文件中添加以下代码：

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

运行 Stylelint

在项目的根目录下运行以下命令：

stylelint "**/*.scss"

以上命令将会在项目中检查所有后缀为 .scss 的文件。

结论

ESLint 和 Stylelint 的结合可以让我们更加容易地保证代码质量和一致性。使用以上两者的方式可以帮助我们保证代码在编写期间就符合规范并避免潜在的错误。

下面是 ESLint 和 Stylelint 的完整示例：

1. ESLint

-- -------------------- ---- -------
-------------- - -
  ----- -----
  ---- -
    -------- -----
    ----- -----
    ---- ----
  --
  -------- -
    -----------------------
    -----------------------------
  --
  -------- -
    -------------
  --
  ------ -
    -- ---
    ----------------------------- --- - --------- ---------- ------------ ------- --
  -
-

1. Stylelint

-- -------------------- ---- -------
-------------- - -
  -------- ----------------------------
  -------- -
    ----------------
  --
  ------ -
    -- ---
  -
-

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