webpack5.x配置stylelint在保存时自动校验并修复错误，基于stylelint-webpack-plugin插件实现

需求

此教程的webpack版本5.x，其他版本的可以查看插件支持版本自行调整，
脚手架创建的项目是没有stylelint选项选择，但是，项目开发过程中我们会写比较多的css样式，因此统一格式和样式顺序会使代码看起来更加美观
配置stylelint可以参考这篇文章stylelint配置，配置保存时自动校验并修复我们的css代码，需要用到stylelint-webpack-plugin插件

配置

1. 引入 npm i stylelint-webpack-plugin@3.3.0 -D
2. 在vue.config.js文件中配置

const StylelintPlugin = require('stylelint-webpack-plugin');
// 然后在module.exports对象内部配置
configureWebpack: (config) => {
// stylelint自动修复
    const stylelintPlugin = new StylelintPlugin({
    	// 配置文件
        configFile: path.join(__dirname, '.stylelintrc.js'),
        // 检查目录
        context: 'src',
        // 检查的文件后缀
        extensions: ['css', 'less', 'vue', 'html'],
        // 是否自动修正
        fix: true
    });
    config.plugins.push(stylelintPlugin);
},

插件地址

stylelint-webpack-plugin链接: https://www.npmjs.com/package/stylelint-webpack-plugin