如何使用 Eslint 规范前端代码

为什么需要 Eslint

JavaScript 的动态语言类型带来了一些问题，比如：运行时常见的 undefined、null 报错，代码随意的加减分号、换行、空格引起的视觉混乱。在团队开发中，就需要加以约束。

核心插件： Eslint + standrad

Eslint 是什么

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。与它类似的项目有 JSLint、JSHint。

Eslint 的安装与配置

一、vue-cli3 初始化引入ESLint

• 用vue-cli3 初始化搭建项目
  可以在命令行中执行 vue ui 打开vue-cli3 新增的图形化界面，以创建和管理项目；默认是配置了 babel + eslint ，也可以手动执行项目配置以引入更多特性，如router、vuex 、scss、typescript、unit测试、e2e测试;
• 后期引入 ESLint
  安装相关插件，指令：vue add @vue/eslint
  vue add @eslint 会依次执行安装和调用两条命令，并智能生成需要的配置文件，可能会修改项目当前文件内容，所以在运行 vue add 前，需要先保存提交下项目当前状态；vue add 的好处在于，可以调用 vue cli 插件，比如我只是执行了 vue add @vue/eslint 一条指令，安装后根据命令行的提示，会帮助你匹配安装剩下的所有 eslint 配置，而不需要自己再一条条安装了。

二、通用项目引入 ESLint

需要以 npm 包管理器安装 eslint，安装完成后在 ./node_modules/.bin/ 目录下执行 eslint --init 命令，根据指引生成所需的 eslint 配置方案；这里可以选择应用于 vue 或者其它例如 react 项目。

npm install eslint --save-dev   // 安装并保存到项目开发依赖
./node_modules/.bin/eslint -- --init // 初始化命令

安装完成后，可以在 package.json 的 script 中配置 lint 命令，以执行eslint 校验。

"lint": "vue-cli-service lint" //基于vue-cli3
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" // 非vue-cli3

以上参考自使用 Eslint & standard 规范前端代码