使用 Eslint & standard 规范前端代码

前言

JavaScript的动态语言类型，给它带来了独特的魅力，产生了风格多样的开发范式，同时也带来了一些问题，从运行时常见的 undefined 、null 报错，到代码随意的加减分号、换行、空格，引发的视觉混乱，若是是团队开发，则这种状况会更加的严重，必须加以约束，下文介绍基于 vue 的代码严格模式及编程规范。

 

核心插件：  Eslint +  standard

Eslint 是什么？

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

 

使用 ESLint 能够保证代码的一致性和避免错误，接下来介绍 ESLint 的使用。

ESLint 的安装与配置

1、vue-cli3 初始化引入ESLint

若是是用 vue-cli3 初始化搭建项目，能够在命令行中执行 vue ui 打开vue-cli3 新增的图形化界面，以建立和管理项目；默认是配置了 babel + eslint ，也能够手动执行项目配置以引入更多特性，如router、vuex 、scss、typescript、unit测试、e2e测试;

 

若是是后期引入 ESLint，则须要手动安装下图所示的几个与 ESLint 相关的插件，安装指令为

vue add @vue/eslint

提示: vue add 的设计意图是为了安装和调用 Vue CLI 插件。对于普通的 npm 包而言，这不意味有一个替代（命令）。对于这些普通的 npm 包，你仍然须要（根据所选的 npm 包）使用包管理器。

 

vue add @eslint 会依次执行安装和调用两条命令，并智能生成须要的配置文件，可能会修改项目当前文件内容，因此在运行 vue add 前，须要先保存提交下项目当前状态；vue add 的好处在于，能够调用 vue cli 插件，好比我只是执行了 vue add @vue/eslint 一条指令，安装后根据命令行的提示，会帮助你匹配安装剩下的全部 eslint 配置，而不须要本身再一条条安装了。

 

安装完成后，能够在根目录发现多了一个 .eslintrc.js 文件，这是 eslint 的配置文件，能够配置自定义规则（rules）等。

 

2、通用项目引入 ESLint

若是项目不是基于vue-cli3 或者 vue，则须要以 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　

编码规范 Standard 的安装与使用

应用了 ESLint 后，一般是须要本身来配置繁杂的 rules 规则，这也是一个喜爱类的东西，多数人是不肯意在这上面耗费太多精力的（好比手动配置数百个ESLint 规则），因而github 上出现了一些开源的代码规范库，比较流行的有 airbnb、standard、prettier等，下面介绍下 standard

 

在 vue 中的使用方式:

在 vue 中一般须要和 ESLint 一块儿使用，上面讲到 ESLint 时候有注意到么，ESLint 初始化指令中有一个选择开源编码规范的指令，系统默认是有 standard 的选项的，直接选择就能够了。

 

常见问题

一、配置了 ESLint + standard 可是不生效?

在项目根目录里找到 .eslintrc.js 文件，注意 extends 和 plugins 属性是否配置，下图的extends 表明 ESLint 继承了standard 的编码规范。

 

二、只是 .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"
]

　　

三、配置了 standard 后，还能自定义 rules 吗？

standard 自己是不同意这样作的，若是你必定要使用 standard 并须要对其中某些规则进行自定义的话，你须要使用 eslint-config-standard，固然， 在上面咱们执行的 ESLint init 指令安装的配置中，就是以这种形式使用standard 的。

 

总结

本文介绍了用于前端编码规范、代码质量管理的几个开源方案，搭建了基于 vue 的 ESLint + standard 方案，及对实际使用当中可能遇到的问题，进行了记录。

 

参考连接

一、 VSCode环境下配置ESLint 对Vue单文件的检测