卿可以使用npm,比较于jshint显明的风味就是支撑插件进行还有即使是永葆jsx语法(jshint并无协理jsx

ESLint是一个用于识别及报告ECMAScript/JavaScript中代码格式的家伙,目的是要代码风格越来越统一和免不当。

ESLint最初是由于Nicholas(Nicholas) C. Zakas
于二〇一三年十二月开创的开源项目。它的靶子是提供一个插件化的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 版本。你也可指定为 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
      的协助。(首要:这是一个试验性的法力,在未来恐怕会合转肯定。
      提议乃写的条条框框
      不要借助该意义,除非当它们起变动时您愿意负责维护资金。)
./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 – 添加所有的 贾斯敏(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(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)。

相关文章