首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他
关于

ESLint的使用

2019年01月03日 发布 阅读(474) 作者:懒炖

安装

  1. npm install eslint --save-dev

.eslintrc.*文件的配置

ESLint 支持几种格式的配置文件:

JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
JSON - 使用 .eslintrc.json 去定义配置的结构,ESLint 的 JSON 文件允许 JavaScript 风格的注释。
(弃用) - 使用 .eslintrc,可以使 JSON 也可以是 YAML。
package.json - 在 package.json 里创建一个 eslintConfig属性,在那里定义你的配置。
如果同一个目录下有多个配置文件,ESLint 只会使用一个。优先级顺序如下:

  • .eslintrc.js
  • .eslintrc.yaml
  • .eslintrc.yml
  • .eslintrc.json
  • .eslintrc
  • package.json

除了package.json,其他的都是单独的配置文件。以package.json为例,配置eslintConfig

  1. {
  2. "eslintConfig": {
  3. "env": {
  4. "browser": true,
  5. "node": true
  6. "jquery":true
  7. },
  8. "rules": {
  9. "no-var": "off"
  10. }
  11. }
  12. }

多个配置文件的优先级

.eslintrc.*如果放在项目的根目录中,则会作用于整个项目。如果在项目的子目录中也包含着.eslintrc文件,则对于子目录中文件的检查会忽略掉根目录中的配置,而直接采用子目录中的配置,这就能够在不同的目录范围内应用不同的检查规则,显得比较灵活。ESLint采用逐级向上查找的方式查找.eslintrc.文件,当找到带有”root”: true配置项的.eslintrc.文件时,将会停止向上查找

“extends”除了可以引入推荐规则,还可以以文件形式引入其它的自定义规则,然后在这些自定义规则的基础上用rules去定义个别规则,从而覆盖掉”extends”中引入的规则。例如:

  1. {
  2. "extends": [
  3. // 引入根目录的eslint
  4. "../.eslintrc"
  5. ],
  6. // 配置子目录规则
  7. "rules": {
  8. "prefer-arrow-callback": "off",
  9. "prefer-template":"off",
  10. "no-var":"off",
  11. "vars-on-top":"off",
  12. "func-names":"off",
  13. "object-shorthand":"off"
  14. }
  15. }

注释

直接在代码文件中以注释的方式定义

在js文件中,使用注释的方式定义eslint规则,优先级更高,如:

可以在你的文件中使用以下格式的块注释来临时禁止规则出现警告:

  1. /* eslint-disable */
  2. alert('foo');
  3. /* eslint-enable */

你也可以对指定的规则启用或禁用警告:

  1. /* eslint-disable no-alert, no-console */
  2. alert('foo');
  3. console.log('bar');
  4. /* eslint-enable no-alert, no-console */

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

  1. /* eslint-disable */
  2. alert('foo');

你也可以对整个文件启用或禁用警告:

  1. /* eslint-disable no-alert */
  2. // Disables no-alert for the rest of the file
  3. alert('foo');

可以在你的文件中使用以下格式的行注释或块注释在某一特定的行上禁用所有规则:

  1. alert('foo'); // eslint-disable-line
  2. // eslint-disable-next-line
  3. alert('foo');
  4. /* eslint-disable-next-line */
  5. alert('foo');
  6. alert('foo'); /* eslint-disable-line */

在某一特定的行上禁用某个指定的规则:

  1. alert('foo'); // eslint-disable-line no-alert
  2. // eslint-disable-next-line no-alert
  3. alert('foo');
  4. alert('foo'); /* eslint-disable-line no-alert */
  5. /* eslint-disable-next-line no-alert */
  6. alert('foo');

在某个特定的行上禁用多个规则:

  1. alert('foo'); // eslint-disable-line no-alert, quotes, semi
  2. // eslint-disable-next-line no-alert, quotes, semi
  3. alert('foo');
  4. alert('foo'); /* eslint-disable-line no-alert, quotes, semi */
  5. /* eslint-disable-next-line no-alert, quotes, semi */
  6. alert('foo');

上面的所有方法同样适用于插件规则。例如,禁止 eslint-plugin-example 的 rule-name 规则,把插件名(example)和规则名(rule-name)结合为 example/rule-name:

  1. foo(); // eslint-disable-line example/rule-name
  2. foo(); /* eslint-disable-line example/rule-name */

注意:为文件的某部分禁用警告的注释,告诉 ESLint 不要对禁用的代码报告规则的冲突。ESLint 仍解析整个文件,然而,禁用的代码仍需要是有效的 JavaScript 语法。

参考:
https://cn.eslint.org/docs/user-guide/configuring

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • ESLint的使用

    eslint使用注意事项

    发布:2019-01-03 阅读(474)

  • 'define' is not defined.'$' is not defined.

    eslint环境变量设置

    发布:2019-01-02 阅读(672)

  • eslint:no-case-declarations

    该规则禁止词法声明(`let`,`const`,`function`和`class`在)`case/ default`条款。原因是词法声明在整个开关块中是可见的,但只有在分配时才会被初始化,这只有在达到定义它的情况下才会发生。

    发布:2018-12-28 阅读(458)

  • eslint:no-restricted-globals

    如果您希望通过启用环境来允许一组全局变量,但仍希望禁止其中某些变量,则禁止使用特定的全局变量非常有用。 例如,早期的Internet Explorer版本将当前的DOM事件暴露为全局变量 event,但是长期以来,使用此变量一直被认为是一种不好的做法。限制此操作将确保在浏览器代码中不使用此变量。

    发布:2018-12-28 阅读(543)