likes
comments
collection
share

时隔三月,这次手摸手带你学习ESLint

作者站长头像
站长
· 阅读数 2

概念及入门

ESLint 是一个可扩展的 JavaScript 代码检查工具,旨在帮助开发者编写更规范、更符合最佳实践的代码。它最初由 Airbnb 开发,目前由社区维护。ESLint 可以检查代码中的错误、最佳实践、代码风格和逻辑错误等问题,从而提高代码质量、一致性和可读性。

ESLint 支持多种编程语言,包括 JavaScript、TypeScript、CSS 和 HTML 等。它可以通过配置文件来定制规则, 以适应不同的项目需求。

ESLint的主要目的是?

  1. 强制执行最佳实践:ESLint提供了一系列规则,用于强制执行最佳实践,例如变量命名、函数命名、代码格式等。这有助于确保代码的可读性和一致性。
  2. 防止潜在的错误:ESLint可以检测到代码中潜在的错误,例如未定义的变量、未使用的变量、语法错误等。这有助于在开发过程中发现和修复问题。
  3. 帮助团队保持一致:ESLint可以帮助团队保持一致的代码风格和最佳实践,从而提高代码的可维护性。
  4. 改善代码质量:ESLint可以帮助开发人员改善代码质量,从而提高代码的性能和可读性。

为什么要学习ESLint?

个人项目开发中,可能不会太看重ESLint,就想着自己开发随便怎么写都行,只要自己能看懂就好😀,但是对于企业来说,学习ESLint可以提高整个团队的代码质量,规范代码风格,降低手动检查的工作量,减少开发时间和错误率,进而提高开发效率,提高团队的协作效率,是一个团队执行规范的约束。此外,使用ESLint可以确保代码的一致性和质量,有助于企业打造高质量的产品; 不过对于个人来说,学习 ESLint 可以提高自己的代码质量,规范代码风格,提高开发效率,这会给自己带来潜移默化的影响,以致于在今后代码编写中得心应手;同时在面试和求职过程中,也可以展示自己对于代码质量和规范性的注重,是成为一个高手不可避免地过程🤔。

准备工作

  1. 了解JavaScript基础知识:ESLint是基于JavaScript的代码检查工具,因此,如果您不熟悉JavaScript的基本语法和概念,那么学习ESLint可能需要花费更多的时间和精力。
  2. 安装Node.js和npm:ESLint需要Node.js(^12.22.0^14.17.0 或 >=16.0.0,并支持 SSL)和npm才能运行。确保您已经安装了Node.js和npm(你想使用yarn或者是pnpm等包管理工具都可以),并且它们在系统路径中。(如果你使用的是官方 Node.js 发行版,则始终内置 SSL。)

集成和配置

安装ESLint以及创建配置文件

npm i -D eslint
npx eslint --init

这种是两件事情分开做,或者直接使用一个命令安装并创建配置

npm init @eslint/config

这里是使用npx eslint --init创建的配置文件,并且是将ESLint集成到vue+ts项目中:

Need to install the following packages:
@eslint/create-config@0.4.6
Ok to proceed? (y) y
# 你使用eslint干什么:检查语法、发现问题并强制执行代码样式
√ How would you like to use ESLint? · problems 
# 项目使用什么类型的模块
√ What type of modules does your project use? · esm
# 项目使用哪个框架,这里以vue为例
√ Which framework does your project use? · vue 
# 项目中使用ts吗
√ Does your project use TypeScript? · No / Yes 
# 跑在什么环境
√ Where does your code run? · browser 
# 你希望配置文件的格式是什么
√ What format do you want your config file to be in? · JavaScript 
# 你还需要安装下面几个包,这里因为上面选择了vue和ts,所以需要检测vue、ts语法的插件,以及ts语法解析器
The config that you've selected requires the following dependencies: 

@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
# 现在安装他们吗
√ Would you like to install them now? · No / Yes 
# 使用什么包管理工具安装
√ Which package manager do you want to use? · pnpm 
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-vue@latest, @typescript-eslint/parser@latest

devDependencies:
+ @typescript-eslint/eslint-plugin 6.10.0
+ @typescript-eslint/parser 6.10.0
+ eslint-plugin-vue 9.18.1

Done in 8.9s

配置文件的格式

ESLint 支持多种格式的配置文件:

  • JavaScript - 使用 .eslintrc.js 并导出包含你的配置的对象。
  • JavaScript (ESM)  - 在 package.json 中指定 "type":"module" 的 JavaScript 包中运行 ESLint 时使用 .eslintrc.cjs。 请注意,ESLint 目前不支持 ESM 配置。
  • YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 来定义配置结构。
  • JSON - 使用 .eslintrc.json 定义配置结构。 ESLint 的 JSON 文件也允许 JavaScript 样式的注释。
  • package.json - 在你的 package.json 文件中创建一个 eslintConfig 属性并在那里定义你的配置。

如果同一个目录下有多个配置文件,ESLint 只使用一个。 优先顺序如下:

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

js格式的配置文件

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
  ],
  overrides: [
    {
      env: {
        node: true,
      },
      files: [".eslintrc.{js,cjs}"],
      parserOptions: {
        sourceType: "script",
      },
    },
  ],
  parserOptions: {
    ecmaVersion: "latest",
    parser: "@typescript-eslint/parser",
    sourceType: "module",
  },
  plugins: ["@typescript-eslint", "vue"],
  rules: {},
};

配置文件解析

root

root 配置选项用于指定项目的根目录。当 ESLint 在项目中查找配置文件时,它会从根目录开始查找。

// 指定项目的根目录
root: true,

root 配置选项不会影响 ESLint 对代码的检查,它只影响 ESLint 查找配置文件的方式。因此,如果你在项目中使用了多个配置文件,即使没有设置 root 配置选项,ESLint 也会自动使用它们。

env

env 为配置语言选项,用于指定 ESLint 应该在哪个环境中运行,这些环境提供预定义的全局变量。这会影响到 ESLint 能够检查的规则和选项。以下列举一些环境选项:

  • node:在 Node.js 环境中运行 ESLint。这使得 ESLint 能够检查 Node.js 特定的语法和行为,例如 module.exportsrequire

  • browser:在浏览器环境中运行 ESLint。这使得 ESLint 能够检查浏览器特定的语法和行为,例如 documentwindow

  • es2017:在 ES2017 环境中运行 ESLint。这使得 ESLint 能够检查 ES2017 语法和行为,例如 async/await 语法。

  • es2020:在 ES2020 环境中运行 ESLint。这使得 ESLint 能够检查 ES2020 语法和行为,例如 globalThis

  • es2022:在 ES2022 环境中运行 ESLint。这使得 ESLint 能够检查 ES2022 语法和行为,例如 top-level-await语法。

官方文档还介绍了很多可用环境,es2015-es2024,以及amd、jquery、mongo

extends

extends 用于指定 ESLint 应该继承哪些规则配置。这可以用于创建自定义规则集,或者扩展现有的规则集。

比如说:

  • eslint:recommended:开ESLint启推荐规则,默认是关闭的,如函数不能重名、对象不能重复key

  • plugin:@typescript-eslint/recommended:ts语法规则

  • plugin:vue/vue3-recommended:vue语法规则

  • plugin:react/recommended:react语法规则

vue语法规则还可以写plugin:vue/vue3-essential

plugin:vue/vue3-essentialplugin:vue/vue3-recommended都是是ESLint插件,用于检查Vue 3项目中的错误和问题。这两个插件的区别在于它们包含的规则集不同。

这两个插件都包含了一组基本规则,用于检查Vue 3项目的代码质量。这些规则包括:

  • 最佳实践:例如,使用<script setup><script><template>标签的顺序、使用defineExposeref等Vue 3 API等。
  • 代码风格:例如,使用单引号还是双引号、缩进的空格数等。
  • 安全性和性能:例如,防止XSS和CSRF攻击、优化性能等。

plugin:vue/vue3-recommended插件还包含了plugin:vue/vue3-essential插件中包含的所有规则。因此,plugin:vue/vue3-recommended插件包含了一组更详细的规则,用于检查Vue 3项目的代码质量。

parserparserOptions

概念

parserparserOptions是ESLint中的两个配置选项,它们都用于指定解析器,但它们的作用不同。

  • parser选项用于指定解析器的基本名称,如babelesprimatypescript等。它通常用于全局配置,适用于所有规则。例如,如果配置了parser选项,则所有规则都将使用指定的解析器进行解析。

  • parserOptions选项则用于为特定解析器提供额外的配置选项。它主要用于针对特定解析器进行定制化配置,如注释、分隔符、关键字等。例如,如果需要为esprima解析器指定行结束符、开始标记、结束标记等选项,则需要在parserOptions中进行配置。

在配置parserOptions时,需要确保指定的解析器与parser选项中指定的解析器一致,否则ESLint将无法正确解析代码。

总的来说,parser选项主要用于全局配置,而parserOptions选项则用于为特定解析器提供定制化配置。

取值
  1. parser选项:

默认情况下,ESLint 使用 Espree 作为其解析器。以下解析器与 ESLint 兼容:

  • babel-eslint:使用Babel解析器进行解析,支持ES6+语法。取值可以是babel-eslint@babel/eslint
  • esprima:使用ESprima解析器进行解析,支持ECMAScript 5.0+语法。取值可以是esprima@typescript-eslint/esprima
  • typescript:使用TypeScript解析器进行解析,支持TypeScript语法。取值可以是typescript@typescript-eslint/parser

Vue3官方文档推荐Vue3项目中使用vue-eslint-parser解析器,需要用这个解析器来解析.vue文件,所以如果你覆盖了解析器选项,这个插件将无法工作。vue-eslint-parser 是 Vue.js 团队为 Vue 3 开发的一个 ESLint 解析器,它支持 Vue 3 的语法和特性。它基于 ESLint 的 vue/parser,并添加了 Vue 3 的特定规则和插件。(先安装该插件)

在配置这个选项时,你可以试试别的解析器,看看.vue文件中语法会有些什么报错🤔

  1. parserOptions选项:

esprima解析器为例,parserOptions可以包含以下选项:

  • sourceType:指定源代码类型,如script(默认值)、modulecommonjsjson等。
  • ecmaVersion:指定ECMAScript版本,如5(默认值)、678等。
  • syntax:指定语法,如ecmaScript(默认值)、ecmaScriptStrictjavascripttypescript等。
  • jsx:指定JSX语法,如true(默认值)、falsexml等。
  • plugins:指定解析器插件,如jsxtypescriptflow等。
  • parser:指定自定义解析器,如@typescript-eslint/parser

plugins

ESLint还可以安装一些第三方插件来使用,在paugins选项中引入,在引入之前你需要使用包管理器安装这些插件哦!插件名称可以省略 eslint-plugin- 前缀

我们在生成配置文件的时候安装了下面这两个插件,所以取值可以是:

plugins: ["@typescript-eslint", "vue"],

rules

rules选项用于配置要使用的规则集。规则集是一组规则,用于检查代码中的错误和问题。ESLint提供了丰富的规则集,可以通过配置文件来选择和启用特定的规则集。ESLint 自带大量的内置规则,你可以通过插件添加更多的规则。 你可以使用配置注释或配置文件修改你的项目使用的规则。

rules选项的格式如下:

{
 "rules": {
   "rule-name": "rule-options"
 }
}

其中,rule-name表示要使用的规则名称,rule-options表示该规则的配置选项。

要更改规则的严重性,请将规则 ID 设置为以下值之一:

  • "off"0 - 关闭规则
  • "warn"1 - 打开规则作为警告(不影响退出代码)
  • "error"2 - 打开规则作为错误(触发时退出代码为 1)

以下是一些内置规则:

//要求使用 `===` 和 `!==`
eqeqeq: "warn",
    
//禁用console语句限制代码中使用`console.log()`、`console.warn()`等方法
"no-console": "error",
    
//禁用debugger语句
"no-debugger": "error",
    
//检查未使用的变量和参数
"no-unused-vars": ["error", { argsIgnorePattern: "^_" }] //argsIgnorePattern:指定参数的忽略模式,例如^_表示忽略以_开头的参数。

//不允许在全局作用域内声明
"no-implicit-globals": "error",
    
//禁用`alert()`、`confirm()`和`prompt()`等弹出框。
"no-alert": "error",
    
//检查未使用的函数返回值。
"no-unused-returns": "error",
    
//检查未使用的`try`和`catch`语句。
"no-throw-catch": "error",

ESLint内置规则参考:规则参考 - ESLint 中文网 (nodejs.cn)

上面说的几个都是ESLint的内置规则,那我们将ESLint集成到Vue项目,React项目中时,还可以配置一些针对相应框架的语法的规则。

在配置之前你要先安装对应的插件哦,Vue是eslint-plugin-vue插件,用于检查Vue代码中的错误和问题;React中安装eslint-plugin-reacteslint-plugin-react-hooks,用于检查ReactReact-Hooks的语法,什么项目就安装什么插件,然后先配置一下extendsplugins选项。

"extends": ["plugin:react-hooks/recommended", "plugin:react/recommended", "plugin:vue/vue3-recommended"]
"plugins": ["react", "react-hooks", "vue"]

下面是针对Vue语法的一些规则:

// 要求组件名总是多字的
"vue/multi-word-component-names": "off", 

//禁止修改props
"vue/no-mutating-props": "error", 

//对模板中的自定义组件强制属性命名样式, my-prop="prop"而不是myProp="prop"
"vue/attribute-hyphenation": "warn" 

//禁止在与v-for相同的元素上使用v-if
"vue/no-use-v-if-with-v-for": "error"

更多关于vue的规则在这里查询:Available rules | eslint-plugin-vue (vuejs.org)

React规则参考:GitHub - jsx-eslint/eslint-plugin-react: React-specific linting rules for ESLint

React-Hooks规则:文档打不开了😅

这里说几个Typescript的规则,不管是Vue3项目还是React项目都可能会用到Typescript

//禁止使用any
"@typescript-eslint/no-explicit-any": "off", 
    
//强制使用@ts-expect-error而不是@ts-ignore
"@typescript-eslint/prefer-ts-expect-error": "off",
    
//禁止对this进行混叠
"@typescript-eslint/no-this-alias": [
  "error",
  {
    allowedNames: ["_this"] // this可用的局部变量名称
  }
],
    
//禁止使用@ts-<directive>注释或在指令后要求描述
"@typescript-eslint/ban-ts-comment": "off", 
    
//使用!来禁止非空断言后缀运算符
"@typescript-eslint/no-non-null-assertion": "off", 
    
//禁止使用未使用的变量
"@typescript-eslint/no-unused-vars": "error", 
    
//禁止某些类型
"@typescript-eslint/ban-types": "off",

ts的规则参考:Overview | typescript-eslint

overrides

overrides 用于指定哪些规则(rules)应该在特定的文件或目录中被覆盖,可以让我们针对特定的代码类型或文件扩展名配置不同的规则。这可以用于创建自定义规则集,或者修改现有规则以适应特定项目的需求。

  overrides: {
    "**/test/**.js": {
      rules: {
        "no-console": "warn",
        "no-unused-vars": "error"
      }
    },
    "*.jsx": {
      parser: "babel-eslint",
      parserOptions: {
        ecmaVersion: 2020,
        sourceType: "module"
      },
      plugins: ["react", "react-hooks"]
    },
    "*.tsx": {
      parser: "typescript-eslint",
      parserOptions: {
        ecmaVersion: 2020,
        sourceType: "module",
        jsx: true
      },
      plugins: ["react", "react-hooks", "@typescript-eslint/jsx"]
    },
  },

在这个例子中,我们为test文件夹下的js文件设置了指定的一些规则;为.jsx文件和.tsx文件指定了不同的解析器、解析器选项和插件。.jsx文件使用babel-eslint解析器,tsx文件使用typescript-eslint解析器。同时,我们还为.jsx.tsx文件指定了reactreact-hooks插件(在vue中你可以设置对应的vue插件)

需要注意的是,overrides选项只适用于指定的文件扩展名或正则表达式,不适用于全局配置。此外,如果overrides选项与全局配置中的规则冲突,则将以overrides选项中的规则为准(覆盖全局)。

不能在 overrides 属性下写入 ignorePatterns 属性。

该选项可以是对象格式也可以是数组

  //数组
  overrides: [
    {
      files: ["**/*.md/*.js"],
      rules: {
        strict: "off"
      }
    }
  ],

globals

globals选项用于配置全局变量,是一个对象,其中键是全局变量的名称,值是布尔值(旧值),表示该变量是否被视为全局变量。

例如,在React组件中,可以使用Reactthis等全局变量,但是如果不使用globals选项,这些变量将被视为未定义的变量,使用的话会导致错误,要么在globals选项中配置全局变量,要么就在rules规则中配置no-undef这个规则。

需要注意的是,globals选项只能用于配置全局变量的类型,不能用于限制全局变量的使用。此外,globals选项不会影响no-unused-vars规则,因此如果全局变量未被使用,仍然会收到no-unused-vars规则的警告。

 globals: {
   module: readonly,
   window: readonly,
   document: readonly
 }

由于历史原因,布尔值 false 和字符串值 "readable" 等价于 "readonly"。类似地,布尔值 true 和字符串值 "writeable" 等价于 "writable"。但是,不建议使用旧值。

注意:启用no-global-assign规则来禁止对只读的全局变量进行修改。

这里相关的三个规则:

  • no-undef
  • no-unused-vars
  • no-global-assign

settings

settings 选项主要用于配置一些共享设置。共享设置是指在不同的配置文件中都可以使用的全局选项。使得我们在不同的配置文件中使用相同的全局选项,从而保持代码风格的一致性。

settings: {
  // 指定要使用的环境配置
  env: {
    node: true
  },

  // 指定要使用的共享规则
  rules: {
    "no-console": "warn"
  }
},

这里提到的不同的配置文件指的是在同一个项目中可以具有多个 .eslintrc.js 配置文件。每个配置文件可以覆盖前一个配置文件中的设置,从而实现不同部分的代码风格设置。

在 ESLint 中,你可以为不同的目录或文件指定不同的配置文件。例如,你可以为 src 目录指定一个配置文件,为 tests 目录指定另一个配置文件。这样,src 目录的代码风格设置将与 tests 目录的代码风格设置不同。

同一个项目中拥有好几个eslintrc.js会用哪一个?

  • 在同一个项目中拥有多个 .eslintrc.js 文件时,ESLint 会按照顺序使用它们中的配置。当 ESLint 找到一个配置文件时,它会使用该文件中的规则和插件配置来检查项目中的代码。

  • 如果一个配置文件中没有指定解析器、插件或规则,那么 ESLint 会将它们 inherited from the parent configuration。在这种情况下,ESLint 会将父配置文件中的规则和插件配置传递给子配置文件,以便子配置文件可以继承父配置文件的设置

下面是一个示例,说明如何在同一个项目中使用多个 .eslintrc.js 文件:

  1. 在项目根目录下创建一个 .eslintrc.js 文件,用于配置全局规则和插件:
module.exports = {
 // 指定要使用的解析器
 parser: "babel-eslint",

 // 配置全局规则
 rules: {
   "react/jsx-uses-react": "error"
 }
};
  1. src 目录下创建一个 .eslintrc.js 文件,用于配置 src 目录的代码风格设置:
module.exports = {
 // 指定要使用的解析器
 parser: "babel-eslint",

 // 配置全局规则
 rules: {
   "react/jsx-uses-react": "warn"
 }
};

在这个例子中,我们为 src 目录指定了一个 .eslintrc.js 文件,该文件继承了项目根目录中的全局规则和插件配置,并自定义了 react/jsx-uses-react 规则的warn警告级别。

当 ESLint 检查项目中的代码时,它会按照顺序使用这些配置文件中的规则和插件配置。如果 ESLint 找不到一个配置文件,它会使用默认配置。

什么情况一个项目中会有多个配置文件?

一般而言,一个项目中可以有多个 .eslintrc.js 配置文件,具体取决于项目的复杂性和代码结构。

  • 简单的项目:只有一个根目录,只有根目录下有一个 package.json 文件和一个 .eslintrc.js 配置文件,就足够了。
  • 复杂项目:项目分为多个目录,每个目录都有一个 package.json 文件和一个 .eslintrc.js 配置文件,以配置不同风格的代码方式。使用多个配置文件可以提高代码风格的灵活性和可维护性。

可以根据项目的实际结构和需求来选择合适的配置文件数量。

ignorePatterns

ignorePatterns用于指定要忽略的文件路径模式。通过设置 ignorePatterns,告诉 ESLint 不要检查与指定模式匹配的文件。

// 指定要忽略的文件路径模式
ignorePatterns: ["node_modules/**"]

除了此配置还可以创建一个忽略文件来实现该功能

配置文件示例

module.exports = {
  root: true,
  //特定环境的全局变量
  env: {
    browser: true,
    es6: true,
    node: true
  },
  extends: [
    //规则默认是关闭的,这个配置是开启推荐规则(recommended)(函数不能重名、对象不能重复key)
    "eslint:recommended",
    //ts语法规则
    "plugin:@typescript-eslint/recommended",
    //vue语法规则
    //plugin:vue/vue3-recommended插件还包含了plugin:vue/vue3-essential插件中包含的所有规则。因此,plugin:vue/vue3-recommended插件包含了一组更详细的规则,用于检查Vue 3项目的代码质量。
    "plugin:vue/vue3-recommended"
  ],
  //为特定的文件或目录指定处理器,可以让我们针对特定的代码类型或文件扩展名配置不同的规则
  //   overrides: {
  //     "*.js": {
  //       rules: {
  //         "no-console": "warn",
  //         "no-unused-vars": "error"
  //       }
  //     },
  //     "*.jsx": {
  //       parser: "babel-eslint",
  //       parserOptions: {
  //         ecmaVersion: 2020,
  //         sourceType: "module"
  //       },
  //       plugins: ["react", "react-hooks"]
  //     },
  //     "*.tsx": {
  //       parser: "typescript-eslint",
  //       parserOptions: {
  //         ecmaVersion: 2020,
  //         sourceType: "module",
  //         jsx: true
  //       },
  //       plugins: ["react", "react-hooks", "@typescript-eslint/jsx"]
  //     },
  //     "**/test/**.js": {
  //       rules: {
  //         "no-unused-vars": "off"
  //       }
  //     }
  //   },
  overrides: [
    {
      files: ["**/*.md/*.js"],
      rules: {
        strict: "off"
      }
    }
  ],

  //用于指定解析器的基本名称,它通常用于全局配置,适用于所有规则。
  parser: "vue-eslint-parser",
  // 用于为特定解析器提供额外的配置选项,配置parserOptions时,需要确保指定的解析器与parser选项中指定的解析器一致,否则ESLint将无法正确解析代码
  parserOptions: {
    //指定ECMAScript版本,如5(默认值)、6、7、8等。
    ecmaVersion: "latest",
    //指定解析器:esprima默认解析器 babel-eslint babel解析器 @typescript-eslint/parser ts解析器
    parser: "@typescript-eslint/parser",
    //指定源代码类型 script 默认 ,module 代码在ECMAScript模块中 ,commonjs、json等
    sourceType: "module",
    // 指定语法,如ecmaScript(默认值)、ecmaScriptStrict、javascript、typescript等。
    syntax: "typescript"
  },

  //引入安装的ESLint的第三方插件。插件名称可以省略 eslint-plugin- 前缀(我们在生成配置文件的时候安装了这两个插件)
  plugins: ["@typescript-eslint", "vue"],
  //指定要使用的规则集
  rules: {
    // "off" 或 0 - 关闭规则
    // "warn" 或 1 - 打开规则作为警告(不影响退出代码)
    // "error" 或 2 - 打开规则作为错误(触发时退出代码为 1)

    //要求使用 `===` 和 `!==`
    eqeqeq: "warn",
    "no-unused-vars": "off",
    //禁用console语句
    "no-console": [
      "off"
      // {
      //   allow: ["warn", "error"]
      // }
    ],
    // 禁止使用未声明的变量,除非在 /*global */ 注释中提及
    "no-undef": "off",
    // 禁止使用 undefined 作为标识符
    "no-undefined": "error",
    //禁用debugger语句
    "no-debugger": "warn",
    //禁止不必要的转义字符
    "no-useless-escape": "error",
    //检查未使用的变量和参数
    // "no-unused-vars": ["error",{ argsIgnorePattern: "^_" }]//argsIgnorePattern:指定参数的忽略模式,例如^_表示忽略以_开头的参数。

    "@typescript-eslint/no-explicit-any": "off", //禁止使用any
    "@typescript-eslint/prefer-ts-expect-error": "off", //强制使用@ts-expect-error而不是@ts-ignore
    "@typescript-eslint/no-this-alias": [
      "error",
      {
        allowedNames: ["_this"] // this可用的局部变量名称
      }
    ],
    "@typescript-eslint/ban-ts-comment": "off", //禁止使用@ts-<directive>注释或在指令后要求描述
    "@typescript-eslint/no-non-null-assertion": "off", //使用!来禁止非空断言后缀运算符
    "@typescript-eslint/no-unused-vars": "off", //禁止使用未使用的变量
    "@typescript-eslint/ban-types": "off",

    "vue/multi-word-component-names": "off", // 要求组件名总是多字的
    "vue/no-mutating-props": "error", //禁止修改props
    "vue/attribute-hyphenation": "off", //对模板中的自定义组件强制属性命名样式, my-prop="prop"而不是myProp="prop"
    "vue/no-use-v-if-with-v-for": "error", //禁止在与v-for相同的元素上使用v-if
    "vue/single-component-per-file": "off"
  },
  globals: {
    // module: "readonly"
  },
  settings: {
    // 指定要使用的环境配置
    // env: {
    //   node: true
    // },
    // 指定要使用的共享规则
    // rules: {
    //   "no-console": "warn"
    // }
  },
  ignorePatterns: []
}

忽略文件

你可以通过指定一个或多个通配符模式将 ESLint 配置为在 linting 时忽略某些文件和目录。 你可以通过以下方式忽略文件:

  • ignorePatterns 添加到配置文件。
  • 创建一个包含忽略模式的专用文件(默认为 .eslintignore)。

.eslintignore 中定义的模式优先于配置文件的 ignorePatterns 属性。

.eslintignore 文件是一个纯文本文件,其中每一行都是一个通配符模式

忽略文件示例

/build/
/config/
/dist/
/node_modules/*
/dist*

命令行接口

ESLint 命令行接口 (CLI) 允许你从终端执行 linting,用于控制ESLint的行为、配置和输出。 CLI 有多种选项,你可以传递这些选项来配置 ESLint。

运行CLI,前提是安装了node.js。

如果你全局安装了ESLint,那么你可以直接在终端使用eslint命令

eslint [options] [file|dir|glob]*

但是我们大部分会在项目中集成ESLint,所以我们可以使用局部安装的eslint,前面加上npx表示使用的是局部的依赖

npx eslint [options] [file|dir|glob]*

你可以通过运行 npx eslint -h 查看所有 CLI 选项。

命令选项示例

以下是一些常用的ESLint命令选项:

  1. -c--config:指定ESLint配置文件。

例如,以下命令将使用名为.eslintrc.json的配置文件:

npx eslint -c .eslintrc.json example.js
  1. -f--format:指定输出报告的格式。

例如,以下命令将输出JSON格式的报告:

npx eslint --format json example.js
  1. -i--ignore:指定要忽略的文件和目录。

例如,以下命令将忽略名为node_modules的目录:

npx eslint --ignore node_modules example.js
  1. -v--version:显示ESLint版本。

例如,以下命令将显示ESLint的版本:

npx eslint --version
  1. --max-warnings:限制警告数量。

例如,以下命令将限制警告数量为10:

插入复制

npx eslint --max-warnings 10 example.js
  1. --ext:指定要检查的文件扩展名。

例如,以下命令将检查名为example.js的JavaScript文件:

npx eslint --ext .js example.js
  1. --env:指定要使用的环境配置。

例如,以下命令将使用名为browser的环境配置:

npx eslint --env browser example.js
  1. --parser:指定要使用的解析器。

例如,以下命令将使用Babel ESLint解析器:

npx eslint --parser babel-eslint example.js
  1. --plugin:指定要使用的插件。

例如,以下命令将使用react插件:

npx eslint --plugin react example.js
  1. --rules:指定要使用的规则集。

例如,以下命令将使用no-console规则:

npx eslint --rules no-console example.js
  1. --fix:尝试修复尽可能多的问题。 对实际文件本身进行了修复,仅输出剩余的未修复问题。

该命令没有参数

npx eslint --fix file.js

这只是一些常用的ESLint命令选项。要了解更多选项,请查阅Command Line Interface Reference - ESLint - Pluggable JavaScript Linter

输出报告

ESLint可以通过命令行选项来指定输出报告的格式。

使用--format选项可以指定输出报告的格式。例如,要输出JSON格式的报告,输出到results文件,可以使用以下命令:

 --format json > results.json

输出人类可读的格式,保存到txt文件中

eslint --fix --format compact > results.txt

results.txt文件内容

D:\...\src\views\Login\index.vue: line 2, col 7, Error - 'aaa' is assigned a value but never used. (no-unused-vars)
D:\...\src\vite-env.d.ts: line 26, col 11, Error - 'ImportMeta' is defined but never used. (no-unused-vars)

2 problems

亦或是输出到一个html文件中,随便你选。

以下是所有的内置的格式化程序:

补充

为什么项目中使用了eslint,还需要安装编辑器插件比如vscode插件ESLint?

虽然 ESLint 可以检查代码质量,但它并不能提供 Visual Studio Code (VSCode) 插件所提供的所有功能。

  • ESLint 是一个静态代码检查工具,它可以检查项目中提交的代码是否符合一定的规则,它可以帮助开发者找到代码中的问题。然而,ESLint 只是一个工具,它并不能直接在代码编辑器中提供代码补全、智能感知等功能。
  • VSCode插件ESLint会自动识别项目中的.eslintrc.*文件,并使用其中的配置来检查代码。最明显的就是如果你的代码违反了规范,会直接有报错,并且鼠标移入会有详细的报错信息,告诉你违反了哪个规则;并且他还有代码补全、代码格式化等功能。如果你的项目中没有ESLint的配置文件,那么插件会使用默认的配置。你可以在插件的设置(扩展设置或者settings.json文件)中指定自定义的配置文件,并且可以设置其他的默认检测配置,例如:
"eslint.configFile": "./.eslintrc.js" //指定自定义的配置文件
"eslint.codeActionsOnSave.mode": "problems" //插件会在保存文件时优先提供自动修复建议。如果自动修复无法解决所有问题,那么插件会提供代码补全建议,让我们手动修改代码。

以上所相关依赖包

"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"@vitejs/plugin-vue": "^4.2.3",
"eslint": "^8.52.0",
"eslint-plugin-vue": "^9.18.1",
"typescript": "^5.0.2",
"vue-eslint-parser": "^9.3.2",

ending

时隔三月,这次手摸手带你学习ESLint

转载自:https://juejin.cn/post/7299834584375967778
评论
请登录