eslint-plugin-prettier
作用
eslint-plugin-prettier是一个 ESLint 插件，它的主要作用是将 Prettier 作为 ESLint 的规则来运行。这意味着可以使用 ESLint 来检查代码是否符合 Prettier 的格式化规则，并且可以将 Prettier 的格式化错误作为 ESLint 的错误进行报告。
工作原理
- 当 ESLint 运行时，
eslint-plugin-prettier会先使用 Prettier 对代码进行格式化，然后将格式化后的代码与原始代码进行比较。如果两者不同，就会报告一个 ESLint 错误，提示代码不符合 Prettier 的格式化规则。
配置
eslint-config-prettier
作用
eslint-config-prettier是一个 ESLint 配置文件，它的主要作用是关闭 ESLint 中与 Prettier 冲突的规则。因为有些 ESLint 规则可能会与 Prettier 的格式化规则产生冲突，例如 ESLint 可能有自己的缩进规则，而 Prettier 也有自己的缩进规则，这时候就需要关闭 ESLint 中这些冲突的规则，以避免重复的格式化和错误报告。
工作原理
- 当使用
eslint-config-prettier时，它会自动禁用那些与 Prettier 冲突的 ESLint 规则，确保 ESLint 和 Prettier 能够和谐共处。 eslint-plugin-prettier和eslint-config-prettier常常一起配合使用
配置
eslint-plugin-react-hooks
作用
eslint-plugin-react-hooks是react官方发布的一个eslint插件，也是vite创建react项目时默认内置的eslint插件，主要用于在使用 React Hooks 时进行静态代码检查，帮助开发者遵循 React Hooks 的规则，避免一些常见的错误和陷阱。
演示
- 比如使用
useEffect时，如果内部使用了useState，则会要求把useState加入依赖中，除非非必需。如果依赖了外部函数，会要求转成useCallback等等。
配置
eslint-plugin-react-refresh
作用
eslint-plugin-react-refresh是一个 ESLint 插件，主要用于配合 React Refresh 来进行代码检查。- React Refresh 是 React 官方提供的一种在开发过程中实现快速刷新的技术。它允许在不丢失组件状态的情况下，实时更新模块的代码。当你修改组件的代码时，React Refresh 会智能地更新组件，而不是重新加载整个页面，这样可以大大提高开发效率。
eslint-plugin-react-refresh为 React Refresh 提供了一系列 ESLint 规则，会检查你的代码中是否存在与 React Refresh 不兼容的代码模式，例如在函数组件中使用了不支持的语法或 API。如果发现这些问题，ESLint 会给出相应的警告或错误提示，帮助你及时修复。- 通常和
eslint-plugin-react-hooks配合使用。
配置
eslint-plugin-jsx-a11y
作用
eslint-plugin-jsx-a11y是一个用于检查 React JSX 代码中可访问性（Accessibility，即 a11y，是 “accessibility” 一词中字母 “a” 到 “y” 之间有 11 个字母，故用 a11y 来简称）问题的 ESLint 插件。- 可访问性是指确保网站和应用程序对于所有用户，包括那些有残疾或特殊需求的用户，都是可用的。
eslint-plugin-jsx-a11y会依据各种可访问性标准（如 WCAG - Web Content Accessibility Guidelines）来检查 JSX 代码，提醒开发者注意代码中可能存在的违反可访问性原则的问题，从而帮助开发者编写出更具包容性的代码。 - 确保使用的 HTML 标签具有正确的语义，比如使用
<button>标签来表示可点击的按钮，而不是使用<div>标签并添加点击事件来模拟按钮，因为<button>标签本身具有更好的可访问性语义。检查表单元素（如输入框、复选框等）是否有正确的标签（label）与之关联，以便屏幕阅读器能够正确地为用户描述这些表单元素的用途。
演示
配置
eslint-plugin-styled-components-a11y
作用
eslint-plugin-styled-components-a11y和上面的类似，不过是用来对使用styled-components编写的样式化组件进行静态代码分析，以确保这些组件遵循可访问性最佳实践。
配置
踩坑
- 对
eslint v8的配置是没问题的，对eslint v9的配置似乎有点问题。
eslint-plugin-import
作用
eslint-plugin-import允许开发者定义导入语句的分组和排序规则，使代码更加整洁和易于阅读。可以整理导入模块路径，避免重复的导入模块。
演示
配置
- 导入顺序要额外配置
import importPlugin from 'eslint-plugin-import'
{
extends: [importPlugin.flatConfigs.recommended],
rules: {
'import/order': [
'error',
{
// 定义导入分组
groups: [
'builtin', // 内置模块，如 'fs', 'path' 等
'external', // 外部依赖，如 'react', 'lodash' 等
'internal', // 内部模块，以相对路径引入的模块
'parent', // 父级目录下的模块
'sibling', // 同级目录下的模块
'index', // 当前目录下的 index 文件
],
// 定义每组内的排序规则
alphabetize: {
order: 'asc', // 按字母顺序升序排列
caseInsensitive: true, // 不区分大小写
},
},
],
}
}
eslint-plugin-jsdoc
作用
eslint-plugin-jsdoc可以强制要求开发者为函数添加 JSDoc 注释，包括对函数的功能描述、参数说明和返回值说明等。- jsdoc默认是全部需要的。不过对于ts，则不需要一些jsdoc的类型，可以根据js/jsx和ts/tsx文件做不同的配置，比如ts/tsx则去掉需要type的rules。
配置
import jsdoc from 'eslint-plugin-jsdoc'
// ts
{
files: ['**/*.{ts,tsx}'],
extends: [jsdoc.configs['flat/recommended']],
rules: {
'jsdoc/require-param-type': 'off',
'jsdoc/require-returns': 'off',
}
}
// js
{
files: ['**/*.{js,jsx}'],
extends: [jsdoc.configs['flat/recommended']],
}
tseslint.config和flatconfig
现在eslint v9主推的是flatconfig，也就是直接导出一个数组，里面是扁平化的配置。
我们看到大多数插件文档，也是使用这种方式导入，例如 eslint-plugin-react-refresh 的文档，它的推荐配置：
其实内部的结构是这样的：
也就是说，实际上是使用一个对象，里面有plugin和rules两个属性：
{
plugins: {
[插件名]:{
rules: {
...
}
}
},
rules: {
...
}
}
所以遇到这种扁平化配置，要追加配置，只需要在后面添加一个对象，然后像之前配eslint一样配置规则就行了。
但是我们使用vite创建react+typescript项目的时候，发现是直接导出了一个tseslint.config({...},{...}), 差点没把我搞蒙了。
原来tseslint.config可以将一个个配置整理在一起，变成一个配置导出。那么上面的flatconfig要怎么在这里配置呢？聪明的小伙伴可能已经看出来了，把...recommended注册到extends里面即可。如果没有提供recommended，则按照文档，把插件注册到plugins中，再启动或者关闭对应的rules即可。
extends和plugins怎么区分？
- 原本每个插件都要到
plugins中注册，然后再到rules把对应的每条规则都开启。 - 但是如果有100条规则，岂不是要写100个
rules？ - 此时插件的作者会把一些常用的
rules写在recommended中，再通过extends直接继承就好了。如果作者推荐的一些规则是不需要的，则到rules关闭即可。或者是作者没推荐的规则，到rules注册启用即可。
