Eslint配置

vue-create新建的一个没有eslint的初始化项目：

如何加上eslint?

1. 安装如下插件

@vue/cli-plugin-eslint // vue-cli 的 eslint 插件,装了这个就会去找eslint配置文件了
eslint
eslint-plugin-vue // eslint检查.vue文件的<template>和<script>
eslint-config-prettier // 禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则
eslint-plugin-prettier // prettier 作为 ESLint 的规则来用,代码不符合 Prettier 的标准时，会报 ESLint 错误
eslint-config-standard // 一个js代码规范，比eslint的要全，下面三个是它的依赖
eslint-plugin-import
eslint-plugin-n
eslint-plugin-promise
@babel/eslint-parser // esLint的Babel解析器代替babel-eslint

2. 根目录创建.eslintrc.js

module.exports = {
  root: true, // 将ESLint限制到一个特定的项目、目录,为true,则ESLint会停止在父级目录中寻找
  env: {
    // 启用特定环境的全局变量
    browser: true, // 浏览器全局变量
    node: true, // Node.js 全局变量和 Node.js 作用域
    es6: true, // 启用除了modules以外的所有 EC6 特性,开启后会自动设置ecmaVersion为6
  },
  /** eslint:recommended(自动启用部分列核心功能) 、 eslint:all(启用当前Eslint全部核心功能) */
  // vue-cli创建后的默认配置
  // extends: ['plugin:vue/essential', 'eslint:recommended'], 
  // 没有用prettier，但是一旦vscode开启了，就会冲突报错
  // extends: ["plugin:vue/recommended", "standard"],
  // eslint规则+prettier风格组合
  // extends: ["plugin:vue/recommended", "plugin:prettier/recommended"], 
  //
   /** 
    eslint规则+standard+prettier风格组合
    vscode一定要安装开启prettier，并且设为默认格式
    且不符合prettier格式的不会报红，但保存会自动修复
   */
  // extends: ["plugin:vue/recommended", "standard", "prettier"], 
 /** 
    最终方案：
    eslint规则+standard+prettier风格组合
    可不安装prettier，直接用eslint设为保存的格式
    会报红且保存自动修复
   */
  extends: [
    "plugin:vue/recommended",
    "standard",
    "plugin:prettier/recommended",
  ], 
  parserOptions: {
    parser: "@babel/eslint-parser", // 一个对Babel解析器的包装，使其能够与 ESLint 兼容
  },
  // 当访问当前文件内未定义的变量时，no-undef 规则将发出警告。
  // 如果想在一个文件里使用全局变量，可以 ESLint 中定义这些全局变量。
  globals: {
    wx: "readonly",
    WeixinJSBridge: "readonly",
  },
};

3. vscode开启eslint

安装eslint插件，并且在settings.json中配置如下，保存会自动修复

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}

4. 小插曲：是否需要加standard

因为一开始我的配置是这种，我觉得不需要加standard，经过考察，standard的校验更全面，还是加上。

extends: ["plugin:vue/recommended", "plugin:prettier/recommended"], 

举个例子：
standard的规则中配置了 no-use-before-define 禁止定义前使用 no-eval 禁止使用eval 就拿着两个举例吧：

fn1(val) {
      // 下面2行代码，如果配置eslint-config-standard就会报错，不配置就不会
     eval("22");
     alert(a);
},