代码规范工具（三）Stylelint

StyleLint

用于规避CSS代码中的错误并保持一致的编码风格

官网地址：www.stylelint.cn/

安装

#npm
npm i -D stylelint postcss-html postcss-scss stylelint-config-html stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss
#yarn
yarn add -D stylelint postcss-html postcss-scss stylelint-config-html stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss
#pnpm
pnpm add -D stylelint postcss-html postcss-scss stylelint-config-html stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss
#bun
bun add -D stylelint postcss-html postcss-scss stylelint-config-html stylelint-config-recommended-vue stylelint-config-standard stylelint-config-standard-scss

配置

1. 在项目根目录下创建配置文件 stylelint.config.js:

   module.exports = {
     extends: [
       'stylelint-config-standard', // 配置stylelint拓展插件
       'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
       'stylelint-config-standard-scss', // 配置stylelint scss插件
       'stylelint-config-recommended-vue/scss' // 配置 vue 中 scss 样式格式化
     ],
     overrides: [
       {
         files: ['**/*.(scss|css|vue|html)'],
         customSyntax: 'postcss-scss'
       },
       {
         files: ['**/*.(html|vue)'],
         customSyntax: 'postcss-html'
       }
     ],
     ignoreFiles: [
       '**/*.js',
       '**/*.jsx',
       '**/*.tsx',
       '**/*.ts',
       '**/*.json',
       '**/*.md',
       '**/*.yaml'
     ],
     rules: {
       'selector-pseudo-element-no-unknown': [
         true,
         {
           ignorePseudoElements: ['v-deep']
         }
       ],
       'selector-pseudo-class-no-unknown': [
         true,
         {
           ignorePseudoClasses: ['global', 'export', 'deep']
         }
       ],
       'unit-no-unknown': [
         true,
         {
           ignoreUnits: ['rpx'] // uniapp需要配置
         }
       ],
       'font-family-no-missing-generic-family-keyword': null,
       'value-keyword-case': null, // 在css中使用 v-bind，不报错
       'no-descending-specificity': null, // 关闭禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
       'selector-class-pattern': null, // 关闭强制选择器类名的格式
       'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
       'value-no-vendor-prefix': null, // 允许属性值前缀 --webkit-box
       'property-no-vendor-prefix': null, // 允许属性前缀 -webkit-mask
       'scss/dollar-variable-pattern': null,
       'scss/at-mixin-pattern': null,
       'color-function-notation': null,
       'alpha-value-notation': null
     }
   };
   
   

2. 在项目根目录下创建忽略文件 .stylelintignore，并写入需要忽略的文件：

   /.husky/*
   /.vscode/*
   /bin
   /node_modules/*
   /docs/*
   /html/*
   /dist/*
   /public/*
   /scripts/*
   
   

VSCode

1. 安装Stylelint

2. 在setting.json中编辑

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