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