静态代码检验工具

by admin on 2019年8月19日

ESLint是叁个用来识别和报告ECMAScript/JavaScript中代码格式的工具,目标是使代码风格特别统一和幸免不当。

ESLint最初是由Nicolas C. 扎卡s
于二零一二年十二月创立的开源项目。它的对象是提供三个插件化的javascript代码检验工具。相比于jshint鲜明的特点正是支撑插件进行还应该有就是永葆jsx语法(jshint并不补助jsx,react开辟老报错也是很脑瓜疼ㄟ(
▔, ▔ )ㄏ )。

1.安装和应用
有两种格局去安装ESLint:全局和本土。

命令行

具体的能够参谋这里
传送门
恐怕 eslint -h, 这里给出多少个常用的。

1.1地点安装和采取
假定要将ESLint作为项目塑造系统的一有个别,那么采纳在地头开始展览设置。
您能够使用npm:

安装

利用npm安装,未有npm的点这里https://www.npmjs.com/

npm i -g eslint
npm install eslint --save-dev

退换配置

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

下一场你须求树立贰个布局文件:

运行eslint

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

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

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

随之,你能够在您的体系根目录运转ESLint:

1.parserOptions 剖判器增选

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

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

  • ecmaVersion – 设置为 3, 5 (默许), 6、7 或 8 钦定你想要使用的
    ECMAScript 版本。你也足以钦命为 二零一四(同 6),2014(同 7),或
    2017(同 8)使用年份命名
  • sourceType – 设置为 “script” (暗中认可) 或 “module”(倘令你的代码是
    ECMAScript 模块)。
  • ecmaFeatures – 那是个目的,表示您想选拔的额外的语言特征:
    • globalReturn – 允许在全局意义域下使用 return 语句
    • impliedStrict – 启用全局 strict mode (若是 ecmaVersion 是 5
      或更加高)
    • jsx – 启用 JSX
    • experimentalObjectRestSpread – 启用对实验性的 object rest/spread
      properties
      的支持。(主要:那是贰个实验性的效应,在今后大概会改造肯定。
      提出你写的平整
      不要借助该意义,除非当它发出变动时你愿意担负维护资金财产。)
./node_modules/.bin/eslint yourfile.js

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 – 增添全体的 贾斯敏 版本 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 全局变量。

您使用的别的插件或可分享配置也亟须在地头安装,以此与本地安装的ESLint协作使用。

3.globals全局变量

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

当采访未定义的变量时,no-undef
准则将发出警告。如若你想在八个文本里采用全局变量,推荐您定义那一个全局变量,那样
ESLint 就不会时有发生警告了。你能够行使注释或在布局文件中定义全局变量。

1.2大局安装和使用
假设要使ESLint可以采取你的持有类型,那么选拔在全局安装ESLint。
你能够行使npm:

4.plugins 插件

ESLint 扶助使用第三方插件。在使用插件此前,你无法不选择 npm 安装它。
在配备文件里布署插件,要动用 plugins
,当中带有插件名字的列表。插件名称能够总结 eslint-plugin- 前缀。

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

留神:全局安装的 ESLint 只好利用全局安装的插件。本地安装的 ESLint
不仅可以够选择本地安装的插件还足以选择全局安装的插件。

npm install -g 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 --init

*行内配置

随着,你能够在您的档案的次序根目录运营ESLint:

禁止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');
eslint yourfile.js

*布局文件的延续

八个配置文件能够被基础配置中的已启用的平整接轨

您使用的其余插件或可分享配置也不能够不在全局安装,以此与大局安装的ESLint合营使用。

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

2.配置
在运营eslint
–init之后,会在你的目录创建一个.eslintrc文书。在里面你将看到一些之类的计划准绳:

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"
    }
}
{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

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/

“semi”和“quotes”是ESLint中准绳的称号。
第三个值是平整的失实等级,可以是以下值之一:

  • “off” 或 0 – 关闭准绳
  • “warn” 或 1 – 将准绳作为警示
  • “error” 或 2 – 将准绳作为不当

那多个错误品级允许你细微地调整ESLint怎么着行使法则。

您的.eslintrc配置文件将同样富含该行:

"extends": "eslint:recommended"

出于这一行,准则页面上标识为“”的具备法则都将被张开。

ESLint被设计为可完全配置的,配置ESLint有二种关键的方法:

  1. 批注配置 – 使用JavaScript注释将安顿音讯一直嵌入文件。
  2. 布署文件 –
    使用JavaScript,JSON或YAML文件来内定整个目录及其全部子目录的配置音信。

那足以是格式为.eslintrc.*文件或package.json中的eslintConfig域,那三个ESLint都将机关搜索和读取,也能够在命令行中指虞诩插文件。

有多少个可配置的音信:

  • Environment –
    您的剧本被规划在所运维的意况。每种情形都含有一组预订义的全局变量。
  • Globals – 您的剧本在执行时期拜望的其他全局变量。
  • Rules – 启用的条条框框和谬误的等级。

越来越多布置选项和细节,看合法配置文书档案http://eslint.org/docs/user-guide/configuring)。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图