ESLint-plugin-React 中文

Posted 2023-04-28

参考技术A

React specific linting rules for ESLint
用于React的ESLint规则

Install ESLint either locally or globally.

可以全局或本地安装

If you installed ESLint globally, you have to install React plugin globally too. Otherwise, install it locally.
如果您全局安装ESLint,您不得不也全局安装React组件 ，否则就本地安装它。

Use our preset to get reasonable defaults:
使用我们的预先设置来获得合理的默认值：

You should also specify settings that will be shared across all the plugin rules.
您还应该指定将在所有插件规则之间共享的设置。

If you do not use a preset you will need to specify individual rules and add extra configuration.
如果你没有使用预先设置,你就需要指定独有规则，并且添加额外的配置。

Add "react" to the plugins section.
添加"react"到插件部分

Enable JSX support.
支持JSX语法
With ESLint 2+
在 ESLint 2+

Enable the rules that you would like to use.
启用你想使用的规则

This plugin exports a recommended configuration that enforces React good practices.
该插件导出一个推荐的配置以实现更好的业务
To enable this configuration use the extends property in your .eslintrc config file:
在.eslintrc配置文件内使用extends 属性可以开启他

See ESLint documentation for more information about extending configuration files.
查阅ESLint Document 以获取更多关于扩展配置文件的信息。
The rules enabled in this configuration are:
该配置文件可使用的规则如下

This plugin also exports an all configuration that includes every available rule. This pairs well with the eslint:all rule.
该插件同样的导出一个囊括每一个可使用的规则，这与\'eslint:all`规则很匹配

Note : These configurations will import eslint-plugin-react and enable JSX in parser options .
备注：这些配置将导入\'eslint-plugin-react\' 并在解析器中启用JSX

ESLint-plugin-React is licensed under the MIT License .

误报 eslint(no-unused-vars)

【中文标题】误报 eslint(no-unused-vars)

【英文标题】：False Positive eslint(no-unused-vars)

【发布时间】：2019-07-06 16:20:15

【问题描述】：

在这里你可以看到我有一个非常简单的 react 组件，但是 eslint 规则给了我一个误报。

配置详情

package.json

"devDependencies": 
    "eslint": "^5.13.0",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-hooks": "^1.0.1",

.eslintrc.js

module.exports = 
    "env": 
        "browser": true,
        "es6": true
    ,
    "extends": "eslint:recommended",
    "parserOptions": 
        "ecmaFeatures": 
            "jsx": true
        ,
        "ecmaVersion": 2018,
        "sourceType": "module"
    ,
    "plugins": [
        "react",
        "react-hooks"
    ],
    "rules": 
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ],
        "react-hooks/rules-of-hooks": "error"
    ,
    "settings": 
        "react": 
            "createClass": "createReactClass", // Regex for Component Factory to use, default to "createReactClass"
            "pragma": "React",  // Pragma to use, default to "React"
            "version": "detect", // React version. "detect" automatically picks the version you have installed. You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
        ,
        "linkComponents": [
            // Components used as alternatives to <a> for linking, eg. <Link to= url  />
            "Hyperlink",
             "name": "Link", "linkAttribute": "to" 
        ]
    
;

【问题讨论】：

这能回答你的问题吗？ ESLint with React gives `no-unused-vars` errors

【参考方案1】：

默认情况下，ESLint 不知道 JSX 中变量使用的 React 语义。为了解决这个问题，我可以启用 react/jsx-uses-vars 规则或从 plugin:react/recommended 配置扩展。我选择了后者。

"extends": ["eslint:recommended", "plugin:react/recommended"]