React项目中配置stylelint

项目中配置stylelint

什么是stylelint？

在开发项目中，经常需要处理样式表，如CSS、Sass、Less等。而随着项目规模的增大，样式表的数量也会越来越多，样式表的维护变得更加复杂。而stylelint作为一个样式表的静态分析工具，可以帮助发现和纠正样式表中的问题，提高项目的代码质量和规范。

配置依赖

首先，在项目中配置stylelint需要添加一些必要的依赖，因此需要使用yarn命令来安装这些依赖。执行以下命令：

yarn add -D \
sass \
sass-loader \
stylelint \
postcss \
postcss-scss \
postcss-less \
postcss-html \
stylelint-config-prettier \
stylelint-config-recess-order \
stylelint-config-recommended-scss \
stylelint-config-standard \
stylelint-config-standard-vue \
stylelint-scss \
stylelint-order \
stylelint-config-standard-scss \
stylelint-less

创建配置文件

在项目根目录下创建一个名为.stylelintrc.cjs的文件，并在其中编写具体的配置项。

touch .stylelintrc.cjs

然后在文件中添加以下内容：

module.exports = {
    extends: [
        "stylelint-config-recommended",
        "stylelint-config-recess-order",
        "stylelint-config-recommended-scss",
        "stylelint-config-standard",
        "stylelint-config-standard-vue",
        "stylelint-config-standard-scss",
    ],
    rules: {
        // 在这里可以自定义的规则，覆盖默认的规则
    },
};

这样，就创建了一个基本的stylelint配置文件，并引入了一些常用的规则集。

配置忽略文件

通常希望stylelint忽略一些特定的文件，例如不希望它检查node_modules目录下的文件或者一些临时文件。为了实现这一点，需要在项目根目录下创建一个名为.stylelintignore的文件，并将需要忽略的文件或者目录路径写入该文件中。执行以下命令：

touch .stylelintignore

然后在文件中添加以下内容：

/node_modules/*
/dist/*
/html/*
/public/*

这样，stylelint在运行时将会忽略node_modules、dist、html和public目录下的文件。

添加运行脚本

为了方便在命令行中运行stylelint检查样式表，可以在package.json文件的scripts字段中添加一个运行脚本。打开package.json文件，然后在scripts字段中添加以下内容：

"scripts": {
  "lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix"
}

这样，就可以使用yarn lint:style命令来运行stylelint检查样式文件了。它会检查src目录下所有后缀为.css、.scss和.vue的文件，并尝试自动修复一些错误。

自动校验格式

可以使用lint-staged来在项目提交代码时自动运行stylelint检查样式文件，并修复其中的一些错误。为此，可以在项目中安装lint-staged。执行以下命令：

yarn add -D lint-staged

然后，在package.json文件中添加以下内容：

"lint-staged": {
    "src/**/*.{css,less}": [
      "prettier --write",
      "npx stylelint --fix",
      "git add"
    ]
}

这里的配置意思是在提交文件时，对src目录下所有后缀为.css和.less的样式文件进行自动格式化和修复，并将修改后的内容添加到git暂存区。

使用webpack集成stylelint

如果在项目中使用了webpack作为构建工具，可以将stylelint集成到webpack中，在开发或构建阶段对样式文件进行检查。

首先，需要安装一些webpack相关的插件。执行以下命令：

yarn add -D eslint-webpack-plugin@4.0.1 stylelint-webpack-plugin@4.1.1

然后，在webpack配置文件中引入这些插件并配置：

const StylelintPlugin = require('stylelint-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    // ...其他配置项
    plugins: [
        // ...其他插件
        new ESLintPlugin({
            extensions: [
                'js', 
                'jsx',
                'ts', 
                'tsx',
            ],
        }),
        new StylelintPlugin({
            configFile: '.stylelintrc.cjs',
            files: '**/*.{css,scss}', 
        }),
    ],
    // ...其他配置项
};

使用上述配置后，当运行webpack时，它将会在构建过程中对样式文件进行检查。如果发现样式文件中存在问题，webpack将会在控制台输出错误信息，并阻止构建过程。

测试

为了测试的配置是否生效，可以新建一个样式文件，并添加一些混乱的样式代码进去。执行以下命令：

touch src/index.css
vim src/index.css

然后在index.css文件中添加一些混乱的样式代码。

接下来，运行yarn lint:style命令，这将会触发stylelint对src目录下的样式文件进行检查和修复。

小结

通过以上的步骤，实现了在项目中配置stylelint，能够帮助发现和纠正样式表中的问题。在开发过程中，运行stylelint检查样式代码，可以帮助保持样式表的一致性和规范性，提高代码质量和开发效率。同时，通过自动集成到构建工具中，可以在开发或构建阶段自动进行样式检查，避免样式问题导致的线上bug。