This article is posted at blog.esonwong.com/eslint-conf…

Reproduced by The original author, Eson Wong

ESLint is an ECMAScript/JavaScript code checking tool that checks whether your code complies with the specification. Its goal is to ensure code consistency and avoid errors.

This article describes how ESLint is configured.

Scaffolding and editors

The esLint-Loader is typically introduced in the scaffolding of Web front-end development to help us check the specification of our code. There is also an ESLint plugin in the editor to check the specification of your code. Both ESLint functionality or plug-ins for code editors and ESLint-Loader follow the configuration described below.

How ESLint is configured

ESLint can be configured in three ways:

  1. Annotation configuration uses annotations to embed configuration information directly into a code source file.
  2. Project configuration files use JavaScript, JSON, or YAML files in the project root directory to specify configuration information for the entire project. A stand-alone can be configured.eslintrc.*File, or directly in thepackage.jsonIn the fileeslintConfigFields specify configurations that ESLint finds and automatically reads. If it’s in the same directory.eslintrc.* 和 package.json 的 eslintConfigCo-existence of fields.eslintrc.*If the priority is high, it will be used.
  3. User configuration if you are in your Home directory (usually is~ /) has a configuration file that ESLint uses only if no other configuration file can be found.

Priority: Comment Configuration > Project configuration file.eslintrc.* > eslintConfig field of project configuration file package.json > User Configuration

Alternatively, you can specify a configuration file in the eslint-Loader configuration of the code editor or scaffold. It will have a higher priority than the project configuration file and a lower priority than the annotation configuration.

The content of the configuration file

Here’s a look at some of the fields in the ESLint configuration file.

extends

The extends field specifies one or more base configurations from which the resulting configuration will be extended and overridden. It can be a string or an array. If it is an array, the final configuration expands and overrides the previous configuration.

ESLint has two basic configurations built in:

  • Eslint :recommended This configuration enables some core specifications that have checkmarks in the list of available rules for ESLint.
  • Eslint :all This configuration is enabledESLint has a list of rules availableAll of the core rules in

    Important: This configuration is not recommended for use in production, as it changes with the ESLint version. Use at your own risk.

If you use Prettier automatically format need to be installed in the editor eslint – plugin – Prettier, and extends to add the plugin: Prettier/it. To avoid formatting conflicts between Prettier and ESLint.

Json configuration example:

// .eslintrc.json
{
  "extends": ["eslint:recommended"."plugin:prettier/recommended"]}Copy the code

root

By default, ESLint will look for configuration files in all parent directories all the way to the root directory. This can be useful if you want all your projects to follow a specific convention, but can sometimes lead to unexpected results. To restrict ESLint to a specific project, set “root”: true in your package.json file or.eslintrc.* file at the root of your project. ESLint will stop looking for configurations in the parent directory once it finds “root”: true in the configuration file.

rules

The key name for each rule in the rules field can be found in the list of available rules for ESLint.

The value can be a string, a number of rule switch values, or an array of switch values and rule options.

The value of a regular switch can be one of the following:

  • off 或 0– Close rule
  • warn 或 1– Enable the rule. If the rule fails, a warning is displayed
  • error 或 2– Enable the rule. If the rule fails, an error is generated and the build is terminated

Json configuration example:

// .eslintrc.json
{
  "root": true."rules": {
    "eqeqeq": "off"."curly": "error"."quotes": ["error"."double"]}}Copy the code

Env and globals

Env defines one or more environments, each with a predefined set of global variables that ESLint checks. Additional environment variables required can be defined in the Globals field.

Json configuration example:

// .eslintrc.json
{
  "env": {
    "browser": true."node": true
  },
  "globals": {
    "$": "readonly"."token": "writable"}}Copy the code

This section describes other common configurations

  • Parser Specifies the parser. The default value is esprima.

    • babel-eslintA wrapper around the Babel parser to make it ESLint compatible.
    • @typescript-eslint/parserConvert TypeScript to estREE compatible form for use in ESLint.

  • Plugins ESLint plugins.

  • The Processor plug-in may provide a processor. Handlers can extract JavaScript code from other types of files and let ESLint process it, or handlers can transform JavaScript code in preprocessing for some purpose.

Filter files and directories

The.eslintignore file can be used to filter files and directories processed by ESLint. The usage is the same as.gitignore.

If there is no.eslintignore file, ESLint will look for the eslintignore key in the package.json file to check for files to ignore.

Reference documentation

  • ESLint document
  • ESLint has a list of rules available