ESLint的入门

ESLint是一个遵循规则来提示代码错误的包,

我们可以配置文件:

1.如果在同一目录下存在多个配置文件,ESLint 将按照以下优先顺序以此使用其一:

  1. .eslintrc.js
  2. .eslintrc.cjs
  3. .eslintrc.yaml
  4. .eslintrc.yml
  5. .eslintrc.json
  6. package.json

请注意 ESLint 目前不支持 ESM 配置(module导出格式的)。

eslint的配置文件可以在linted文件(需要检查的文件)的旁边创建,检查文件会从linted文件的当前目录检查到项目根目录,并且合并他们的规则。

也就是说,在文件当前目录创建的配置文件会覆盖祖先目录的配置文件(rules有冲突的情况下)。

2.完整的配置层次,从高到低的优先级,如下所示:

你可以指定一个配置文件来检查你想检查的文件

eslint -c myconfig.json myfiletotest.js

文件名字可以不是.eslintrc.*,可以是任何名字,-c == --config,但是使用了这个命令父级目录的配置文件仍然会生效,如果你只想执行指定的配置文件 

eslint --no-eslintrc --config myconfig.json myfiletotest.js

 但是要记得加解析属性,不然无法解析。 

 parserOptions: {//这里指定了解析选项,
      ecmaVersion: 'latest'//ecmaVersion: 'latest' 表示使用最新版本的 ECMAScript(JavaScript)语法,以确保 ESLint 可以识别和分析最新的语言特性。
    },

  1. 内联配置(写在文件里的注释,具体问chatgpt):
    1. /*eslint-disable*/ 和 /*eslint-enable*/
    2. /*global*/
    3. /*eslint*/
    4. /*eslint-env*/
  2. 命令行选项(或 CLIEngine 等价物)(在命令行中添加规则或指定检查的配置文件):
    1. --global
    2. --rule
    3. --env
    4. -c--config
  3. 项目级配置:
    1. .eslintrc.* 或 package.json 文件与 linted 文件在同一目录下
    2. 继续搜索祖先目录中的 .eslintrc.* 和 package.json 文件,直到包括根目录,或者找到"root": true 的配置。

 3.扩展配置文件

extends属性

  • 基础配置:被扩展的配置。
  • 派生配置:扩展基础配置的配置。
  • 结果的实际配置:将派生配置合并到基础配置的结果。

extends 属性值可以是:

  • 一个指定配置的字符串。
  • 一个指定配置的字符串(要么是配置文件的路径,要么是可共享配置的名称,要么是 eslint:recommended,要么是 eslint:all)。
  • 一个字符串数组,每个额外的配置都会扩展前面的配置。

ESLint 递归地扩展配置,所以基本配置也可以使用 extends 属性。extends 属性中的相对路径和可共享的配置名称从它们出现的配置文件的位置解析。

可以省略配置名称中的 eslint-config- 前缀。如 airbnb 会被解析为 eslint-config-airbnb

使用插件配置

插件是一个可以为 ESLint 添加各种扩展功能的 npm 包。一个插件可以执行许多功能,包括但不限于添加新的规则和导出可共享的配置。请确保该包已经安装在 ESLint 能够需要它的目录中。

就是启用扩展一个有着eslint配置文件的npm包

1.plugins 属性值:需要引入的插件,名字通常为eslint-plugin- *

plugins 属性值可以省略包名中的 eslint-plugin- 前缀。

2.extends 属性值引入插件

extands就是扩展插件包里的配置文件如 recommended

extends 属性值由以下内容组成:

  • plugin:
  • 包名(可以省略其前缀,如 react 是 eslint-plugin-react 的缩写)
  • /
  • 配置名称(如 recommended
 "plugins": [
        "react"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],

使用现有配置文件

 "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        "./node_modules/coding-standard/.eslintrc-es6",
        "./node_modules/coding-standard/.eslintrc-jsx"
    ],

4.基于 glob 模式的配置

overrides属性可以更加细粒度的选择文件覆盖规则

"overrides": [
    {
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]

files指定要覆盖的文件,使用 minimatch 语法

excludedFiles:指定匹配时需要排除的文件,不想他们被检查。

多个覆盖块,后面的会覆盖前面的。quotes规则不会被应用

 overrides: [
    {
      "files": ["./src/test/tests.ts"],
      "rules": {
        "quotes": ["error", "single"]
      }
    },
    {
      "files": ["./src/test/tests.ts"],
      "rules": {
        "quotes": "off"
      }
    },
  ]

在子目录有配置文件的情况下,在父级目录的配置文件下写glob模式匹配子目录的文件想使用的规则可能不会有用,如果规则有冲突的话。因为子目录的配置文件优先级高于父目录的glob模式,

所以子目录文件使用glob,也要在最近的配置文件写glob,当父目录的glob和子目录的glob匹配同样的模式,会合并使用(很正常)。

相对的的glob模式

在配置文件写的glob的相对目录只会在当前配置文件的目录后面启用。不能在当前配置文件的父级目录来glob匹配。

--ext 指定目录下的指定扩展名的文件,glob模式不会启用

eslint --ext .js /path/to/your/directory

5.更改

~/.eslintrc.* 文件从 ~/node_modules/ 中加载可共享的配置和自定义解析器 - 类似于 require() - 在用户的主目录中。请注意,它不会加载全局安装的包。

~/.eslintrc.* 文件默认从 $CWD/node_modules 中加载插件,以便唯一地识别插件。如果你想用 ~/.eslintrc.* 文件使用插件,插件必须在每个项目的本地安装。另外,你可以使用 --resolve-plugins-relative-to CLI 选项来修改 ESLint 加载插件的位置。

6.指定处理器

插件可以提供处理器。处理器可以从其他类型的文件中提取 JavaScript 代码,然后让 ESLint 对 JavaScript 代码进行提示,或者处理器可以在预处理中转换 JavaScript 代码以达到某些目的。

到文档看配置插件那一个,写的很清楚。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值