热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ESLint配置文件介绍

您可以配置ESLint使用以下任一.eslint.*文件或eslintConfig你的选项package.json文件。您的.eslint.

您可以 配置 ESLint 使用以下任一 .eslint.* 文件或 eslintConfig 你的选项 package.json 文件。 您的 .eslint.* 文件可能是 .eslintrc.json.eslintrc.js 或者 .eslintrc.yml 文件。

下面是一个简单的 .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 配置文件,在下面的脚本上运行 ESLint test.js 将打印 message' is assigned a value but never used 错误。

const message = 'Hello, World';

Below is the output when you run eslint from the command line on the above test.js file.

$ ./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)
$

规则

rules选项是最重要的。 ESLint 规则 允许您配置 ESLint 将哪些模式视为错误或警告。 这 rulesoption 是从 ESLint 规则名称到规则配置的映射。 规则配置可以是字符串或数组。

如果规则配置是一个字符串,它必须是 'off', 'warn', 或者 'error'. 'off' 告诉 ESLint 忽略给定的规则。 'warn' 告诉 ESLint 将违反给定的行为视为警告。 和 'error' 告诉 ESLint 在违反给定规则时出错。 例如,下面是一个 .eslintrc.json对待 no-unused-vars 作为警告。

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

如果规则配置是一个数组,那么数组的第一个元素必须是一个字符串(或者 'off', 'warn', 或者 'error'),第二个元素是配置该单独规则的选项。 例如下面 .eslintrc.json 当任何代码行长度超过 66 个字符时,使用 max-len 规则 。

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

使用 extends

列出你想使用的每一条 ESLint 规则通常是不可行的,所以 ESLint 提供了一个 extends选项 允许您扩展现有 ESLint 配置并进行覆盖的,出于实际目的,我们建议使用 ESLint 的内置 eslint:recommended如果您正在构建自己的 ESLint 配置,则将配置作为起点。

{
"extends": "eslint:recommended"
}

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

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

解析器选项

parserOptions config 选项告诉 ESLint 你的目标是什么版本的 Javascript。 例如,以下 Javascript 在您设置时有效 parserOptions.ecmaVersion2017

(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 < 在上面的脚本上。 但是你可以通过设置启用 JSX parserOptions.ecmaFeatures.jsxtrue 如下所示。

{
"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 这个脚本将在 Node.js 中运行,使用 "env": { "node": true },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 install eslint-plugin-vue,你可以添加一个列表 plugins 添加到包含 eslint-plugin-vue 的 ESLint 配置中,或者简称为 vue,因为 ESLint 足够聪明,可以为您添加 eslint-plugin- 前缀。

{
"parserOptions": {
"ecmaVersion": 2020
},
"plugins": ["eslint-plugin-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"
}
}

如果你在下面运行 ESLint test.js 文件 vue/no-async-in-computed-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
&#x2716; 1 problem (1 error, 0 warnings)
$

推荐阅读
  • 前端微服务二
    为了解决庞大的一整块后端服务带来的变更与扩展方面的限制,出现了微服务架构(Microservices):微服务是面向服务架构(SOA)的一种变体,把应用程序设计成一系列松耦合的细粒 ... [详细]
  • 开发网站你需要知晓的部分专用术语
      越来越多的企业和个人都在拥有属于自己的网站门户,首当其冲的就是你得知晓几个网站方面的专业术语,先是中就有好多的客户不明白这些,造成误会是正常的,那不如我们对它有个大致的了解,这样就不容易感觉 ... [详细]
  • SSL协议、TLS协议,使用哪一种更安全?
    在金融银行业,保护机密信息的安全至关重要。由于财务记录完全通过在线数据库维护,因此实施保护客户、银行和金融机构免受黑客攻击的安全功能比以往任何时候都更加重要。安全套接字层(SSL) ... [详细]
  • FroggerTimeLimit:1000MSMemoryLimit:65536KTotalSubmissions:32257Accepted:10396DescriptionFr ... [详细]
  • 九宫格计算. ... [详细]
  • 3295:[Cqoi2011]动态逆序对Description对于序列A,它的逆序对数定义为满足iAj的数对(i,j)的个数。给1到n的一个排列,按照某种顺序依次删除 ... [详细]
  • XShell连接不了虚拟机
    本机安装好虚拟机和centeros;使用xshell连接:linuxCouldnotconnectto&amp;#39;127.0.0.1&amp;#39;(por ... [详细]
  • 2019.4.14第1001题:SumProblemProblemDescriptionHey,welcometoHDOJ(HangzhouDianziUniversityOnli ... [详细]
  • MyBatis模糊查询和多条件查询一、ISmbmsUserDao层根据姓名模糊查询publicListgetUser();多条件查询publicList ... [详细]
  • 看下面的代码:window.onload=someFunction;很多时候我看到使用这种代码,甚至我使用相同的代码.但是, ... [详细]
  • 系统osx10.11用的是brew下的php56brew下的nginx下了一个项目,在安装过程中提示缺少,intl和apc扩展,就用下面的语句下载了,也装上了,但php还是没有加载 ... [详细]
  • 编程语言是从哪蹦出来的——大型伦理寻根现场
    Hello,我是Alex007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫Alex的人太多了,再加上每天007的生活,Alex007就诞生了。聊一聊编程到底是啥,怎 ... [详细]
  • java怎么实现非下降数组
    今天小编给大家分享一下java怎么实现非下降数组的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给 ... [详细]
  • 局限性_Scrum框架的局限性
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了Scrum框架的局限性相关的知识,希望对你有一定的参考价值。在很多工作坊的讨论中, ... [详细]
  • 开发笔记:sql盲注之报错注入(附自动化脚本)
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了sql盲注之报错注入(附自动化脚本)相关的知识,希望对你有一定的参考价值。 ... [详细]
author-avatar
许晓慧
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有