@vanwei/stylelint-config
该插件主要针对css相关代码规范进行限定，需配置下面三步：
- 安装
@vanwei/stylelint-config - 配置
.stylelintrc.js - 执行命令
1、安装 @vanwei/stylelint-config
yarn add @vanwei/stylelint-config2、 配置.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/icon5 检测.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
}),
]
}
});