前置条件：
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

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 })],
  },
});