老vue项目添加eslint，以及配合vscode

背景

之前的老项目，一个人开发，没有加入eslint，现在两个人开发，为了规范格式，故加入eslint

目标

1. 通过eslint检测与修复代码格式
2. 使用vscode编辑器时，能及时提示，以及自动修复

步骤

1. 安装eslint以及相关插件，此处我是本地安装，没有全局安装；如下是参考的vue-cli 2.X构建时选择需要eslint时所加的包，package.json---devDependencies添加如下包；

请勿直接下载最新eslint，[email protected]与[email protected]不兼容，详见下方问题描述

"babel-eslint": "^8.2.1",
"eslint": "^4.15.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.0.0", 

2. 以及 package.json---scripts 添加如下命名，方便在命令行执行npm run lint时检测问题，npm run lint-fix 自动修复能修复的问题，不能自动修复还是要手动修改

"scripts": {
    ...
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "lint-fix": "eslint --fix --ext .js,.vue src test/unit test/e2e/specs"
  },

3. 然后在webpack.base.conf.js的rules里添加如下代码，会在dev之前先检测代码，不通过就报错

{
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
      formatter: require('eslint-friendly-formatter')
    }
  },

4. 根目录添加.eslintrc.js文件 ，standard较严格，先用的eslint默认的规则

// https://blog.csdn.net/CHS007chs/article/details/95486063 配置解释 可参考这个
module.exports = {
  root: true,
  "env": {
    "browser": true,
    "es6": true,
    "jquery": true, //可处理使用$的报错
    "node": true //可处理使用require的报错
  },
  /**
  * 规则继承
  * http://eslint.cn/docs/user-guide/configuring#extending-configuration-files
  *【】可继承的方式有以下几种
  *【】eslint内置推荐规则，就只有一个，即「eslint:recommended」
  *【】可共享的配置， 是一个 npm 包，它输出一个配置对象。即通过npm安装到node_module中
  *  可共享的配置可以省略包名的前缀 eslint-config-，即实际设置安装的包名是 eslint-config-airbnb-base
  *【】从插件中获取的规则，书写规则为 「plugin:插件包名/配置名」，其中插件报名也是可以忽略「eslint-plugin-」前缀。如'plugin:vue/essential'
  *【】从配置文件中继承，即继承另外的一个配置文件，如'./node_modules/coding-standard/eslintDefaults.js'
  */
  "extends": [
    "eslint:recommended",
    "plugin:vue/essential", //插件有vue相关的规则
    // "standard"
  ],
  /**
  * 全局变量
  * http://eslint.cn/docs/user-guide/configuring#specifying-globals
  * 【】定义额外的全局，开发者自定义的全局变量，让其跳过no-undef 规则
  * 【】key值就是额外添加的全局变量
  * 【】value值用于标识该变量能否被重写，类似于const的作用。true为允许变量被重写
  * 【】注意：要启用no-global-assign规则来禁止对只读的全局变量进行修改。
  */
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "parser": "babel-eslint"
  },
  "plugins": [
    "vue"
  ],
  /**
   * 每个规则有【3】个错误级别。
   * off或0: 关闭该规则；
   * warn或1: 开启规则，使用警告级别的错误，不会导致程序退出；
   * error或2: 开启规则，使用错误级别的错误，当被触发的时候，程序会退出。
   */
  "rules": {
    // 不禁止console
    'no-console': 0,
    // 禁止出现未使用的变量
    'no-unused-vars': [2, {
      'vars': 'all',
      'args': 'none'//不检测参数
    }],
  }
};

5. 到此即可使用npm run lint-fix来修复部分格式问题了，以下是结合vscode做提示和保存自动修复

6. vscode搜索安装eslint和vetur插件

   
   
   vscode搜索安装eslint和vetur插件.png

7. 配置user settings首选项

配置user settings首选项.png

"eslint.enable": true,
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
        "language": "vue",
        "autoFix": true
    }
],
"eslint.run": "onType",//onType 是在输入的时候; onSave 是在保存的时候检测
"eslint.autoFixOnSave": true //是否在保存时自动修复

问题

版本问题

1. 一开始直接下载最新的 npm i eslint eslint-plugin-vue -D 然后vscode执行的时候报错；

[email protected] requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.

2. 就折腾全局安装，本地安装，都是一样报错，然后刚好我的npm有问题，不能更新，就以为是npm导致的，然后想办法把npm更新到最新6.11.3，还是不行
3. 就回过头看报错信息

You must install peer dependencies yourself 您必须自己安装对等依赖项

4. 感觉是版本问题，然后看了下eslint版本是6.4.0，eslint-plugin-vue版本是5.2.3
5. 然后固定版本npm i -D [email protected]
6. 就可以了

参考

1. 怎样在vue项目下添加ESLint
2. 记为vue添加eslint过程，采用airbnb规范
3. ESlint配置文件eslintrc.js
4. 记住这 5 点，快速做出一张美观的标注配图