@dbappsecurity/stylelint-config-standard v1.0.5

@dbappsecurity/stylelint-config-standard

在官方标准 stylelint-config-standard 基础上添加/覆盖了较强的校验规则，并添加规范样式属性顺序的插件 stylelint-order。

安装

yarn add stylelint @dbappsecurity/stylelint-config-standard -D

配置

在项目根目录创建 .stylelintrc.js，然后添加：

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

其他文件后缀的默认配置文件按照对应格式配置。\ 在实际项目中，会根据使用的UI框架语法、是否使用预编译语言、是否配合 Prettier 来增加 extends，例如：

yarn add stylelint-config-prettier -D

module.exports = {
    // ...
    extends: [
        // ...
        '@dbappsecurity/stylelint-config-standard',
        'stylelint-config-prettier',
    ],
    rules: {
        'prettier/prettier': ['error'], // 打开 Prettier 校验
        // ...
    },
    // ...
};

extends 中的规则会由后往前覆盖，所以尽量将 @dbappsecurity/stylelint-config-standard 往后放置来覆盖别的规则，若项目中使用 stylelint-config-prettier，则必须把它放到最后，以解决 Stylelint 和 Prettier 规则冲突。

使用

分为构建流程和脚本命令两部分：

1. 常用的构建工具有 webpack vite rollup 等，这里以 webpack 为例，首先安装 stylelint-webpack-plugin。

   yarn add stylelint-webpack-plugin -D

   然后配置 webpack.config.js：

   const StylelintPlugin = require('stylelint-webpack-plugin');
   
   module.exports = {
       // ...
       plugins: [
           // ...
           ...(process.env.NODE_ENV === 'development' // 仅开发环境启动校验
               ? [
                   new StylelintPlugin({
                       configFile: path.resolve(__dirname, './.stylelintrc.js'),
                       files: ['**/*.{html,css}'],
                       lintDirtyModulesOnly: false,
                       fix: false,
                       cache: false,
                       emitWarning: true,
                       emitErrors: true,
                   }),
               ]
               : []),
       ],
   };

   以上是最基础的配置。 在实际项目中，各UI框架和各预编译语言都提供了对应的文件类型，例如：.vue .jsx .tsx .less .scss 等，这类文件的校验需要根据情况手动添加。

2. 在 package.json 中添加脚本命令：

   {
       // ...
       "scripts": {
           "lint:style": "stylelint \"./**/*.{html,css}\"",
           "lint:style:fix": "stylelint \"./**/*.{html,css}\" --fix",
       }
       // ...
   }

   上述脚本命令仅校验 JavaScript 文件。 在实际项目中，各UI框架和各预编译语言都提供了对应的文件类型，例如：.vue .jsx .tsx .less .scss 等，这类文件的校验需要根据情况手动添加。