There are two ways to configure ESlint

  • Configuration comments: Configuring ESlint by embedding comments in js files;
  • Configuration file: Use a JS, JSON, or YAML file in the current working directory to specify configuration information. This file can be named.eslintrc.*, or in package.jsoneslintConfigProperty. You can also go throughCommand line to specify the configuration.

Configuration parser options

ESlint parses ES5 syntax by default. By configuring Parser Options, you can override this setting to parse other ES versions or JSX syntax. Support JSX syntax and support React syntax are two concepts. Eslint-plugin-react is recommended when developing with React. {“parserOptions”: {“ecmaVersion”: 6}} {“env”: {“env”: {“ecmaVersion”: 6}} {” ES6 “: true}}(automatically supports ES6 syntax).

ParserOptions The following configuration items are available:

  • EcmaVersion: configurable 3,5 (default), 6 (2015), 7 (2017), 8 (2018), 9 (2019), 10 (2019)

  • SourceType: can be configured as script or module

  • EcmaFeatures: Objects used to configure other features of some languages

    • globalReturn: Allowed or notreturnOccurs in the global scope
    • impliedStrict: Whether to enable strict mode globally
    • jsx: Whether JSX syntax is allowed

Configuring the Parser

ESlint uses Espree as the default parser, or you can specify other parsers that satisfy the following criteria:

  • It must be an NPM module that has been downloaded locally
  • An ESpriMA-compatible interface must be available
  • Esprima-compatible tokens and AST must be generated

Common options are: Esprima, babel-eslint, and @typescript-esLint /parser

Configuring the Development Environment

Env determines which global variables can be used in the current environment. The options are:

  • browser– Browser global object
  • node– node.js global variables and scoping
  • commonjs-CommonJS global variables and scoping
  • shared-node-browser-Node.js is a global variable that is common to the browser
  • es6– Allows you to use all new features in ES6 except modules
  • worker– Global variable for Web Workers
  • amd– the introduction ofamdIn the specificationdefine 和 require
  • mocha– Introduces all global variables in Mocha
  • jasmine-Jasmine v1.3 and V2.0 all global variables
  • jest-Jest global variable
  • phantomjs-Phantomjs global variable… (There are many more, please check the official documentation.)

These environments are not mutually exclusive, you can define more than one at a time, for example:

{
  "env": {
    "browser": true."node": true}}Copy the code

If you want to use an environment in a plug-in, make sure you place the plugins in the plugins array defined by the plug-in name, such as:

{
  "plugins": ["example"]
  "env": {
    "browser": true."node": true."example/custom": true}}Copy the code

Configuring global variables

ESlint will report an error if a global variable is used in a JS file that is not defined in the file. To remove this error, you can either configure global variables in comments inside the file or modify them through the configuration file.

  • Configure through comments:
/* global var1:writable, var2 */ global var1:writable, var2 */Copy the code
  • Through the configuration file:
{
  "globals": {
    "var1": "writable"."var2": "readonly"}} // You can also configure off to remove the use of one of the variables, such as in es6 environment drop Promise use {"globals": {
      "Promise": "off"}}Copy the code

Configuration rules

ESlint provides a number of rules that can also be modified by using comment configurations or configuration files. To modify a rule, you must change its ID to the following optional values:

  • “off” 或 0– Turn off this rule checking
  • “warn” 或 1– Enable this rule check and prompt (does not affect exit status)
  • “error” 或 2– Enable rule checking and report errors

Modify by configuration file:

/* eslint quotes: ["error"."double"], curly: 2 */ // Use the rule defined in the ESlint plugin /* eslint"plugin1/rule1": "error"* /Copy the code

Modify through the configuration file.

{
  "rules": {
    "eqeqeq": "off"."curly": "error"."quotes": ["error"."double"}} // Use rules in plugins {"plugins": [
    "plugin1"]."rules": {
    "eqeqeq": "off"."curly": "error"."quotes": ["error"."double"]."plugin1/rule1": "error"}}Copy the code

Mask rules with inline comments

If you want to temporarily block a rule from your code, you can add a comment to your code like this:

/* eslint-disable */ alert('foo'); /* eslint-disable */ / disable certain rules /* eslint-disable no-alert, no-console */ alert('foo');
console.log('bar'); /* eslint-disable no-alert, no-console *'foo'); // eslint-disable-line
/* eslint-disable-next-line */
alert('foo');
foo() // eslint-disable-line example/rule-name
Copy the code

Mask rules for a group of files

You can mask certain rules for a set of files by configuring the overrides attribute:

{
  "rules": {... },"overrides": [{"files": ["*-test.js"."*.spec.js"]."rules": {
        "no-unused-expressions": "off"}}}]Copy the code

In this series of articles, you will see the ESlint configuration documentation in the source document Configuring ESlint.