create-react-app項目自定義eslitn配置方式

方案一 eject 項目webpack配置進行自定義

這個方案比較low，不建議使用。這里不講解了。

方案二? 在?package.json 中的 script 命令 添加環境變量?EXTEND_ESLINT=treu 開啟自定義

react-script4.x版本以下可用這個方案

我們可以打開react-script 源碼看到 webpack.config.js 文件

當環境變量設定為true時候,react-script會認為我們自定義eslint配置，不啟用 eslint-config-react-app 的配置。

但是開啟這個變量我們只能在package.json中的 eslintConfig 字段進行配置自定義，無法通過根目錄 .eslintrc 配置，所以不建議使用。我們使用第三方案

方案三?react-app-rewired 和?customize-cra

react-app-rewired 和 customize-cra 是用于對react-scripts手腳架包裝一次進行使用，可不對react eject 就可以對項目自定義webpack，僅限于react-scriptr4.x以下。

1.先安裝依賴?

npm i react-app-rewired customize-cra -D

2.在項目跟目錄創建?config-overrides.js 內容如下

const { override, addWebpackAlias, useEslintRc } = require('customize-cra') const path = require('path')module.exports = override(// 注意，一定要用 path.resolve 引入eslint的配置文件，否則不生效useEslintRc(path.resolve(__dirname, './.eslintrc.json')),// 配置路徑別名addWebpackAlias({'@': path.resolve(__dirname, './src'),'_c': path.resolve(__dirname, './src/components')}) )

3.修改 package.json 的命令?

"start": "cross-env REACT_APP_API=development PORT=3005 react-app-rewired start",

4.然后在根目錄創建 .eslintrc.json 進行自定義eslint配置即可。這里分享一下我們團隊eslint配置，具體更多配置，大家可自己到eslint官網進行參考, 0 表示關閉，1 表示警告，2 表示嚴重錯誤

{"env": {"node": true,"mocha": true,"jest": true,"es6": true,"browser": true},"extends": ["eslint:recommended","plugin:react/recommended"],"parser": "babel-eslint","parserOptions": {"ecmaFeatures": {"jsx": true},"ecmaVersion": 6,"sourceType": "module"},"plugins": ["react","jsx-a11y","react-hooks"],"settings": {"react": {"version": "detect"}},"globals": {"JSX": true,"React": true,"NodeJS": true,"Promise": true},"rules": {"no-console": [1, { "allow": ["error"] }],"consistent-return": 2,"curly": [2, "multi-or-nest"],"dot-location": 0,"eqeqeq": 2,"no-alert": 2,"no-eq-null": 2,"no-lone-blocks": 2,"no-return-await": 2,"no-unused-expressions": 2,"no-label-var": 1,"array-bracket-spacing": 2,"brace-style": 0,"comma-spacing": 1,"consistent-this": 1,"eol-last": 0,"multiline-ternary": [1, "always-multiline"],"new-cap": [2, { "capIsNew": false }],"no-trailing-spaces": 0,"semi": ["error", "never"],"space-before-blocks": 2,"space-in-parens": 2,"spaced-comment": 2,"switch-colon-spacing": ["error", { "after": true, "before": false }],"arrow-spacing": 2,"quotes": [0, "single"],"key-spacing": 2,"comma-dangle": ["error", "never"],"react-hooks/exhaustive-deps": 0,"no-empty-function": 1,"react-native/no-inline-styles": 0,"react/forbid-prop-types": 0,"react/prop-types": 0,"react/display-name": 0,"prefer-promise-reject-errors": 0,"react/no-array-index-key": 2,"react/no-unused-state": 2,"react/jsx-indent-props": 1,"react/jsx-no-comment-textnodes": 1,"react/jsx-no-duplicate-props": 2,"react/jsx-no-target-blank": [1, { "enforceDynamicLinks": "always" }],"react/jsx-no-undef": 2,"react/jsx-props-no-multi-spaces": 1,"react/jsx-tag-spacing": 1,"react/jsx-uses-vars": 2,"react/jsx-wrap-multilines": 2,"react-hooks/rules-of-hooks": 2} }

方案4 react-script 4.x 方案

react17 官方團隊修改了腳手架允許直接在外部聲明.eslintrc文件覆蓋eslint配置。不需要對package和react-app-rewired 和 customize-cra就可用實現eslint 配置。

在根目錄創建文件 .eslintrc.json，配置的extends 字段需要改一下

{"env": {"node": true,"mocha": true,"jest": true,"es6": true,"browser": true},"extends": ["eslint:recommended","plugin:react/recommended","plugin:react-hooks/recommended"],"parser": "babel-eslint","parserOptions": {"ecmaFeatures": {"jsx": true},"ecmaVersion": 6,"sourceType": "module"},"plugins": ["react","jsx-a11y","react-hooks"],"settings": {"react": {"version": "detect"}},"globals": {"JSX": true,"React": true,"NodeJS": true,"Promise": true},"rules": {"no-console": [1, { "allow": ["error"] }],"consistent-return": 2,"curly": [2, "multi-or-nest"],"dot-location": 0,"eqeqeq": 2,"no-alert": 2,"no-eq-null": 2,"no-lone-blocks": 2,"no-return-await": 2,"no-unused-expressions": 2,"no-label-var": 1,"array-bracket-spacing": 2,"brace-style": 0,"comma-spacing": 1,"consistent-this": 1,"eol-last": 0,"multiline-ternary": [1, "always-multiline"],"new-cap": [2, { "capIsNew": false }],"no-trailing-spaces": 0,"semi": ["error", "never"],"space-before-blocks": 2,"space-in-parens": 2,"spaced-comment": 2,"switch-colon-spacing": ["error", { "after": true, "before": false }],"arrow-spacing": 2,"quotes": [0, "single"],"key-spacing": 2,"comma-dangle": ["error", "never"],"react-hooks/exhaustive-deps": 0,"no-empty-function": 1,"react-native/no-inline-styles": 0,"react/forbid-prop-types": 0,"react/prop-types": 0,"react/display-name": 0,"prefer-promise-reject-errors": 0,"react/no-array-index-key": 2,"react/no-unused-state": 2,"react/jsx-indent-props": 2,"react/jsx-no-comment-textnodes": 1,"react/jsx-no-duplicate-props": 2,"react/jsx-no-target-blank": [1, { "enforceDynamicLinks": "always" }],"react/jsx-no-undef": 2,"react/jsx-props-no-multi-spaces": 1,"react/jsx-tag-spacing": 1,"react/jsx-uses-vars": 2,"react/jsx-wrap-multilines": 2,"react-hooks/rules-of-hooks": 2} }

?

總結

以上是生活随笔為你收集整理的关于 create-react-app 自定义 eslint文件配置解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。