eslint 安装与使用-基础教程

中文官网
官方规则解析
规则参考 - ESLint - 插件化的 JavaScript 代码检查工具

eslint

• ESlint 是一个检查 JS,TS 语法的工具.能够与常用开发工具，例如 VS Code，进行集成并提供错误提示，和可能的修正方法

安装

• 安装eslint

npm init @eslint/config

• 安装完成后会生成配置文件 .eslintrc.json

• 它里边大概有这些内容：
  • env 配置 JS 运行环境和版本
  • extends 指定要继承哪些配置，这里继承了 eslint 的推荐配置
  • overrides 覆盖配置
  • parseOptions，eslint 的解析器配置，这里配置了支持的 ECMAScript 版本和 JS 源码来源，是普通 JS 文件，还是模块化的 JS 文件，这里是 module 模块化
  • rules 用于配置单个 eslint 规则，稍后我们再看。

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "overrides": [
    ],
    "parserOptions": {
        "ecmaVersion": "latest", // The version of ECMAScript to support.
        "sourceType": "module"  // The type of JavaScript source code. Possible values are "script" for traditional script files, "module" for ECMAScript modules (ESM), and "commonjs" for CommonJS files.
    },
    "rules": {
    }
}

忽略规则

• 使用 ESLint 还可以忽略规则，最简单的方式是在代码的上面，使用 eslint 能识别的注释。例如我们不检查 obj 是否使用了解构，可以在他上边使用 /* */ 注释，写上 eslint，之后写上规则的名字 prefer-destructuring, 然后设置它的值为 off

/* eslint prefer-destructuring: off */
let a = obj.a;

• 还有一种是使用配置文件，添加 ignorePatterns，配置忽略检查的文件匹配模式，匹配到的文件就都不检查了

"ignorePatterns": ["index.js"],

安装插件

• yarn add --dev eslint-plugin-react // 安装eslint-react 插件
• 在配置文件中使用

"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:react/jsx-runtime"],