eslint 在项目中使用

eslint 可以给我们的代码定义一些语法规范，防止我们在语法上犯一些低级的错误，格式上的问题，团队协作时大家都使用统一的代码风格去书写，让我们在看别人的代码时更方便.

在项目中安装依赖

"eslint": "^5.8.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-html": "^4.0.6",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^8.0.0",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0",

再添加一个.eslintrc 文件:

{
  "extends": "standard",
  "plugins": [
    "html",
  ],
}

再在 package.json 文件中添加 eslint 校验命令

"lint": "eslint --ext .js --ext .jsx --ext .vue src"

修复命令

"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src"

校验时报错在运行 lint 命令时 jsx 文件报错: Parsing error: Unexpected token =

经过网上查找资料，再安装一个 babel-eslint 依赖，安装后再在 .eslintrc 文件添加一行

{
  "extends": "standard",
  "plugins": [
    "html",
  ],
  "parse": "babel-eslint"
}

一般我们使用 webpack 和 babel 进行开发的时候我们都会指定他的 parse 为 babel-eslint, 因为 eslint 对有一些 es6 的语法不是很支持

我们还需要在 webpack 的 module 配置中最开始加上:

{
  test: /\\.(js|jsx|vue)$/,
  loader: 'eslint-loader',
  exclude: /node_modules/, // 因为有的 node_modules 文件已经是经过 babel 处理过的, 不符合我们的 es6 或者 es7 规范, 所有剔除
  enforce: 'pre' // 预处理: 在vue-loader之前就进行检测, 在这几种文件对应的loader处理之前就进行eslint-loader的检测
},

此时只是用命令对我们的代码进行检查，下面是配置编辑器直接在写代码的时候立即提示出有语法问题的代码

git commit 钩子插件: husky

在正式的项目中，我们会有团队协作，我们可以在 git commit 的对应 hook 进行 eslint 的检查，首先要安装 husky:

npm install husky -D