创建React App：ESLint配置不适用于Typescript .eslintrc tsconfig.json package.json 已修复：

编程问答 2022-06-12

问题描述

我已经使用CRA （打字稿模板）创建了一个React应用，并且TypeScript不遵循ESLint配置中编写的规则。这对我来说很奇怪，因为我在我设置的每个react项目中都使用了此配置。我在下面分享了一些可能有用的信息。

.eslintrc

TypeScript不会遵循以下任何编写的规则。

{
  "parser": "@typescript-eslint/parser","plugins": ["react-hooks"],"extends": ["airbnb-typescript","plugin:@typescript-eslint/recommended"],"parserOptions": { "project": "./tsconfig.json" },"rules": {
    "react/prop-types": "off","quotes": ["error","single"],"newline-before-return": "error","import/prefer-default-export": "off","react-hooks/rules-of-hooks": "error","react-hooks/exhaustive-deps": "error","lines-between-class-members": "error","import/newline-after-import": ["error",{ "count": 1 }],"comma-dangle": [
      "error",{
        "arrays": "always-multiline","objects": "always-multiline","imports": "always-multiline","exports": "always-multiline","functions": "always-multiline"
      }
    ]
  },"ignorePatterns": [
    "config","public","scripts","serviceWorker.ts","setupTests,ts"
  ]
}

tsconfig.json 

{
  "compilerOptions": {
    "target": "es5","lib": [
      "dom","dom.iterable","esnext"
    ],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react"
  },"include": [
    "src"
  ]
}

package.json 

{
  "name": "foo","version": "0.1.0","private": true,"dependencies": {
    "react": "^16.13.1","react-dom": "^16.13.1"
  },"scripts": {
    "start": "node scripts/start.js","build": "node scripts/build.js","test": "node scripts/test.js"
  },"eslintConfig": {
    "extends": "react-app"
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  },"jest": {
    "roots": [
      "<rootDir>/src"
    ],"collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"
    ],"setupFiles": [
      "react-app-polyfill/jsdom"
    ],"setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.ts"
    ],"testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,"<rootDir>/src/**/*.{spec,test}.{js,tsx}"
    ],"testEnvironment": "jest-environment-jsdom-fourteen","transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest","^.+\\.css$": "<rootDir>/config/jest/csstransform.js","^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },"transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"
    ],"modulePaths": [],"moduleNameMapper": {
      "^react-native$": "react-native-web","^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },"modulefileExtensions": [
      "web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"
    ],"watchPlugins": [
      "jest-watch-typeahead/filename","jest-watch-typeahead/testname"
    ]
  },"babel": {
    "presets": [
      "react-app"
    ]
  },"devDependencies": {
    "@babel/core": "7.9.0","@svgr/webpack": "4.3.3","@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.5.0","@testing-library/user-event": "^7.2.1","@types/jest": "^24.9.1","@types/node": "^12.12.62","@types/react": "^16.9.49","@types/react-dom": "^16.9.8","@types/react-router-dom": "^5.1.5","@typescript-eslint/eslint-plugin": "^2.10.0","@typescript-eslint/parser": "^2.10.0","babel-eslint": "10.1.0","babel-jest": "^24.9.0","babel-loader": "8.1.0","babel-plugin-named-asset-import": "^0.3.6","babel-preset-react-app": "^9.1.2","camelcase": "^5.3.1","case-sensitive-paths-webpack-plugin": "2.3.0","css-loader": "3.4.2","dotenv": "8.2.0","dotenv-expand": "5.1.0","eslint": "^6.6.0","eslint-config-react-app": "^5.2.1","eslint-loader": "3.0.3","eslint-plugin-flowtype": "4.6.0","eslint-plugin-import": "2.20.1","eslint-plugin-jsx-a11y": "6.2.3","eslint-plugin-react": "7.19.0","eslint-plugin-react-hooks": "^1.6.1","file-loader": "4.3.0","fs-extra": "^8.1.0","html-webpack-plugin": "4.0.0-beta.11","identity-obj-proxy": "3.0.0","jest": "24.9.0","jest-environment-jsdom-fourteen": "1.0.1","jest-resolve": "24.9.0","jest-watch-typeahead": "0.4.2","mini-css-extract-plugin": "0.9.0","optimize-css-assets-webpack-plugin": "5.0.3","pnp-webpack-plugin": "1.6.4","postcss-flexbugs-fixes": "4.1.0","postcss-loader": "3.0.0","postcss-normalize": "8.0.1","postcss-preset-env": "6.7.0","postcss-safe-parser": "4.0.1","react-app-polyfill": "^1.0.6","react-dev-utils": "^10.2.1","resolve": "1.15.0","resolve-url-loader": "3.1.1","sass-loader": "8.0.2","semver": "6.3.0","style-loader": "0.23.1","terser-webpack-plugin": "2.3.8","ts-pnp": "1.1.6","typescript": "^3.7.5","url-loader": "2.3.0","webpack": "4.42.0","webpack-dev-server": "3.11.0","webpack-manifest-plugin": "2.2.0","workBox-webpack-plugin": "4.3.1"
  }
}

注意：已退出React应用

解决方法

已修复：

我的编辑器VS Code在settings.json中缺少此代码：“ eslint.validate”：[“ typescript”，“ typescriptreact”]

需要这样做，以明确告知ESLint监视TypeScript文件中的掉毛错误（默认情况下，它仅掉毛JavaScript和JSX文件）。

希望这对您也有帮助！ ：）

,

这些事情通常在我使用VSCODE时发生。通常有3件事我要修复。如果此配置在其他项目中对您有用，则可能会有用。

  1. 运行VSCODE中的“重新加载窗口”，通常可以解决我的问题
  2. 删除node_modules并重新安装de deps，我使用yarn，它之前已经解决了问题
  3. 可能值得手动重新创建.eslintrc。也许CRA中有更新，但情况有所改变。通常，我开始一个新项目并运行eslint --init并开始创建一个新的eslintrc

检查eslint插件是否在IDE中正常工作很酷。

obs：我会将其发布为评论，但是我还不能。

eslinteslintreactjsreactjsreactjsreactjsreduxreduxreduxreduxtypescripttypescripttypescripttypescript-eslint