启用 eslint-react-hooks 关闭所有 eslint 规则
enabling eslint-react-hooks turns off all eslint rules
我正在尝试获取 eslint 的 react-hooks
规则,但它似乎不适用于我的设置(VSCode、CRA、airbnb、tslint、prettier)。
这是我的 .eslintrc.json 在它坏掉之前:
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": ["plugin:react/recommended", "airbnb", "prettier"],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2020,
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint"],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }]
}
}
这是我的devDependencies
:
"devDependencies": {
"@testing-library/jest-dom": "^5.5.0",
"@testing-library/react": "^10.0.3",
"@testing-library/user-event": "^10.1.0",
"@types/jest": "^25.2.1",
"@types/node": "^13.13.4",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.7",
"@typescript-eslint/eslint-plugin": "^2.30.0",
"@typescript-eslint/parser": "^2.30.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^3.0.0",
"prettier": "^2.0.5",
"typescript": "~3.8.3"
},
然后我尝试将以下内容添加到 .eslintrc
中的 extends
:
"extends": ["plugin:react/recommended", "plugin:react-hooks/recommended", "airbnb", "prettier"],
我还尝试将 "plugin:react-hooks/recommended"
放在数组中的不同位置。无论我做什么,它都会违反所有其他 lint 规则,包括它自己的。
我还尝试将以下内容添加到 plugins
和 rules
:
"plugins": ["react", "react-hooks", "@typescript-eslint"],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}
当然还有检查 lint 规则的测试代码:
const [a, b] = React.useState("Hey");
React.useEffect(() => {
React.useMemo(() => {}, []);
if (a) b("Yeppp");
if (props.what) console.log(props.what);
exampleMethod();
}, []);
const exampleMethod = () => {};
编辑:忘记提及我也尝试在 extends
中使用 airbnb/hooks
:
"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks", "prettier"],
我找到了解决方案,所以我正在回答我自己的问题。
eslint-plugin-react-hooks 文档说如果使用 Create React App,确保 NOT 直接在 package.json
.
中添加模块
因此,解决方案是从 devDependencies
.
中删除 eslint-plugin-react-hooks
我正在尝试获取 eslint 的 react-hooks
规则,但它似乎不适用于我的设置(VSCode、CRA、airbnb、tslint、prettier)。
这是我的 .eslintrc.json 在它坏掉之前:
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": ["plugin:react/recommended", "airbnb", "prettier"],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2020,
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint"],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }]
}
}
这是我的devDependencies
:
"devDependencies": {
"@testing-library/jest-dom": "^5.5.0",
"@testing-library/react": "^10.0.3",
"@testing-library/user-event": "^10.1.0",
"@types/jest": "^25.2.1",
"@types/node": "^13.13.4",
"@types/react": "^16.9.34",
"@types/react-dom": "^16.9.7",
"@typescript-eslint/eslint-plugin": "^2.30.0",
"@typescript-eslint/parser": "^2.30.0",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.1.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^3.0.0",
"prettier": "^2.0.5",
"typescript": "~3.8.3"
},
然后我尝试将以下内容添加到 .eslintrc
中的 extends
:
"extends": ["plugin:react/recommended", "plugin:react-hooks/recommended", "airbnb", "prettier"],
我还尝试将 "plugin:react-hooks/recommended"
放在数组中的不同位置。无论我做什么,它都会违反所有其他 lint 规则,包括它自己的。
我还尝试将以下内容添加到 plugins
和 rules
:
"plugins": ["react", "react-hooks", "@typescript-eslint"],
"rules": {
// ...
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}
当然还有检查 lint 规则的测试代码:
const [a, b] = React.useState("Hey");
React.useEffect(() => {
React.useMemo(() => {}, []);
if (a) b("Yeppp");
if (props.what) console.log(props.what);
exampleMethod();
}, []);
const exampleMethod = () => {};
编辑:忘记提及我也尝试在 extends
中使用 airbnb/hooks
:
"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks", "prettier"],
我找到了解决方案,所以我正在回答我自己的问题。
eslint-plugin-react-hooks 文档说如果使用 Create React App,确保 NOT 直接在 package.json
.
中添加模块
因此,解决方案是从 devDependencies
.
eslint-plugin-react-hooks