ESLint--定制你的代码规则

时间 2019-11-12

标签 eslint 定制代码规则繁體版

原文原文链接

简介

ESLint是一个开源的项目，由Nicholas C. Zakas（《JavaScript高级程序设计》做者）于2013年六月建立。它的目标是为JavaScript提供一个彻底可配置的实用lint工具。css

JavaScript是一种动态的、松散型的语言，是特别容易受到开发人员的错误使用。而ESLint能够在不执行JavaScript代码的状况下发现代码的问题。html

ESLint由Node.js编写，经过NPM提供快速的运行环境，而且安装方便。前端

安装

全局安装react
```
$ npm install -g eslint
```
本地安装jquery
```
$ npm install eslint --save-dev
```

使用

生成配置文件

在你想要使用ESLint的工程根目录下执行：nginx

eslint --init

这个命令的目的是建立一个eslint配置文件。若是你是全局安装的eslint，那么能够在任意文件中使用该命令，不然，你必须在使用该命令以前在该项目中安装eslint。sql

执行该命令后，通常会出现三个选项可供选择，他们分别是：npm

❯ Answer questions about your style
  Use a popular style guide Inspect your JavaScript file(s)

经过询问你来定制你的配置文件；
使用通用的配置文件；
经过审查你写的JavaScript文件来生成一个配置文件；

在这以后，在你的目录中会有一个.eslintrc文件，这个.eslintrc的存在形式也是可选择的，它能够是JavaScript、YAML、JSON、package.json等等。json

配置文件

生成配置文件以后，打开.eslintrc文件（通常是隐藏的），能够看到如下格式的内容：swift

{
    "env": { "browser": true }, "extends": "eslint:recommended", "rules": { "indent": [ "error", "tab" ], "linebreak-style": [ "error", "unix" ], "quotes": [ "error", "double" ], "semi": [ "error", "always" ] }, Globals: { } }

我这个是json格式的，这里解释一下这个文件里各个参数的意思：

env ：指定你的js代码在哪一个运行环境中检测（每一个运行环境都有一组预约义的全局变量）；
extends ：扩展配置规则（），我这里扩展的是eslint的推荐规则；

rules ：指定检测规则；

这是最重要的部分，也是你的自定义js代码监测规则的地方，他的格式是：规则名: 规则。好比：

"indent": ["error","tab"]

这里indent就是规则名，它定义了缩进应该使用tab，规则内的第一个值error指的是错误等级，它有三个等级，分别是：

error level	数值表示	涵义
error	2	做为错误
warn	1	做为提醒
off	0	关闭该规则

更多的规则能够参考官网的rules。

Globals ：指定脚本执行过程当中访问的附加全局变量（好比jquery）

PS:

您能够配置全局的.eslint文件，而不至于要每一个工程中都建立一个独有的.eslint文件，烹制方法是将您的.eslintr文件放在当前用户的根目录下，类Unix系统的当前用户目录是~，而Windows系统的话则是相似于C:\Windows\Users\Username这样的地方

检测文件

在你的工程目录下执行：

eslint yourfile.js

它会在命令后输出你的全部报错信息。这样就ok了。我的感受它的最大优点就是彻底可配置，并且配置文件一次构建，能够经过粘贴复制的方式无数次使用。甚至整个团队能够经过使用一份配置文件来达到规范代码的做用，仍是很强大的。

使用现有的通用规则

eslint官方提供了3种预安装包：

eslint-config-google

Google标准

执行安装：
```
npm install eslint eslint-config-google -g
```
eslint-config-airbnb

Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件，而且对各个插件的版本有所要求。

你能够执行如下命令查看所依赖的各个版本：
```
npm info "eslint-config-airbnb@latest" peerDependencies
```
你会看到如下输出信息，包含每一个了每一个plugins的版本要求
```
{ eslint: '^3.15.0', 'eslint-plugin-jsx-a11y': '^3.0.2 || ^4.0.0', 'eslint-plugin-import': '^2.2.0', 'eslint-plugin-react': '^6.9.0' }
```
知道了每一个plugins的版本要求后，代入如下命令执行安装便可使用：
```
npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -g
```
eslint-config-standard

Standard标准，它是一些前端工程师自定的标准。

执行安装：
```
npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -g
```

目前来看，公认的最好的标准是Airbnb标准。建议全局安装这些标准，而后在你的.eslint配置文件中直接使用：

{
  "extends": "Airbnb/standard/Google/" }文章转自 https://www.cnblogs.com/yzg1/archive/2017/01/13/6282791.html