如何解决创建React App:ESLint配置不适用于Typescript .eslintrc tsconfig.json package.json 已修复:
我已经使用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件事我要修复。如果此配置在其他项目中对您有用,则可能会有用。
- 运行VSCODE中的“重新加载窗口”,通常可以解决我的问题
- 删除node_modules并重新安装de deps,我使用yarn,它之前已经解决了问题
- 可能值得手动重新创建.eslintrc。也许CRA中有更新,但情况有所改变。通常,我开始一个新项目并运行eslint --init并开始创建一个新的eslintrc
检查eslint插件是否在IDE中正常工作很酷。
obs:我会将其发布为评论,但是我还不能。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。