Index

配置语言选项

JavaScript 生态系统有各种运行时、版本、扩展和框架。每一个都可能支持不同的语法和全局变量。ESLint 允许你配置特定于项目中使用的 JavaScript 的语言选项,例如自定义全局变量。你还可以使用插件来扩展 ESLint,以支持你项目的语言选项。

🌐 The JavaScript ecosystem has a variety of runtimes, versions, extensions, and frameworks. Each of these can have different supported syntax and global variables. ESLint lets you configure language options specific to the JavaScript used in your project, like custom global variables. You can also use plugins to extend ESLint to support your project’s language options.

指定 JavaScript 选项

🌐 Specify JavaScript Options

ESLint 允许你指定想要支持的 JavaScript 语言选项。默认情况下,ESLint 期望使用最新的第 4 阶段 ECMAScript 语法和 ECMAScript 模块(ESM)模式。你可以使用 languageOptions 键并指定一个或多个这些属性来覆盖这些设置:

🌐 ESLint allows you to specify the JavaScript language options you want to support. By default, ESLint expects the most recent stage 4 ECMAScript syntax and ECMAScript modules (ESM) mode. You can override these settings by using the languageOptions key and specifying one or more of these properties:

  • ecmaVersion(默认:"latest")- 指示被 lint 的代码的 ECMAScript 版本,确定语法和可用的全局变量。对于 ECMAScript 3 和 5,分别设置为 35。否则,你可以使用从 2015 到现在的任何年份。在大多数情况下,我们建议使用默认的 "latest",以确保你始终使用最新的 ECMAScript 版本。
  • sourceType(默认:"module")- 指示正在使用的 JavaScript 文件的模式。可能的值有:
    • module - ESM 模块(当 ecmaVersion35 时无效)。你的代码具有模块作用域,并在严格模式下运行。
    • commonjs - CommonJS 模块(如果你的代码使用 require() 会很有用)。你的代码具有顶层函数作用域,并在非严格模式下运行。
    • script - 非模块。你的代码具有共享的全局作用域,并以非严格模式运行。

这是一个示例 配置文件,当你对 ECMAScript 5 代码进行 lint 时可以使用:

🌐 Here’s an example configuration file you might use when linting ECMAScript 5 code:

// eslint.config.js
import { defineConfig } from "eslint/config";

export default defineConfig([
	{
		languageOptions: {
			ecmaVersion: 5,
			sourceType: "script",
		},
	},
]);

指定解析器选项

🌐 Specify Parser Options

如果你使用内置的 ESLint 解析器,你还可以通过指定 languageOptions.parserOptions 键来改变 ESLint 解释代码的方式。所有选项默认都是 false

🌐 If you are using the built-in ESLint parser, you can additionally change how ESLint interprets your code by specifying the languageOptions.parserOptions key. All options are false by default:

  • allowReserved - 允许将保留字用作标识符(如果 ecmaVersion3)。
  • ecmaFeatures - 一个对象,指示你要使用哪些附加语言功能:
    • globalReturn - 允许在全局作用域中使用 return 语句。此选项仅在 languageOptions.sourceType 设置为 "script" 时适用。当 languageOptions.sourceType 设置为 "commonjs" 时,无论此选项如何设置,都允许顶层 return 语句。当 languageOptions.sourceType 设置为 "module" 时,即使此选项设置为 true,也不允许顶层 return 语句。
    • impliedStrict - 启用全局严格模式(如果 ecmaVersion5 或更大)。
    • jsx - 启用 JSX

这是一个示例 配置文件,用于在默认解析器中启用 JSX 解析:

🌐 Here’s an example configuration file that enables JSX parsing in the default parser:

// eslint.config.js
import { defineConfig } from "eslint/config";

export default defineConfig([
	{
		languageOptions: {
			parserOptions: {
				ecmaFeatures: {
					jsx: true,
				},
			},
		},
	},
]);

指定全局变量

🌐 Specify Globals

ESLint 的一些核心规则依赖于对代码在运行时可用的全局变量的了解。由于这些变量在不同环境中可能有很大差异,并且在运行时可能被修改,ESLint 不会对执行环境中存在的全局变量做任何假设。如果你希望使用需要了解可用全局变量的规则,可以在配置文件中定义全局变量,或在源代码中使用配置注释来定义。

🌐 Some of ESLint’s core rules rely on knowledge of the global variables available to your code at runtime. Since these can vary greatly between different environments as well as be modified at runtime, ESLint makes no assumptions about what global variables exist in your execution environment. If you would like to use rules that require knowledge of what global variables are available, you can define global variables in your configuration file or by using configuration comments in your source code.

使用配置注释

🌐 Use configuration comments

要使用 JavaScript 文件中的注释指定全局变量,请使用以下格式:

🌐 To specify globals using a comment inside of your JavaScript file, use the following format:

/* global var1, var2 */

这定义了两个全局变量,var1var2。如果你想可选地指定这些全局变量可以被写入(而不仅仅是被读取),那么你可以为每个变量设置一个 "writable" 标志:

🌐 This defines two global variables, var1 and var2. If you want to optionally specify that these global variables can be written to (rather than only being read), then you can set each with a "writable" flag:

/* global var1:writable, var2:writable */

使用配置文件

🌐 Use configuration files

要在配置文件中配置全局变量,请将 languageOptions.globals 配置属性设置为包含每个你想使用的全局变量名称键的对象。对于每个全局变量键,将相应的值设置为 "writable" 以允许变量被覆盖,或设置为 "readonly" 以禁止覆盖。例如:

🌐 To configure global variables inside of a configuration file, set the languageOptions.globals configuration property to an object containing keys named for each of the global variables you want to use. For each global variable key, set the corresponding value equal to "writable" to allow the variable to be overwritten or "readonly" to disallow overwriting. For example:

// eslint.config.js
import { defineConfig } from "eslint/config";

export default defineConfig([
	{
		languageOptions: {
			globals: {
				var1: "writable",
				var2: "readonly",
			},
		},
	},
]);

此配置允许在代码中覆盖 var1,但不允许覆盖 var2

🌐 This configuration allows var1 to be overwritten in your code, but disallow it for var2.

可以通过将全局变量的值设置为 "off" 来禁用它们。例如,在大多数全局变量可用但 Promise 不可用的环境中,你可以使用以下配置:

🌐 Globals can be disabled by setting their value to "off". For example, in an environment where most globals are available but Promise is unavailable, you might use this config:

// eslint.config.js
import { defineConfig } from "eslint/config";

export default defineConfig([
	{
		languageOptions: {
			globals: {
				Promise: "off",
			},
		},
	},
]);

预定义的全局变量

🌐 Predefined global variables

除了基于配置的 languageOptions.ecmaVersion 自动启用的 ECMAScript 标准内置全局变量外,ESLint 并不提供预定义的全局变量集合。你可以使用 globals 包来额外启用特定环境的所有全局变量。例如,下面是如何将 console 以及其他浏览器全局变量添加到你的配置中的方式。

🌐 Apart from the ECMAScript standard built-in globals, which are automatically enabled based on the configured languageOptions.ecmaVersion, ESLint doesn’t provide predefined sets of global variables. You can use the globals package to additionally enable all globals for a specific environment. For example, here is how you can add console, amongst other browser globals, into your configuration.

// eslint.config.js
import globals from "globals";
import { defineConfig } from "eslint/config";

export default defineConfig([
	{
		languageOptions: {
			globals: {
				...globals.browser,
			},
		},
	},
]);

你可以以相同的方式包含多个不同的全局集合。下面的示例同时包含了针对网页浏览器和 Jest 的全局变量:

🌐 You can include multiple different collections of globals in the same way. The following example includes globals both for web browsers and for Jest:

// eslint.config.js
import globals from "globals";
import { defineConfig } from "eslint/config";

export default defineConfig([
	{
		languageOptions: {
			globals: {
				...globals.browser,
				...globals.jest,
			},
		},
	},
]);