@10stars/eslint-plugin-react-hooks 中文文档教程
eslint-plugin-react-hooks
这个 ESLint 插件强制执行 Hooks 规则。
它是 React 的 Hooks API 的一部分。
Installation
注意：如果您使用的是 Create React App，请使用 react-scripts >= 3 而不是直接添加它。
假设您已经安装了 ESLint，请运行：
# npm
npm install @10stars/eslint-plugin-react-hooks --save-dev
# yarn
yarn add @10stars/eslint-plugin-react-hooks --dev
Then扩展推荐的 eslint 配置：
{
"extends": [
// ...
"plugin:@10stars/react-hooks/recommended"
]
}
Custom Configuration
如果你想要更细粒度的配置，你可以将这样的代码片段添加到你的 ESLint 配置文件中：
{
"plugins": [
// ...
"@10stars/react-hooks"
],
"rules": {
// ...
"@10stars/react-hooks/rules-of-hooks": "error",
"@10stars/react-hooks/exhaustive-deps": "warn"
}
}
Advanced Configuration
additionalHooks
exhaustive-deps 可以配置为验证自定义 Hooks 的依赖关系additionalHooks 选项。 此选项接受一个正则表达式来匹配具有依赖性的自定义挂钩的名称。
{
"rules": {
// ...
"@10stars/react-hooks/exhaustive-deps": ["warn", {
"additionalHooks": "(useMyCustomHook|useMyOtherCustomHook)"
}]
}
}
我们建议非常谨慎地使用此选项，如果使用的话。 一般来说，我们建议大多数自定义 Hooks 不使用 dependencies 参数，而是提供更专注于特定用例的更高级别的 API。
ignoreThisDependency
如果你在钩子中使用类似 props.doSomething() 的东西，你可能会发现 exhaustive-deps 需要整个 props。 这是预期的行为，因为 props 被 doSomething 称为 this。 您可以按照 exhaustive-deps 的建议通过解构来解决它。
但是，在某些情况下，由于您的编码风格或与 no-shadow 冲突，您可能希望避免解构。 在这种情况下，ignoreThisDependency 可能会有所帮助。
{
"rules": {
// ...
"@10stars/react-hooks/exhaustive-deps": ["warn", {
"ignoreThisDependency": "props"
}]
}
}
有效选项是 never（默认行为）、props、always。
Valid and Invalid Examples
请参考 Hooks 规则 文档和 Hooks FAQ 以了解有关此规则的更多信息。
License
麻省理工学院
eslint-plugin-react-hooks
This ESLint plugin enforces the Rules of Hooks.
It is a part of the Hooks API for React.
Installation
Note: If you're using Create React App, please use react-scripts >= 3 instead of adding it directly.
Assuming you already have ESLint installed, run:
# npm
npm install @10stars/eslint-plugin-react-hooks --save-dev
# yarn
yarn add @10stars/eslint-plugin-react-hooks --dev
Then extend the recommended eslint config:
{
"extends": [
// ...
"plugin:@10stars/react-hooks/recommended"
]
}
Custom Configuration
If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file:
{
"plugins": [
// ...
"@10stars/react-hooks"
],
"rules": {
// ...
"@10stars/react-hooks/rules-of-hooks": "error",
"@10stars/react-hooks/exhaustive-deps": "warn"
}
}
Advanced Configuration
additionalHooks
exhaustive-deps can be configured to validate dependencies of custom Hooks with the additionalHooks option. This option accepts a regex to match the names of custom Hooks that have dependencies.
{
"rules": {
// ...
"@10stars/react-hooks/exhaustive-deps": ["warn", {
"additionalHooks": "(useMyCustomHook|useMyOtherCustomHook)"
}]
}
}
We suggest to use this option very sparingly, if at all. Generally saying, we recommend most custom Hooks to not use the dependencies argument, and instead provide a higher-level API that is more focused around a specific use case.
ignoreThisDependency
You may find exhaustive-deps requires entire props if you use something like props.doSomething() in hooks. This is intended behavior because props is referred as this by doSomething. You can resolve it by destructuring as exhaustive-deps suggests.
However, in some cases, you may want to avoid destructuring because of your coding style or conflict with no-shadow. In the case, ignoreThisDependency may help.
{
"rules": {
// ...
"@10stars/react-hooks/exhaustive-deps": ["warn", {
"ignoreThisDependency": "props"
}]
}
}
Valid options are never (default behavior), props, always.
Valid and Invalid Examples
Please refer to the Rules of Hooks documentation and the Hooks FAQ to learn more about this rule.
License
MIT
