配置文件解析

狐七 前端工程化模块化开发

之前通过初始化生成一个.eslintrc.js的配置文件，这个配置文件写入的配置影响当前配置和子目录下的配置。

我们之前选用了standard配置，所以这里我们的配置文件继承自standard配置，可在node_modules/eslint-config-standard/eslintrc.json文件中找到

一般情况我们不会使用，但是要是手动或者开启关闭一些内容，还是很重要的。

// 因为是运行在node.js环境中，所以使用CommonJS的方式导出一个对象
// 初始有四个配置选项
module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12
  },
  rules: {
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# env

JS在不同环境中有不同的API可被调用，这些API通过全局成员方式提供。在浏览器中，可以使用window，document等对象，在nodejs中，不存在这些对象。env标记了环境，eslint可以根据信息判断哪些成员是可用的

module.exports = {
  /**
   * 但是我们这里将browser设置为false，在js中使用alert全局成员这里就会报错，
   * 
   * 注意：这里就算设置为false，在全局中使用document、navigator、window对象eslint也不会报错，是因为我们使用的standard标准，那个里面做了配置，我们可以在任何环境下使用window和document，我们可以在eslint-config-standard中看到他们在global里面的成员的document、navigator、window都设置为只读成员，而我们的配置又继承自standard的配置，所以这里没有办法影响document的使用
   */
  env: {
    browser: true,
    es2021: true
  }
}

1
2
3
4
5
6
7
8
9
10
11
12

# env对应的环境极其可使用的全局变量

下面的变量不是互斥的，可以同时设置为true使用。

env环境	可使用的全局变量
browser	浏览器环境中的全局变量
node	Node.js 全局变量和 Node.js 作用域
commonjs	CommonJS 全局变量和 CommonJS 作用域(用于 Browserify/MebPack 打包的只在浏览器中运行的代码)。
shared-node-browser	Node.js 和 Browser 通用全局变量。
es6	启用除了 modules 以外的所有 ECMAScript 6 特性(该选项会自动设置 ecmaVersion 解析器选项为 6）
worker	Web Workers 全局变量。
amd	将 require()和 define()定义为像 amd 一样的全同变量。
mocha	添加所有的 Mocha 测试全局变量。
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 & Nashorn 全局变量。
serviceworker	Service Worker 全局变量。
atomtest	Atom 测试全局变量。
embertest	Ember 测试全局变量。
webextensions	WebExtensions 全局变量。
greasemonkey	GreaseMonkey 全局变量

// 02-configuration.js

1
2

# extends

用来继承一些共享配置，standard是最常用的。如果在项目中想要继承一个共同的自定义配置，可以建一个配置文件，在这里引用。

/**
* 这个是数组，里面可以有多个值，可以同时继承多个共享配置。
*/
  extends: [
    'standard'
  ]

1
2
3
4
5
6

# parserOptions

这个是关于语法解析器的配置

parserOptions: {
    // ecmaVersion是ECMAScript的版本，如果设置为5那么就没有办法写ES6的新特性了
    // 版本配置影响的只是语法检测，不代表某个成员是否可用，如果是ES2015提供的全局成员，例如promise还是需要env中的ES6选项进行控制
    ecmaVersion: 12
  }

1
2
3
4
5

error Parsing error: sourceType 'module' is not supported when ecmaVersion < 2015. Consider adding { ecmaVersion: 2015 } to the parser options standard中将sourceType设置为module，要修改为script

error Parsing error: The keyword 'const' is reserved 当前环境不支持const，需要修改ecmaVersion

# rules

校验每个ESLint中规则的开启或者关闭

下面添加个属性：属性名是内置的规则名称，值可以是off（关闭）/warn（警告）/error（错误）

rules: {
    // 出现alert会报错
    "no-alert": "error"
  }

1
2
3
4

官网中有所有的可配置属性的列表，我们可以在使用的时候进行查看。一般standard开启了很多规则，基本也满足大多数需求。

# globals

这个在最新的配置中已经没有了，这里可以配置我们需要的全局成员

例如：如果要在项目中全局使用jQuery，如果单独用就会报错，那么在这里设置一下，代码中就可以直接使用了。

// 02-configuration.js
jQuery("#123")

// .eslintrc.js
globals: {
    "jQuery": "readonly"
  }

1
2
3
4
5
6
7

快速上手配置注释

狐七的个人博客

Choose mode