Vue基础精讲 —— 规范代码三步走？关于eslint和editorconfig以及precommit的安装和使用

eslint

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的 javascript 代码检测工具。

1. 安装eslint插件

npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D

2. 在项目根目录创建 .eslintrc 文件，配置采用哪种校验规则，本案例采用 eslint 的标准校验规则

{
  "extends": "standard"
}

3. 安装让 eslint 能够校验 .vue文件 的插件。

eslint 是用来校验 JavaScript 代码的，而 .vue文件 是一个类似于 HTML 的文件格式，不是标准的 JavaScript文件，eslint无法直接校验 .vue文件，需要安装 eslint-plugin-html插件。

eslint-plugin-html插件是用来规范html，也能够识别 <script>标签内的 JavaScript代码，.vue文件中的js代码也是写在<script>标签内，这也是官方推荐的插件

npm i eslint-plugin-html -D

插件安装完成，需要在 .eslintrc文件 配置 plugins值，插件名称省略了eslint-plugin-

{
  "plugins": [
    "html"
  ]
}

4. eslint相关插件已安装，配置已完成，怎么启动呢？在 package.json 中增加一条命令

--ext指定文件后缀，client/ 检测哪个文件夹下的文件

"scripts": {
    "lint": "eslint --ext .js --ext .jsx --ext .vue client/"
}

运行 npm run lint 能看到很多报错信息，根据报错信息，可返回错误所在行手动修正

5. 当然，eslint有提供自动修复功能 --fix

"scripts": {
    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"
}

运行 npm run lint-fix 就能自动修复代码中的不规范

6. 若希望在开发过程中实时检测语法（即错即改，间接增加自己编写代码的规范性），不再手动执行  npm run lint-fix 命令，

需要让webpack（因为项目是基于webpack开发的）能够支持eslint，需安装eslint-loader 

npm i eslint-loader -D

在webpack.config.base.js文件中配置eslint-loader

{
   // 所有需要检测文件的后缀名集合
   test: /\.(vue|js|jsx)$/,
   // 使用eslint-loader
   loader: 'eslint-loader', 
   // 不检测/node_modules/下的文件，因为/node_modules/里的js文件非常多，而且已经经过Babel等编译处理，这些文件肯定是不符合eslint的standard标准的
   // 因为经过Babel处理之后的js,可能是使用es5的规则，而eslint的standard校验标准是使用es6甚至es7的规则
   exclude: /node_modules/, 
   // .vue文件指定用vue-loader处理，eslint只是做代码检测，不能让他来默认处理.vue文件，我们希望vue-loader在进行代码处理之前，先进行一次eslint代码检测，若果代码检测不通过，直接报错，不再需要vue-loader处理；
   // pre表示预处理，对于这几种文件，在使用真正的loader去处理之前，都会通过eslint-loader进行代码检测预处理，不同参数还能指定后处理
   enforce: 'pre' 
}

7. parser（指定解析器）,babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。经过Babel编译的语法不符合eslint规范。对于babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。一般的，使用webpack和Babel开发项目都会指定parser解析器为babel-eslint

npm i babel-eslint -D

在 .eslintrc文件配置parser参数

{
  "parser": "babel-eslint"
}

如果你使用的默认解析器的话，且在代码中使用了浏览器有兼容性问题的js新特性，使用webpack编译就会出现问题，这时我们一般装最新的eslint或者安装使用 babel-eslint 来解决问题。

editorconfig

EditorConfig插件摆脱了重复设置代码规范这件麻烦事，只需配置一个 .editorconfig 文件，在其中设置好要遵守的代码规范，放在项目的根目录下，就能够在几乎所有的主流 IDE 和编辑器中复用了，可以将 .editorconfig 文件也提交到版本控制系统中，就不需要针对不同 IDE 和编辑器再单独进行设置。webstorm默认已安装这个插件。

建议项目根目录创建.editorconfig 文件

root = true // 在项目中读editorconfig配置，读到当前文件就行，不需要再去上层目录搜索

[*] // 给所有文件指定如下规范
charset = utf-8 // 编码格式
end_of_line = lf
indent_size = 2 // 缩进大小
indent_style = space // 缩进方式 // 使用空格spaces，不用制表符tabs
insert_final_newline = true // 是否让文件以空行结束
trim_trailing_whitespace = true //  是否自动删除文件末尾空白行

pre-commit

项目要使用git进行代码提交时，使用叫pre-commit的git钩子，在调用git commit 命令时自动检测代码，若检测出错，则无法commit代码，也就无法push，保证了出错代码只在我们本地，不会把问题提交到远程仓库。

需安装husky插件

npm i husky -D

安装这个之后，会自动在项目.git目录生成一个hock，这个hock会读取package.json中的内容

在package.json文件中增加一条precommit命令

"scripts": {
    "lint": "eslint --ext .js --ext .jsx --ext .vue client/",
    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/",
    "precommit": "npm run lint"
}

装了husky之后，每次执行git commit命令，都会自动调用package.json中的precommit命令，在本项目中precommit命令就会执行eslint的代码校验，若校验失败，则无法将代码commit，避免不规范代码提交到远程仓库，特别是在多人协作中能够强制规范代码

注意。安装husky或者其他帮助我们做git hock工具的时候，都要先初始化.git目录

git init 一定要先init  再安装husky

与君共勉：再牛逼的梦想，也抵不住傻逼般的坚持！