安装

ESLint 基于 Node 平台,所以 Nodejs 是必须安装的,然后通过 npm 安装 ESLint 包,至于全局安装还是作为开发依赖安装,取决于个人。

然后在 WebStorm 中,打开设置(File>Setting或者Alt+F7),按路径进入 ESLint 的配置界面(Languages&Frameworks>JavaScript>Code Quality Tools>ESLint)。开启 ESLint,并配置相应路径,配置文件默认使用.eslintrc

配置

ESLint 的配置分为六大块,分别是:

  1. Parser Options(解析器选项)。涉及语言版本等参数。ESLin t默认只支持 ES5,如果需要支持 ES6,需要在这配置。
  2. Parser(解析器选择)。可以让你自己选择ESLint的解析器。ESLint 默认使用Espress作为作为解析器,强烈不推荐修改
  3. Environments(语言环境选项)。比如borwsernodejquerymeteor等等
  4. Globals(全局变量)。比如你自己写了插件,需要全局使用,需要在这个选项中声明。
  5. Plugins(第三方插件)。引入的第三方插件,为了防止误杀,需要在这个选项中申明(但限于 npm 插件,如果是 jquery 插件等前端插件,建议在Globals选择中声明)。
  6. Rules(语法规则)。这个是 ESLint 的重点,同时也是整个配置中最丰富的地方,比如结尾分号检测,单双引号,严格格式等。

规范代码

JavaScript 的代码检查工具有:JSLint,JSHint, JSCS, ESLint,本文着重介绍 ESLint。

ESLint 在一系列的代码质量检查工具中,是最年轻的一个,当然也是最现代化的。配置多样,支持 JavaScript, JSON 以及 YAML 格式的 .eslintrc.*文件,同时也支持在package.jsoneslintConfig字段配置(Configuration File Formats)。

安装

ESLint 基于 Node 平台,所以 Nodejs 是必须安装的,然后通过 npm 安装 ESLint 包,至于全局安装还是作为开发依赖安装,取决于个人。

然后在 WebStorm 中,打开设置(File>Setting或者Alt+F7),按路径进入 ESLint 的配置界面(Languages&Frameworks>JavaScript>Code Quality Tools>ESLint)。开启 ESLint,并配置相应路径,配置文件默认使用.eslintrc

配置

ESLint 的配置分为六大块,分别是:

  1. Parser Options(解析器选项)。涉及语言版本等参数。ESLin t默认只支持 ES5,如果需要支持 ES6,需要在这配置。
  2. Parser(解析器选择)。可以让你自己选择ESLint的解析器。ESLint 默认使用Espress作为作为解析器,强烈不推荐修改
  3. Environments(语言环境选项)。比如borwsernodejquerymeteor等等
  4. Globals(全局变量)。比如你自己写了插件,需要全局使用,需要在这个选项中声明。
  5. Plugins(第三方插件)。引入的第三方插件,为了防止误杀,需要在这个选项中申明(但限于 npm 插件,如果是 jquery 插件等前端插件,建议在Globals选择中声明)。
  6. Rules(语法规则)。这个是 ESLint 的重点,同时也是整个配置中最丰富的地方,比如结尾分号检测,单双引号,严格格式等。
语法规则(Rules)配置

在官方文档中,语法规则的配置又分六大类:

  1. Possible Errors,常见错误。
  2. Best Practices,最佳实践
  3. Strict Mode,严格模式
  4. Variables,变量声明相关,比如不允许未定义的变量
  5. Node.js and CommonJS
  6. Stylistic Issues,代码样式,比如单双引号,单行长度,嵌套深度等等
  7. ECMAScript 6,ES6相关语法,箭头函数,生成器等等。
语法规则(Rules)配置

在官方文档中,语法规则的配置又分六大类:

  1. Possible Errors,常见错误。
  2. Best Practices,最佳实践
  3. Strict Mode,严格模式
  4. Variables,变量声明相关,比如不允许未定义的变量
  5. Node.js and CommonJS
  6. Stylistic Issues,代码样式,比如单双引号,单行长度,嵌套深度等等
  7. ECMAScript 6,ES6相关语法,箭头函数,生成器等等。
语法规则配置的写法

使用键值对编写,语言规则字段(rule ID)作为键,通过不同的值来影响规则字段。规则字体的值必须是以下三种之一:

  • "off" 或者0——不检查这个规则
  • "warn"或者1——开启这个规则,规则生效时,作为提醒告诉用户
  • "error"或者2——开启这个规则,规则生效时,作为错误告诉用户

用以下简短的规则配置做说明:

1
2
3
4
5
6
7
{
  "rules": {
    "quotes": ["2", "single"],
    "no-undef": [2],
    "no-multi-spaces": [1]
  }
}

这个配置规则对应如下:

  • 要求使用单引号,如果不是,显示错误信息
  • 如果使用了未声明的变量,显示错误信息
  • 如果变量与操作符之间出现多个空格,显示提醒信息
.eslintignore

如果你有 Git 的使用经验,那.eslintignore文件的功能也就很容易理解了。类似于.gitignore,用于排除文件与目录,比如npm的node_modules目录等,以及一些第三方插件。对于这些目录与文件,不执行代码质量检查。

开始介绍EsLint的详细用法

parserOptions

EsLint通过parserOptions,允许指定校验的ecma的版本,及ecma的一些特性

{
"parserOptions": {
"ecmaVersion": 6, //指定ECMAScript支持的版本,6为ES6
"sourceType": "module", //指定来源的类型,有两种”script”或”module”
"ecmaFeatures": {
"jsx": true//启动JSX
},
}
}

Parser

EsLint默认使用esprima做脚本解析,当然你也切换他,比如切换成babel-eslint解析

{
"parser": "esprima" //默认,可以设置成babel-eslint,支持jsx
}

Environments

Environment可以预设好的其他环境的全局变量,如brower、node环境变量、es6环境变量、mocha环境变量等

{
"env": {
"browser": true,
"node": true
}
}

如果你想使用插件中的环境变量,你可以使用plugins指定,如下

{
"plugins": ["example"],
"env": {
"example/custom": true
}
}

Globals

指定你所要使用的全局变量,true代表允许重写、false代表不允许重写

{
"globals": {
"var1": true,
"var2": false
}
}

Plugins

EsLint允许使用第三方插件

{
"plugins": [
"react"
]
}

Rules

自定义规则,一般格式:”规则名称”:error级别系数。系数0为不提示(off)、1为警告(warn)、2为错误抛出(error),可指定范围,如[1,4]

可以包括Strict模式、也可以是code的方式提醒,如符号等。还可以是第三方的校验,如react。

默认校验的地址http://eslint.org/docs/rules/

{
"plugins": [
"react"
],
"rules": {
//Javascript code 默认校验
"eqeqeq": "off", //off = 0
"curly": "error", //error = 2
"quotes": ["warn", "double"], //warn = 1
//使用第三方插件的校验规则
"react/jsx-quotes": 0
}
}
 
 

所有引用规则均可参考:

http://eslint.org/docs/rules/

参考配置如下:

{
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"commonjs": true,
"meteor": true,
"mongo": true,
"jquery": true,
"amd": true
},
"globals": {},
"rules": {
"no-alert": 0,//禁止使用alert confirm prompt
"no-array-constructor": 2,//禁止使用数组构造器
"no-bitwise": 0,//禁止使用按位运算符
"no-caller": 1,//禁止使用arguments.caller或arguments.callee
"no-catch-shadow": 2,//禁止catch子句参数与外部作用域变量同名
"no-class-assign": 2,//禁止给类赋值
"no-cond-assign": 2,//禁止在条件表达式中使用赋值语句
"no-console": 2,//禁止使用console
"no-const-assign": 2,//禁止修改const声明的变量
"no-constant-condition": 2,//禁止在条件中使用常量表达式 if(true) if(1)
"no-continue": 0,//禁止使用continue
"no-control-regex": 2,//禁止在正则表达式中使用控制字符
"no-debugger": 2,//禁止使用debugger
"no-delete-var": 2,//不能对var声明的变量使用delete操作符
"no-div-regex": 1,//不能使用看起来像除法的正则表达式/=foo/
"no-dupe-keys": 2,//在创建对象字面量时不允许键重复 {a:1,a:1}
"no-dupe-args": 2,//函数参数不能重复
"no-duplicate-case": 2,//switch中的case标签不能重复
"no-else-return": 2,//如果if语句里面有return,后面不能跟else语句
"no-empty": 2,//块语句中的内容不能为空
"no-empty-character-class": 2,//正则表达式中的[]内容不能为空
"no-empty-label": 2,//禁止使用空label
"no-eq-null": 2,//禁止对null使用==或!=运算符
"no-eval": 1,//禁止使用eval
"no-ex-assign": 2,//禁止给catch语句中的异常参数赋值
"no-extend-native": 2,//禁止扩展native对象
"no-extra-bind": 2,//禁止不必要的函数绑定
"no-extra-boolean-cast": 2,//禁止不必要的bool转换
"no-extra-parens": 2,//禁止非必要的括号
"no-extra-semi": 2,//禁止多余的冒号
"no-fallthrough": 1,//禁止switch穿透
"no-floating-decimal": 2,//禁止省略浮点数中的0 .5 3.
"no-func-assign": 2,//禁止重复的函数声明
"no-implicit-coercion": 1,//禁止隐式转换
"no-implied-eval": 2,//禁止使用隐式eval
"no-inline-comments": 0,//禁止行内备注
"no-inner-declarations": [2, "functions"],//禁止在块语句中使用声明(变量或函数)
"no-invalid-regexp": 2,//禁止无效的正则表达式
"no-invalid-this": 2,//禁止无效的this,只能用在构造器,类,对象字面量
"no-irregular-whitespace": 2,//不能有不规则的空格
"no-iterator": 2,//禁止使用__iterator__ 属性
"no-label-var": 2,//label名不能与var声明的变量名相同
"no-labels": 2,//禁止标签声明
"no-lone-blocks": 2,//禁止不必要的嵌套块
"no-lonely-if": 2,//禁止else语句内只有if语句
"no-loop-func": 1,//禁止在循环中使用函数(如果没有引用外部变量不形成闭包就可以)
"no-mixed-requires": [0, false],//声明时不能混用声明类型
"no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格
"linebreak-style": [0, "windows"],//换行风格
"no-multi-spaces": 1,//不能用多余的空格
"no-multi-str": 2,//字符串不能用\换行
"no-multiple-empty-lines": [1, {"max": 2}],//空行最多不能超过2行
"no-native-reassign": 2,//不能重写native对象
"no-negated-in-lhs": 2,//in 操作符的左边不能有!
"no-nested-ternary": 0,//禁止使用嵌套的三目运算
"no-new": 1,//禁止在使用new构造一个实例后不赋值
"no-new-func": 1,//禁止使用new Function
"no-new-object": 2,//禁止使用new Object()
"no-new-require": 2,//禁止使用new require
"no-new-wrappers": 2,//禁止使用new创建包装实例,new String new Boolean new Number
"no-obj-calls": 2,//不能调用内置的全局对象,比如Math() JSON()
"no-octal": 2,//禁止使用八进制数字
"no-octal-escape": 2,//禁止使用八进制转义序列
"no-param-reassign": 2,//禁止给参数重新赋值
"no-path-concat": 0,//node中不能使用__dirname或__filename做路径拼接
"no-plusplus": 0,//禁止使用++,--
"no-process-env": 0,//禁止使用process.env
"no-process-exit": 0,//禁止使用process.exit()
"no-proto": 2,//禁止使用__proto__属性
"no-redeclare": 2,//禁止重复声明变量
"no-regex-spaces": 2,//禁止在正则表达式字面量中使用多个空格 /foo bar/
"no-restricted-modules": 0,//如果禁用了指定模块,使用就会报错
"no-return-assign": 1,//return 语句中不能有赋值表达式
"no-script-url": 0,//禁止使用javascript:void(0)
"no-self-compare": 2,//不能比较自身
"no-sequences": 0,//禁止使用逗号运算符
"no-shadow": 2,//外部作用域中的变量不能与它所包含的作用域中的变量或参数同名
"no-shadow-restricted-names": 2,//严格模式中规定的限制标识符不能作为声明时的变量名使用
"no-spaced-func": 2,//函数调用时 函数名与()之间不能有空格
"no-sparse-arrays": 2,//禁止稀疏数组, [1,,2]
"no-sync": 0,//nodejs 禁止同步方法
"no-ternary": 0,//禁止使用三目运算符
"no-trailing-spaces": 1,//一行结束后面不要有空格
"no-this-before-super": 0,//在调用super()之前不能使用this或super
"no-throw-literal": 2,//禁止抛出字面量错误 throw "error";
"no-undef": 1,//不能有未定义的变量
"no-undef-init": 2,//变量初始化时不能直接给它赋值为undefined
"no-undefined": 2,//不能使用undefined
"no-unexpected-multiline": 2,//避免多行表达式
"no-underscore-dangle": 1,//标识符不能以_开头或结尾
"no-unneeded-ternary": 2,//禁止不必要的嵌套 var isYes = answer === 1 ? true : false;
"no-unreachable": 2,//不能有无法执行的代码
"no-unused-expressions": 2,//禁止无用的表达式
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],//不能有声明后未被使用的变量或参数
"no-use-before-define": 2,//未定义前不能使用
"no-useless-call": 2,//禁止不必要的call和apply
"no-void": 2,//禁用void操作符
"no-var": 0,//禁用var,用let和const代替
"no-warning-comments": [1, { "terms": ["todo", "fixme", "xxx"], "location": "start" }],//不能有警告备注
"no-with": 2,//禁用with "array-bracket-spacing": [2, "never"],//是否允许非空数组里面有多余的空格
"arrow-parens": 0,//箭头函数用小括号括起来
"arrow-spacing": 0,//=>的前/后括号
"accessor-pairs": 0,//在对象中使用getter/setter
"block-scoped-var": 0,//块语句中使用var
"brace-style": [1, "1tbs"],//大括号风格
"callback-return": 1,//避免多次调用回调什么的
"camelcase": 2,//强制驼峰法命名
"comma-dangle": [2, "never"],//对象字面量项尾不能有逗号
"comma-spacing": 0,//逗号前后的空格
"comma-style": [2, "last"],//逗号风格,换行时在行首还是行尾
"complexity": [0, 11],//循环复杂度
"computed-property-spacing": [0, "never"],//是否允许计算后的键名什么的
"consistent-return": 0,//return 后面是否允许省略
"consistent-this": [2, "that"],//this别名
"constructor-super": 0,//非派生类不能调用super,派生类必须调用super
"curly": [2, "all"],//必须使用 if(){} 中的{}
"default-case": 2,//switch语句最后必须有default
"dot-location": 0,//对象访问符的位置,换行的时候在行首还是行尾
"dot-notation": [0, { "allowKeywords": true }],//避免不必要的方括号
"eol-last": 0,//文件以单一的换行符结束
"eqeqeq": 2,//必须使用全等
"func-names": 0,//函数表达式必须有名字
"func-style": [0, "declaration"],//函数风格,规定只能使用函数声明/函数表达式
"generator-star-spacing": 0,//生成器函数*的前后空格
"guard-for-in": 0,//for in循环要用if语句过滤
"handle-callback-err": 2,//nodejs 处理错误
"id-length": 0,//变量名长度
"indent": [2, 4],//缩进风格
"init-declarations": 0,//声明时必须赋初值
"key-spacing": [0, { "beforeColon": false, "afterColon": true }],//对象字面量中冒号的前后空格
"lines-around-comment": 0,//行前/行后备注
"max-depth": [0, 4],//嵌套块深度
"max-len": [0, 80, 4],//字符串最大长度
"max-nested-callbacks": [0, 2],//回调嵌套深度
"max-params": [0, 3],//函数最多只能有3个参数
"max-statements": [0, 10],//函数内最多有几个声明
"new-cap": 2,//函数名首行大写必须使用new方式调用,首行小写必须用不带new方式调用
"new-parens": 2,//new时必须加小括号
"newline-after-var": 2,//变量声明后是否需要空一行
"object-curly-spacing": [0, "never"],//大括号内是否允许不必要的空格
"object-shorthand": 0,//强制对象字面量缩写语法
"one-var": 1,//连续声明
"operator-assignment": [0, "always"],//赋值运算符 += -=什么的
"operator-linebreak": [2, "after"],//换行时运算符在行尾还是行首
"padded-blocks": 0,//块语句内行首行尾是否要空行
"prefer-const": 0,//首选const
"prefer-spread": 0,//首选展开运算
"prefer-reflect": 0,//首选Reflect的方法
"quotes": [1, "single"],//引号类型 `` "" ''
"quote-props":[2, "always"],//对象字面量中的属性名是否强制双引号
"radix": 2,//parseInt必须指定第二个参数
"id-match": 0,//命名检测
"require-yield": 0,//生成器函数必须有yield
"semi": [2, "always"],//语句强制分号结尾
"semi-spacing": [0, {"before": false, "after": true}],//分号前后空格
"sort-vars": 0,//变量声明时排序
"space-after-keywords": [0, "always"],//关键字后面是否要空一格
"space-before-blocks": [0, "always"],//不以新行开始的块{前面要不要有空格
"space-before-function-paren": [0, "always"],//函数定义时括号前面要不要有空格
"space-in-parens": [0, "never"],//小括号里面要不要有空格
"space-infix-ops": 0,//中缀操作符周围要不要有空格
"space-return-throw-case": 2,//return throw case后面要不要加空格
"space-unary-ops": [0, { "words": true, "nonwords": false }],//一元运算符的前/后要不要加空格
"spaced-comment": 0,//注释风格要不要有空格什么的
"strict": 2,//使用严格模式
"use-isnan": 2,//禁止比较时使用NaN,只能用isNaN()
"valid-jsdoc": 0,//jsdoc规则
"valid-typeof": 2,//必须使用合法的typeof的值
"vars-on-top": 2,//var必须放在作用域顶部
"wrap-iife": [2, "inside"],//立即执行函数表达式的小括号风格
"wrap-regex": 0,//正则表达式字面量用小括号包起来
"yoda": [2, "never"]//禁止尤达条件
}
}

webstorm引用ESLint进行静态代码检查的更多相关文章

  1. [原创]Java静态代码检查工具介绍

    [原创]Java静态代码检查工具介绍 一  什么是静态代码检查? 静态代码分析是指无需运行被测代码,仅通过分析或检查源程序的语法.结构.过程.接口等来检查程序的正确性,找出代码隐藏的错误和缺陷,如参数 ...

  2. C#静态代码检查工具StyleCode

    C#静态代码检查工具StyleCode -- 初探 最近我们Advent Data Service (ADS) 在项目上需要按照代码规范进行代码的编写工作,以方便将来代码的阅读与维护. 但是人工检查起 ...

  3. FindBugs:Java 静态代码检查

    在使用 Jenkins 构建 Java Web 项目时候,有一项叫做静态代码检查,是用内置的 findBugs 插件,对程序源代码进行检查,以分析程序行为的技术,应用于程序的正确性检查. 安全缺陷检测 ...

  4. OC静态代码检查实战

    此文已由作者杨晓授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在Mac OS系统上,采用Xcodebuild Analyze命令和OClint工具,对iOS项目进行静态代码 ...

  5. 静态代码检查工具 cppcheck 的使用

      CppCheck是一个C/C++代码缺陷静态检查工具.不同于C/C++编译器及其它分析工具,CppCheck只检查编译器检查不出来的bug,不检查语法错误.所谓静态代码检查就是使用一个工具检查我们 ...

  6. 静态代码检查工具 cppcheck 的使用(可分别集成到VS和QT Creator里)

    CppCheck是一个C/C++代码缺陷静态检查工具.不同于C/C++编译器及其它分析工具,CppCheck只检查编译器检查不出来的bug,不检查语法错误.所谓静态代码检查就是使用一个工具检查我们写的 ...

  7. 在Jenkins中使用sonar进行静态代码检查

    要解决的问题 jenkins自动构建完成后,希望能通过sonar静态代码检查生成一份报告,给与开发人员对当前代码的做一个质量评估和修改意见 1.安装并配置sonar服务器 懒得说,跟着官方文档走就行, ...

  8. jenkins+findbugs+checkstyle+PMD静态代码检查(二)

    可以根据自己的需求选中对应的插件进行配置(不一定非要同时配置三个插件) jenkins:持续集成的工具 fundbugs:检测代码静态错误的插件  例如:定义了没有用到的对象,string类型的比较使 ...

  9. Python静态代码检查工具Flake8

    简介 Flake8 是由Python官方发布的一款辅助检测Python代码是否规范的工具,相对于目前热度比较高的Pylint来说,Flake8检查规则灵活,支持集成额外插件,扩展性强.Flake8是对 ...

随机推荐

  1. mysql主从复制Error1205

    主从架构.今天发现从库SQL线程报错,主从复制停止了.查看错误发现: Last_SQL_Errno: 1205             Last_SQL_Error: Slave SQL thread ...

  2. Linux上的TIME_WAIT和tcp_fin_timeout

    当Linux服务器的TIME_WAIT过多时,通常会想到去修改参数降低TIME_WAIT时长,以减少TIME_WAIT数量,但Linux并没有提供这样的接口,除非重新编译内核. Linux默认的TIM ...

  3. 使用 alt_disk_copy 克隆 rootvg

    地址:http://www.ibm.com/developerworks/cn/aix/library/au-alt_disk_copy/ 简介 大多数系统管理员都遇到过以下情况: 一次 ML 升级失 ...

  4. shell 命令 netstat 查看端口占用

    netstat 查看 8888端口的占用情况

  5. HyperServer 中的 SSL 支持

    HyperServer 中的 SSL 支持 DLL 模式不需要 SSL 配置, 因为 web 服务器 (如 IIS) 将承担 ssl 配置和 ssl 证书的责任. 对于独立和服务模式, ssl 配置是 ...

  6. 调用 TBrowseForFolder 的正确姿势

    [教程]调用 TBrowseForFolder 的正确姿势 2017-08-22 • C++ Builder.Delphi.教程 • 暂无评论 • swish •浏览 562 次 TBrowseFor ...

  7. Django:全文检索功能可参考博客

    https://blog.csdn.net/AC_hell/article/details/52875927 https://www.zmrenwu.com/courses/django-blog-t ...

  8. C# 开源仪表盘库—Agauge App

    1.简介 有个叫A.J.Bauer 的大神在System.Windows.Forms.Control类的基础上建立了一个显示各种仪表盘的类.                   英文版简介:C# Tu ...

  9. js css等静态文件版本控制,一处配置多处更新.net版【原创】

    日常web开发中,我们修改了js.css等静态资源文件后,如果文件名不变的话,客户端浏览并不会及时获取最新的资源文件,这就很尴尬了 怎么办呢? 1.小白:让客户清除缓存?,No ,  不靠谱 2.初级 ...

  10. ASP.NET MVC的切片(Section)脚本(script)

    在ASP.NET MVC使用切片脚本,实在是很溜. 在使用layout之后,只是视图套用_Layout之后,在视图中任一位置任一时候均可以使用切片脚本. 首先在_Layout.cshtml定一些规则: ...