我爱编程

eslint 静态代码检测工具

2017-07-27  本文已影响0人  gavinDu

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配置

配置有这几种方式：

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

# YAML
root: true

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

有很多信息可以被配置：

一个简单的例子(.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 属性设置解析器选项。可用的选项有：

2.env 环境全局变量

# YAML
env:
  browser: true

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

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 等于这些值之一：

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

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 属性值可以由以下组成：

# 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/

上一篇下一篇

猜你喜欢

热点阅读