webpack5之eslint的配置,vue3环境

背景

手动配置了webpack5 + vue3

那么eslint的配置是必不可少的

而且走了很多的弯路

配置

1. 肯定是要 安装 eslint

npm install eslint -D

2. eslint-webpack-plugin

npm install eslint-webpack-plugin --save-dev

如果用了，eslint-webpack-plugin， 就不需要 eslint-loader 了

const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
    plugins: [
        new ESLintPlugin({
            fix: true, /* 自动帮助修复 */
            extensions: ['js', 'json', 'coffee', 'vue'],
            exclude: 'node_modules'
        })
    ]
}

3. 配置 eslintrc.js

这里走了不少弯路，一开始是自己去一点点的手动配置，对新手不太友好

有一个很简单的方法：

直接npx eslint --init 根据选项一步步的往下走，完美

下面就是帮我们自动安装好的配置

+ eslint-config-airbnb-base@14.2.1
+ eslint-plugin-import@2.24.2
+ eslint-plugin-vue@7.18.0
+ eslint@7.32.0
+ @typescript-eslint/parser@4.31.1
+ @typescript-eslint/eslint-plugin@4.31.1

// .eslintrc
module.exports = {
  env: { // 项目运行环境
    browser: true, // 浏览器端
    commonjs: true, // 支持CJS
    es2021: true, // 支持ES2021及之前的所有语法
  },
  
  // 值可以是字符串或者数组(多个)
  extends: [ // 继承，即规则继承自那些规则（这些规则会被合并到自定义的规则中，可以认为是规则的扩展）
    'plugin:vue/essential', // vue的基本规则
    'airbnb-base', // Airbnb的校验规则
  ],
  
  // 使用什么解释器，可以作为顶层属性配置也可以作为parserOptions的子属性进行配置
  // parser: '@typescript-eslint/parser',
  
  // 解析器的相关信息， 可以指定ESMAScript的版本、sourceType的类型
  parserOptions: { 
    ecmaVersion: 12, // 使用的ECMA的版本
    // 使用什么样的解释器，默认是espree，这里是@typescript-eslint/parser，因为要对TS规则进行校验
    parser: '@typescript-eslint/parser', 
  },
  
  plugins: [ // 插件列表
     // plugins 里面加了vue 就不需要加 parser: "vue-eslint-parser",
    'vue', // eslint-plugin-vue@latest的简写
    '@typescript-eslint',
  ],
  
  // 用户自定义规则数组 --- 自定义规则的优先级最高
  rules: { 
  },
};