Foreword
JavaScript's dynamic language type, gives it a unique charm, resulting in a variety of styles development paradigm, it also brings some problems, from common runtime undefined, null error, plus or minus a semicolon to the code random, Enter, space, causing visual confusion, if it is team development, then this situation will be more serious and must be constrained, based vue introduce strict mode code and programming specifications below.
What Eslint that?
ESLint was originally an open source project by the Nicholas C. Zakas in June 2013 created. Its goal is to provide a plug of javascript code detection tools. And other similar projects JSLint, JSHint.
ESLint can use the code to ensure consistency and to avoid mistakes, then introduce the use of ESLint.
ESLint installation and configuration
A, vue-cli3 initialization introduced ESLint
If the project is built with vue-cli3 initialization can be executed from the command line vue ui open new vue-cli3 graphical interface to create and manage projects; default configuration is a babel + eslint, you can also be manually configured to execute projects introducing more features, such as router, vuex, scss, typescript, unit testing, test E2E;
If it is introduced in the late ESLint, you need to manually install the several shown in FIG related ESLint plug installation instructions
@ view add view / eslint
Tip: vue add design intent is to install plug-ins and calls Vue CLI. For ordinary npm package, this does not mean there is an alternative (command). For these ordinary npm package, you still need (depending on the selected package npm) using the package manager.
Vue add the benefits; vue add @eslint will be followed by the installation and call the two commands and intelligently generate the desired profile, may modify the contents of the current project file, so before running vue add, need to save the current state of the project submitted under that you can call vue cli plug-in, for example, I just performed vue add @ vue / eslint one instruction, after the prompts to install the command line, will help you to install all the remaining matches eslint configuration, without the need to install their own and then a strip a.
After installation is complete, can be found in the root directory of more than a .eslintrc.js file, which is eslint configuration file, you can configure custom rules (rules) and so on.
Second, the introduction of generic project ESLint
If the item is not based vue-cli3 or VUE, it is necessary to install the package manager npm eslint, after completion of the installation performed eslint --init ./node_modules/.bin/ command in the directory, according to the instructions required to generate eslint configuration scheme; herein may be selected, for example, be applied to react vue or other items.
npm install eslint --save-dev // installation and save the project development depend ./node_modules/.bin/eslint - --init // initialization commands
After installation is complete, the command may be configured lint package.json the script in order to perform verification eslint.
"lint": "vue-cli-service lint" //基于vue-cli3 "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" // 非vue-cli3
Coding standard installation and use of the Standard
应用了 ESLint 后，通常是需要自己来配置繁杂的 rules 规则，这也是一个喜好类的东西，多数人是不愿意在这上面耗费太多精力的（比如手动配置数百个ESLint 规则），于是github 上出现了一些开源的代码规范库，比较流行的有 airbnb、standard、prettier等，下面介绍下 standard
在 vue 中的使用方式:
在 vue 中通常需要和 ESLint 一起使用，上面讲到 ESLint 时候有注意到么，ESLint 初始化指令中有一个选择开源编码规范的指令，系统默认是有 standard 的选项的，直接选择就可以了。
常见问题
1、配置了 ESLint + standard 但是不生效?
在项目根目录里找到 .eslintrc.js 文件，注意 extends 和 plugins 属性是否配置，下图的extends 代表 ESLint 继承了standard 的编码规范。
2、只是 .js 文件生效了， .vue 文件没有效果 ？
.vue 文件的校验，需要注意你的 package.json 是否安装了 eslint-plugin-html 插件，并且在 .eslintrc.js 中配置了 plugins；
如果是用 vscode 编辑器开发，需安装 ESLint、Vetur 这两个 vscode 插件，并在 设置 =》 settings.json 文件中添加以下配置，然后重启下 vscode，即可生效。
"files.associations": {
"*.vue": "vue"
},
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},"html","vue"
]
3、配置了 standard 后，还能自定义 rules 吗？
standard 本身是不赞成这样做的，如果你一定要使用 standard 并需要对其中某些规则进行自定义的话，你需要使用 eslint-config-standard，当然， 在上面我们执行的 ESLint init 指令安装的配置中，就是以这种形式使用standard 的。
总结
本文介绍了用于前端编码规范、代码质量管理的几个开源方案，搭建了基于 vue 的 ESLint + standard 方案，及对实际使用当中可能遇到的问题，进行了记录。
参考链接