样式规范工具:Stylelint

Stylelint 用于样式代码规范检查

依赖包

pnpm i 
stylelint
stylelint-prettier 
stylelint-config-prettier
stylelint-config-recess-order 
stylelint-config-standard 
stylelint-config-standard-scss
-D

配置文件 .stylelintrc.cjs

// .stylelintrc.js 
module.exports = {
    // 注册 stylelint 的 prettier 插件
    plugins: ['stylelint-prettier'], 
    // 继承一系列规则集合
    extends: [ 
        // standard 规则集合 
        'stylelint-config-standard', 
        // standard 规则集合的 scss 版本 
        'stylelint-config-standard-scss', 
        // 样式属性顺序规则 
        'stylelint-config-recess-order', 
        // 接入 Prettier 规则 
        'stylelint-config-prettier',
        'stylelint-prettier/recommended' 
    ], 
    // 配置 rules 
    rules: {
    // 开启 Prettier 自动格式化功能 
    'prettier/prettier': true
    }
};

配置文件 package.json

"scripts": { 
    // 整合 lint 命令
    "lint": "npm run lint:script && npm run lint:style", 
    // stylelint 命令 
    "lint:style": "stylelint --fix \"src/**/*.{css,scss}\"" 
}

.stylelintignore 排除检查配置

node_modules
dist