每个人编码的习惯不一样，或美观或不美观，或者在编码的过程中会有些疏漏未曾发现。为提高代码美观度、提高代码审阅效率，使得多人协作时代码风格统一，规定一套编码规则并在编写的过程中遵守该规则变得很有必要。在一些比较正式的大公司，公司也会有一套自己的代码编写规则，所以最好在代码生产的时候就一直对编写的代码进行代码检测。养成一个良编码习惯，从我做起！

        ESLint 是一个代码检查工具，用来检查你的代码是否符合指定的规范。一般在在 Vue 项目创建好之后，项目中就已经集成了 ESLint ，平时在开发的过程中可以充分使用该工具。

ESlint 配置

        ESLint 的配置文件是位于项目根目录的 .eslintrc.js 文件。（更多配置详情见：Eslint该如何配置？Eslint使用以及相关配置说明）：

module.exports = {
  root: true,
   /* env
    指定脚本的运行环境，每一个环境定义了一组预定义的全局变量，可以定义多个环境。
    - browser - 浏览器环境中的全局变量。
    - node - Node.js 全局变量和 Node.js 作用域。
    - commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
    - shared-node-browser - Node.js 和 Browser 通用全局变量。
    - es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6） */
  env: {
    node: true,
  },
  /* extends
  提供了继承其它配置文件的选项，属性可以是一个第三方包、配置文件的路径，也可以是字符串数组继承多个
  */
  extends: ["plugin:vue/strongly-recommended", "@vue/standard"],
  parserOptions: {
    parser: "babel-eslint",
  },
  /* rules 是具体的代码检查选项，要改变一个规则设置，必须将规则 ID 设置为下列值之一：
   - "off" 或 0 - 关闭规则
   - "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序中止)
   - "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会中止)
  */
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    'semi': [2, 'never'],
  },
};

       在编写代码保存会提示错误，说明 ESLint 生效了：

代码修正 

        在 ESLint 进行代码检测并在编辑器中提示出错误之后，我们需要对代码进行修正，代码修正有以下四种方式：

• 手动修正

        根据错误提示来一项一项手动修正。如果你认识命令行中的语法报错是什么意思，可以根据错误规则名字（func-call-spacing, space-in-parens,…）去 ESLint 规则列表网站中查找其具体含义。

• 命令修正

        使用 vue-cli 创建项目时提供了自动修复功能（有些复杂的错误还是要手动来改正），具体做法是运行：

npm run lint

• 修改规则

        在项目根目录下面，有一个.eslintrc.js 文件，它是对 ESLint 进行配置的，其中有一个属性是专门用来设置自定义代码规则的：rules。例如其中的一条规则：

rules: {
  'semi': [2, 'never'],
}

         这条规则表示每一个语句结束之后不需要使用分号，如果语句之后有分号，会提示出错误，可以修改这条规则为：

rules: {
  'semi': [2, 'always'],
}

        这样在编码的时候，在语句后加分号就不会报错了 。

• 插件修正

        在 VScode 编辑器中搭配 ESLint 插件一起使用，这种方式和命令修正的方式有些类似，使用之后有些复杂的错误还是要手动来改正，但是这种方式相比于命令修正的方式有两个好处：1、可以更加明显的以红色波浪线的形式提示具体出错那一行代码；2、ctrl+s 保存编写的代码时会立即自动修正错误。

        首先在 VScode 中安装 ESLint 插件：

         想要实现在 ctrl+s 保存编写的代码时会立即自动修正错误，还需要在 VScode 中进行如下配置：

         复制通道：

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