前置条件：
1.vscode安装eslint插件
2.vscode配置文件settings.json配置
"editor.formatOnSave": true,，保存时自动格式化
source.fixAll.eslint: true，保存时使用eslint修复缺陷
image.png
1.构建项目
使用@vue/cli脚手架构建vue项目时选择eslint语法检查
2.修改构建后的项目相关配置
2.1移除package.json 中的 eslintConfig 字段,新建.eslintrc.js单独配置eslint规则
package.json文件
image.png
.eslintrc.js文件
module.exports = {
'root': true,
'env': {
'node': true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended'
],
'parserOptions': {
'parser': '@babel/eslint-parser'
},
'rules': {
'quotes': [
'error',
'single'
],
'semi': [
'error',
'always'
]
//...其他相关规则配置
}
};
2.2修改package.json脚本eslint的检查范围为src下的vue和js文件
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint --ext .js,.vue src",
"lint:fix": "vue-cli-service lint --ext .js,.vue src --fix"
},
2.3 修改vue.config.js配置编译构建强制语法检查(选择其一即可，修改配置需要重启服务方可生效)
2.3.1 修改vue.config.js配置 lintOnSave: 'error'
关于lintOnSave的用法说明：
image.png
2.3.2 安装使用eslint-loader并配置规则
eslint-loader使用说明
注: eslint-loader已废弃，官方推荐eslint-webpack-plugin
const path = require('path');
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: true,
configureWebpack: {
module: {
rules: [
{
test: /\.(js|vue)$/,
//loader&options和use二选一
/* loader: 'eslint-loader',
options: {
failOnWarning: true,
}, */
use: [
{
loader: 'eslint-loader',
options: {
//设置当有eslint错误告警时编译失败强制解决错误
failOnWarning: true,
},
},
],
enforce: 'pre',
include: [path.resolve(__dirname, './src')], // 范围和package.json 保持一致
},
],
},
},
});
2.3.3 安装使用eslint-webpack-plugin并配置规则
eslint-webpack-plugin使用说明
注: 需要eslint >= 8 webpack5.x版本
const { defineConfig } = require('@vue/cli-service');
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = defineConfig({
transpileDependencies: true,
// lintOnSave: true,
configureWebpack: {
plugins: [new ESLintPlugin({ failOnWarning: true })],
},
});
