下划线的学习频道 | 下划线的学习频道

stylelint 是一个强大的现代 CSS/SCSS/Less 代码检查工具。它可以帮助开发者避免在样式表中犯错误，确保代码的一致性，并遵循团队或项目的编码规范。

主要特点

广泛的规则: stylelint 提供了大量的内置规则，用于检查语法错误、过时的语法、潜在的互不兼容问题等。
支持多种语言: 除了纯 CSS，stylelint 还支持 SCSS、Sass、Less 和其他 CSS 预处理器。
可扩展性: 可以使用插件和共享配置来扩展 stylelint，使其更加灵活。
自动修复: 许多规则支持 --fix 选项，可以自动修复某些类型的问题。
与其他工具集成: stylelint 可以轻松集成到各种构建工具、代码编辑器和其他系统中。

常见用法

stylelint的使用跟eslint差不多，首先要安装stylelint和相关的包，相关包的作用如下：

stylelint 社区提供了许多共享配置和插件，这些可以帮助您更快地开始使用 stylelint 并确保代码的一致性。一些流行的配置和插件包括：

stylelint-config-standard: stylelint 的推荐配置。
stylelint-config-sass-guidelines: 基于 Sass 指南的配置。
stylelint-order: 用于检查属性的顺序。
stylelint-scss: 为 SCSS 语法提供额外的规则。

其中：

stylelint-config-standard: stylelint官方的规则集，它继承了stylelint-config-recommended
stylelint-config-prettier: 用来禁用掉stylelint中与格式相关的规则，防止跟eslint冲突

安装:

bash

pnpm i -D stylelint stylelint-config-standard

配置: 在项目根目录下创建一个 .stylelintrc 文件，其中可以定义规则和其他配置。例如：

json

{
	// 继承官方的规则集，同时stylelint-config-prettier放在后面，禁用格式相关的规则，覆盖掉前面的
  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
  // 忽略这些后缀的文件
  "ignoreFiles": ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts"],
	"rules": {
		"color-no-invalid-hex": true,
		"unit-whitelist": ["em", "rem", "%", "s"]
	}
}

此时配置并不能校验 vue 文件，如果你想校验vue 文件还需要使用能针对 vue 文件解析的解析器类似于 eslint 中 parser 的概念，这里我们用postcss-html来处理类html文件(html、vue等)，使 stylelint 可以对这些文件做校验

shell

pnpm i -D postcss postcss-html

将配置修改为

module.exports = {
    // 继承官方的规则集，同时stylelint-config-prettier放在后面，禁用格式相关的规则，覆盖掉前面的
    extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
    // 忽略这些后缀的文件
    ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
    // 通过overrides单独针对某些类型的文件处理
    overrides: [
        {
            // 针对html和vue文件进行处理
            files: ['*.html', '**/*.html', '**/*.vue'],
            // 在这里配置针对vue文件使用postcss-html作为语法解析器
            customSyntax: 'postcss-html'
        },
    ],
};

可以简化成像下面一样

module.exports = {
    // 使用前需先安装
    // stylelint-config-recommended-vue也继承了stylelint-config-standard
    // 所以这里就不用再写stylelint-config-standard了
    // 同时stylelint-config-recommended-vue里面也是像上面一样通过override为vue文件指定了解释器
    // stylelint-config-recommended-vue还帮我们增加了几条针对vue文件里面的样式校验规则
    extends: ['stylelint-config-recommended-vue', 'stylelint-config-prettier'],
    // 忽略这些后缀的文件
    ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
};

使用less，所以我们还需要针对.less文件指定postcss-less，假如你项目用的是scss那你就指定成postcss-scss就可以了

module.exports = {
    extends: ['stylelint-config-recommended-vue', 'stylelint-config-prettier'],
    ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
    overrides: [
        {
            // 针对less件进行处理
            files: ['*.less', '**/*.less'],
            // 在这里配置针对less文件使用postcss-less作为语法解析器
            customSyntax: 'postcss-less',
        },
    ],
};

看一个综合配置

module.exports = {
    extends: [
        // 注意stylelint 14的版本里在vue文件中可能会出现Unknown word (CssSyntaxError)这个报错
        // 此时可以使用stylelint-config-standard-scss这个包来解决这个报错
        // 当然你也可以选择降低版本来解决
        'stylelint-config-standard-scss',
        // 'stylelint-config-standard',
        // 下面这个包已经包含了stylelint-config-standard，所以上面就可以注释掉了
        'stylelint-config-recommended-vue',
        // 关闭stylelint中校验格式的规则，以免跟prettier冲突
        'stylelint-config-prettier',
        // 下面是基于stylelint-order的规范css属性书写顺序的包，这样我们就不用自己在rules中手动指定了
        'stylelint-config-rational-order',
    ],
    ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
    rules: {
        // 使用tab缩进
        indentation: 'tab',
        // 如果你有想配置的规则或者关闭的规则，只需在这里配置即可
    },
    overrides: [
        // 上面的extends里的stylelint-config-recommended-vue已经帮我们指定了vue文件的解释器了，所以下面的也可以注释掉了
        // {
        // // 针对html和vue文件进行处理
        // files: ['*.html', '**/*.html', '**/*.vue'],
        // // 在这里配置针对vue文件使用postcss-html作为语法解析器
        // customSyntax: 'postcss-html'
        // },
        {
            files: ['**/*.less'],
            customSyntax: 'postcss-less',
        },
    ],
};

运行:

bash

stylelint "src/**/*.css"

自动修复: 使用 --fix 选项自动修复某些问题：

bash

stylelint "src/**/*.css" --fix

package.json中增加样式的校验脚本了

json

{
    "scripts": {
        "lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\""
    },
}

安装一个stylelint的vscode插件，这样就可以在输入的时候就给我们提示，也可以保存时给我们修复了，将这个插件也加入到.vscode/extensions.json里作为共享的配置，并在.vscode/settings.json里面增加如下配置开启校验

json

{
    "stylelint.enable": true,
    "stylelint.validate": ["css", "less", "postcss", "scss", "vue", "sass"],
    "editor.codeActionsOnSave": {
        "source.fixAll.stylelint": true
    }
}

参考

【大厂企业级项目架构】之项目搭建和代码规范

stylelint

主要特点 ​

常见用法 ​

参考 ​

主要特点

常见用法

参考