eslint 静态代码检测工具

作者: gavinDu | 来源:发表于2017-07-27 14:56 被阅读0次

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。对比于jshint显著的特点就是支持插件拓展还有就是支持jsx语法（jshint并不支持jsx，react开发老报错也是很头疼ㄟ( ▔, ▔ )ㄏ）。

命令行

具体的可以参考这里传送门或者 eslint -h，这里给出几个常用的。

安装

使用npm安装，没有npm的点这里https://www.npmjs.com/

npm i -g eslint

生成配置

eslint --init
//回答问题后生成eslint配置。

运行eslint

eslint [options] [file|dir|glob]*

//eslint file1.js file2.js
//eslint lib/**
//eslint "lib/**" glob模式要用引号

eslint配置

配置有这几种方式：

直接在代码文件中定义，使用 JavaScript 注释把配置信息直接嵌入到一个文件。
使用 .eslintrc （json或者YAML）或者 .eslintrc.yml（YAML）或者 .eslintrc.js（javascript）或者 .eslintrc.json （JSON）；
在 package.json 中添加 eslintConfig 字段；

和jshint一样有个忽略检测文件的配置.eslintignore。
eslintrc执行时会从检测的文件一层层往上找配置文件，但是离检测文件最近的文件优先级最高，会覆盖父级的配置。所以一般会在根目录的配置中加一个：

# YAML
root: true

ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
如果项目内没有配置文件，会退回到系统 ~/.eslintrc 中自定义的默认配置。

有很多信息可以被配置：

Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
Globals - 脚本在执行期间访问的额外的全局变量。
Rules - 启用的规则及各自的错误级别。

一个简单的例子(.eslintrc.yml)：

# YAML 
env:
  browser: true
parserOptions: 
  ecmaVersion: 6
  ecmaFeatures:
    jsx: true
globals :
   angular: true 
rules:
  camelcase: 0
  curly: 2
  brace-style: 
    - 2 
    - 1tbs
  quotes: 
    - 2 
    - single
  semi: 
    - 2 
    - always
  space-in-brackets:
    - 2 
    - never
  space-infix-ops: 2

1.parserOptions 解析器选项

#YAML
parserOptions: 
  ecmaVersion: 6
  ecmaFeatures:
    jsx: true

parserOptions 属性设置解析器选项。可用的选项有：

ecmaVersion - 设置为 3， 5 (默认)， 6、7 或 8 指定你想要使用的 ECMAScript 版本。你也可以指定为 2015（同 6），2016（同 7），或 2017（同 8）使用年份命名
sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
ecmaFeatures - 这是个对象，表示你想使用的额外的语言特性:
- globalReturn - 允许在全局作用域下使用 return 语句
- impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
- jsx - 启用 JSX
- experimentalObjectRestSpread - 启用对实验性的 object rest/spread properties 的支持。(重要：这是一个实验性的功能,在未来可能会改变明显。建议你写的规则不要依赖该功能，除非当它发生改变时你愿意承担维护成本。)

2.env 环境全局变量

# YAML
env:
  browser: true

环境定义了预定义的全局变量。可用的环境有：

browser - browser 全局变量。
node - Node.js 全局变量和 Node.js 作用域。
commonjs - CommonJS 全局变量和 CommonJS 作用域 (仅为使用 Browserify/WebPack 写的只支持浏览器的代码)。
shared-node-browser - Node 和 Browser 通用全局变量。
es6 - 支持除模块外所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
worker - web workers 全局变量。
amd - 定义 require() 和 define() 作为像 amd 一样的全局变量。
mocha - 添加所有的 Mocha 测试全局变量。
jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
jest - Jest 全局变量。
phantomjs - PhantomJS 全局变量。
protractor - Protractor 全局变量。
qunit - QUnit 全局变量。
jquery - jQuery 全局变量。
prototypejs - Prototype.js 全局变量。
shelljs - ShellJS 全局变量。
meteor - Meteor 全局变量。
mongo - MongoDB 全局变量。
applescript - AppleScript 全局变量。
nashorn - Java 8 Nashorn 全局变量。
serviceworker - Service Worker 全局变量。
atomtest - Atom 测试全局变量。
embertest - Ember 测试全局变量。
webextensions - WebExtensions 全局变量。
greasemonkey - GreaseMonkey 全局变量。

3.globals全局变量

# YAML
globals :
   angular: true 
   var1: true
   var2: false

当访问未定义的变量时，no-undef 规则将发出警告。如果你想在一个文件里使用全局变量，推荐你定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。

4.plugins 插件

ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。
在配置文件里配置插件，要使用 plugins ，其中包含插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。

# YAML
plugins:
    - plugin1
    - eslint-plugin-plugin2

注意：全局安装的 ESLint 只能使用全局安装的插件。本地安装的 ESLint 不仅可以使用本地安装的插件还可以使用全局安装的插件。

5.Rules 规则

plugins:
  - plugin1
rules:
  curly: 2
  brace-style: 
    - 2 
    - 1tbs
  quotes: 
    - 2 
    - single
  plugin1/rule1 : error
  #配置定义在插件中的一个规则的时候，你必须使用 插件名/规则ID 的形式

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用哪些规则。改变一个规则设置，你必须设置规则 ID 等于这些值之一：

"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

具体的规则太多了这一看这里：传送门

6.共享设置

# YAML
settings:
    sharedData: "Hello"

ESLint 支持在配置文件添加共享设置。你可以添加 settings 对象到配置文件，它将提供给每一个将被执行的规则。如果你想添加的自定义规则而且使它们可以访问到相同的信息，这将会很有用，并且很容易配置。

*行内配置

禁止eslint检测

//1.禁止规则出现警告
/* eslint-disable */
alert('foo');
/* eslint-enable */

//.2或者对指定的规则启用或禁用警告
/* eslint-disable no-alert, no-console */
alert('foo');
console.log('bar');
/* eslint-enable no-alert, no-console */

//3.整个文件范围内禁止规则出现警告,将 /* eslint-disable */ 块注释放在文件顶部

//4.你也可以对整个文件启用或禁用警告:
/* eslint-disable no-alert */
// Disables no-alert for the rest of the file

//5.单行注释
alert('foo'); // eslint-disable-line
// eslint-disable-next-line
alert('foo');

*配置文件的继承

一个配置文件可以被基础配置中的已启用的规则继承

1 eslint:recommended

值为 "eslint:recommended" 的 extends 属性启用一系列核心规则，这些规则报告一些常见问题，在规则页面中被标记为。这个推荐的子集只能在 ESLint 主要版本进行更新。

# YAML
extends: eslint:recommended,
rules : 
  #enable additional rules
  indent: 
    - error
    - 4

2 extend npm包

继承的可以是一个 npm 包，它输出一个配置对象。要确保这个包安装在 ESLint 能请求到的目录下。extends 属性值可以省略包名的前缀 eslint-config-。

# YAML
extends: standard
rules:
  comma-dangle:
    - error
    - always
  no-empty: warn

3 plugins npm包

一些插件也可以输出一个或多个命名的配置。要确保这个包安装在 ESLint 能请求到的目录下。plugins 属性值可以省略包名的前缀 eslint-plugin-。
extends 属性值可以由以下组成：

plugin:
包名 (省略了前缀，比如，react)
/
配置名称 (比如 recommended)

# JSON
{
    "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "rules": {
       "no-set-state": "off"
    }
}

4 继承配置文件

extends 属性值可以是基本配置文件的绝对路径或相对路径。

{
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        "./node_modules/coding-standard/.eslintrc-es6",
        "./node_modules/coding-standard/.eslintrc-jsx"
    ],
    "rules": {
        "eqeqeq": "warn"
    }
}

参考
http://eslint.cn/
http://eslint.org/docs
https://csspod.com/getting-started-with-eslint/

网友评论

我爱编程

本文标题：eslint 静态代码检测工具

本文链接：https://www.haomeiwen.com/subject/bimzkxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！