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"],