ESLint 配置文件

你可以使用 . eslint.* 文件或 package.json 文件中的 eslintConfig 选项来配置 ESLint。你的 .eslint.* 文件可以是 .eslintrc.json.eslintrc.js.eslintrc.yml

配置文件优先级:.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json。详细内容可以查看如何在 Node.js 应用程序中使用 ESLint。

下面是一个简单的 .eslintrc.json 文件,它启用了 no-unused-vars ESLint 规则:

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "no-unused-vars": "error"
  }
}

你也可以将 ESLint 配置定义为一个导出文件的 JavaScript 对象。下面是等价的 .eslintrc.js 文件。

module.exports = {
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    no-unused-vars: 'error'
  }
}

如果你更喜欢 YAML,你也可以写一个 .eslintrc.yml 文件。

parserOptions:
  ecmaVersion: 2020
rules:
  no-unused-vars: error

给定上面的每一个 ESLint 配置文件,在下面的脚本 test.js 中运行 ESLint 将打印一个 'message' is assigned a value but never used 错误。

const message = 'Hello, World'

下面是 eslint 从上述 test.js 文件的命令行运行时的输出。

$ ./node_modules/.bin/eslint ./test.js 

/scratch/test.js
  1:7  error  'message' is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

$ echo $?
1

提示:echo $? 命令是在 Linux 中获取最后一个命令的退出代码的方式。退出代码 0 意味着命令成功,即使出现警告,eslint 也成功了。如果退出代码为 1,则表示执行失败。

规则

rules 是 ESLint 的基本构建块。每个 ESLint 配置都是一组规则,以及这些规则执行的严格程度(错误或警告)。甚至 JavaScript Standard Style 也是作为 ESLint 规则的集合。

规则配置可以是字符串(或用相应数字代替)或数组。如果规则配置为字符串,则必须为 'off''warn''error'

  • "off"0 — 告诉 ESLint 忽略给定的规则
  • "warn"1 — 告诉 ESLint 将违反给定的行为视为警告(不影响退出代码)
  • "error"2 — 告诉 ESLint 在违反给定规则时出错(触发时退出代码为 1)

例如,下面是一个 .eslintrc.json,它将 no-unused-vars 视为警告。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "no-unused-vars": "warn"
  }
}

如果规则配置是一个数组,数组的第一个元素是一个字符串或对应数字('off''warn''error'),第二个元素是配置单个规则的选项。例如,下面的 .eslintrc.json 告诉 ESLint,当任何一行代码的长度超过 66 个字符时,使用 max-len 规则 就会出错。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "max-len": ["error", { "code": 66 }]
  }
}

使用 extends

列出您想要使用的每一个 ESLint 规则通常是不可行的,所以 ESLint 提供了一个 extends 选项,允许您扩展现有的 ESLint 配置,并进行覆盖。

出于实际目的,如果你正在构建自己的 ESLint 配置,我们建议使用 ESLint 内置的
eslint:recommended配置作为起点。

{
  "extends": "eslint:recommended"
}

你可以在 ESLint 推荐的配置中找到一个完整的规则列表。你可以通过指定你自己的 rules 属性来覆盖 ESLint 推荐的配置中的单个规则。例如,下面的 ESLint 配置使用推荐的配置,除了禁用 no-undef 规则。

{
  "extends": "eslint:recommended",
  "rules": {
    "no-undef": "off"
  }
}

parser 选项

parserOptions 配置选项告诉 ESLint 你的目标是什么版本的 JavaScript 。例如,当您设置 parserOptions.ecmaVersion2017 时,下面的 JavaScript 是有效的:

(async function() {
  console.log('Hello, World!')
})()

但是,如果您更改 parser.ecmaVersion2016,ESLint 将会失败并出现以下错误,因为 ES2017 中引入了异步函数。

$ ./node_modules/.bin/eslint ./test.js 

/scratch/test.js
  1:8  error  Parsing error: Unexpected token function

✖ 1 problem (1 error, 0 warnings)

ESLint 还内置了对 JSX 的支持。例如,假设您有以下 test.js 文件:

const hello = () => 

Hello, World

通常,ESLint 会在上面的脚本中抛出一个错误 Parsing error: Unexpected token <。但是您可以通过将 parserOptions.ecmaFeatures.jsx 设置为 true 来启用 JSX,如下所示。

{ 
  "parserOptions": {
    "ecmaVersion": 2020,
    "ecmaFeatures": {
      "jsx": false
    }
  }
} 

环境

仅仅指定 ecmaVersion 并不总是足够的。不同的 JavaScript 运行时和框架具有不同的全局变量和语义。例如,下面的脚本在 Node.js 中运行良好,但在浏览器中却不行,因为浏览器没有全局变量 process

process.env.MESSAGE = 'Hello, World'

使用下面的 ESLint 配置,您将收到 'process' is not defined 错误。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "rules": {
    "no-undef": "error"
  }
}

但是一旦你告诉ESLint这个脚本将使用 "env": {"node": true} 在 node .js 中运行,ESLint 就不会在上面的脚本中出错。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "env": {
    "node": true
  },
  "rules": {
    "no-undef": "error"
  }
}

另一个常用的 envbrowser,它告诉 ESLint 这个脚本将在浏览器中运行。这使您的脚本可以访问仅限浏览器的全局变量,例如 window

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "env": {
    "browser": true
  },
  "rules": {
    "no-undef": "error"
  }
}

ESLint 档有一个支持环境的完整列表。

插件

ESLint 自带了各种各样的内置规则,但你也可以找到许多在 npm 上有额外规则的插件。许多 ESLint 插件为使用特定的库和框架提供了额外的规则。

例如,eslint-plugin-vue 提供了额外的特定于 Vue 规则。运行 npm i eslint-plugin-vue -D 后,你可以在 ESLint 配置中添加一个 plugins 列表,其中包括 'eslint-plugin-vue',或者简称为 'vue',因为 ESLint 足够聪明,可以为你添加 'eslint-plugin-' 前缀。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "plugins": ["vue"]
}

一旦你这样做了,你就可以访问特定于 Vue 的规则,比如 no-async-in-computed-properties.。下面的 ESLint 配置打开了 no-async-in-computed-properties 规则。

{
  "parserOptions": {
    "ecmaVersion": 2020
  },
  "plugins": ["eslint-plugin-vue"],
  "rules": {
    "vue/no-async-in-computed-properties": "error"
  }
}

如果你在下面的 test.js 文件中运行 ESLint,vue/no-async-in-compute -properties 规则将会出错,因为 badProperty 被设置为一个异步函数:

const Vue = require('vue')

module.exports = Vue.component('bad-component', {
  template: '

Hello

', computed: { badProperty: async function() { return 42 } } })
$ ./node_modules/.bin/eslint ./test.js 

/scratch/test.js
  6:18  error  Unexpected async function declaration in "badProperty" computed property  vue/no-async-in-computed-properties

✖ 1 problem (1 error, 0 warnings)

你可能感兴趣的:(ESLint 配置文件)