@vanwei/stylelint-config

该插件主要针对css相关代码规范进行限定，需配置下面三步：

• 安装 @vanwei/stylelint-config
• 配置 .stylelintrc.js
• 执行命令

1、安装 @vanwei/stylelint-config

yarn add @vanwei/stylelint-config

2、 配置.stylelintrc.js

// .stylelintrc.js
module.exports = {
  extends: "@vanwei/stylelint-config",
  overrides:[
    // *默认情况只能支持css文件，如果需要支持其他文件，则需要使用对应的插件和配置
    // 支持html或者vue
    {
      "files": ["**/*.html", "**/*.vue"],
      "customSyntax": "postcss-html",
    },
    // 使用scss
    {
        "files": ["**/*.scss"],
        "customSyntax": "postcss-scss",
    },
    // 使用less
    {
        "files": ["**/*.less"],
        "customSyntax": "postcss-less",
    }
  ]
};

3、执行命令

# 检测
npx stylelint src/**/*.css
# 检测并修复
npx stylelint src/**/*.css --fix

也可以在packge.json中进行配置：

{
  "scripts": {
    "stylelint": "stylelint src/**/*.{less,postcss,css,scss}"
  }
}

注意脚本只能检测css\less\scss等单独的文件，若想检测.vue文件中css部分，请参考#5

4、配置忽略文件.stylelintignore

// .stylelintignore
src/assets/icon

5 检测.vue文件里面的 css

5.1、stylelint-webpack-plugin

如果vue项目使用的是webpack，推荐使用stylelint-webpack-plugin，可以自动修复部分style相关规范错误;

可在vue.config.js或webpack其他配置文件中配置：

module.exports = {
  // ...
  // 其他相关配置
  configureWebpack: config => {
    // ...
    // 其他相关配置
    const StyleLintPlugin = require('stylelint-webpack-plugin');
    // 插件文档: https://webpack.docschina.org/plugins/stylelint-webpack-plugin/#root
    config.plugins.push(
      new StyleLintPlugin({
        // 插件作用文件
        files: ['src/**/*.{vue,html,css,scss,sass,less,styl}'],
        failOnError: true, // 当stylelint规则error时是否阻止构建
        failOnWarning: false, // 当stylelint规则warnning时是否阻止构建
        cache: true, //
        fix: true, // 是否尝试修复
        emitWarning: true, // 是否提示构建warning
        emitError: true, // 是否提示构建error
        quiet: false // 如果设置为 true，仅处理和报告 errors，并忽略 warnings
      })
   );

}

5.2 vite-plugin-stylelint

如果项目使用的是vite，可以使用vite-plugin-stylelint，下面是vite.config.js的配置情况

该插件需要vite读取组件后方能识别，由于vite加载机制，在未进入某些路由的情况下，某些组件或页面是没有加载的，在这种情况下该插件无法检测到未加载的组件或页面代码中的stylelint相关问题

const { defineConfig } = require('@vue/cli-service');
import StylelintPlugin from 'vite-plugin-stylelint';
module.exports = defineConfig({
  transpileDependencies: true, 
  configureWebpack: {
    plugins: [
      StylelintPlugin({
        // 插件作用文件
        files: ['src/**/*.{vue,html,css,scss,sass,less,styl}'],
        cache: true, //
        fix: true, // 是否尝试修复
        emitWarning: true, // 是否提示构建warning
        emitError: true, // 是否提示构建error
        quiet: false // 如果设置为 true，仅处理和报告 errors，并忽略 warnings
      }),
    ]
  }
});