@typescript-eslint 编译错误不同于 linting 错误
Posted
技术标签:
【中文标题】@typescript-eslint 编译错误不同于 linting 错误【英文标题】：@typescript-eslint compile error different to linting errors 【发布时间】：2021-09-17 20:18:31 【问题描述】：我正在运行 create-react-app 并在运行我的项目时收到 failed to compile 错误。
我认为这是一个普遍问题，我的 VS 代码中没有收到任何错误/警告，但是当我运行项目时，由于@typescript-eslint，我的浏览器和控制台中报告了重大错误。这让我觉得编译器没有遵循与我的 linter 相同的规则，但我不明白它是否/如何工作，或者如何修复它。
我遇到的具体错误是：
Definition for rule '@typescript-eslint/ban-ts-ignore' was not found
我在一个组件 .tsx 文件中介绍了这个：
// @ts-ignore
controlValue=idealTeeMeasuresState[eachMeasureKey]
我的eslintrc.json 包含以下内容：
"rules":
"react/prop-types": 1, //changed from "off"
"react/no-unescaped-entities": 1,
"no-unused-vars": ["warn", "vars": "all", "args": "after-used", "ignoreRestSiblings": false ],
"no-undef": 1,
"no-extra-semi": 1,
"@typescript-eslint/no-extra-semi": ["warn"],
"@typescript-eslint/ban-ts-comment": "warn"
,
package.json
"name": "here-i-go",
"version": "0.2.32",
"private": true,
"dependencies":
"@babel/core": "7.9.0",
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "^4.0.0-alpha.57",
"@sentry/react": "^6.3.1",
"@sentry/tracing": "^6.3.1",
"@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": "^26.0.23",
"@types/node": "^14.14.37",
"@types/react": "^17.0.6",
"@types/react-dom": "^17.0.5",
"axios": "^0.21.1",
"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",
"chart.js": "^2.9.4",
"chartjs-plugin-datalabels": "^0.7.0",
"clsx": "^1.1.1",
"cross-fetch": "^3.0.6",
"css-loader": "3.4.2",
"distinct-colors": "^3.0.0",
"dotenv": "8.2.0",
"dotenv-expand": "5.1.0",
"eslint-loader": "^4.0.2",
"file-loader": "4.3.0",
"firebase": "^7.24.0",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"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",
"luxon": "^1.25.0",
"match-sorter": "^4.2.1",
"mini-css-extract-plugin": "0.9.0",
"moment": "^2.29.1",
"netlify-cli": "^3.4.5",
"notistack": "^1.0.2",
"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": "^17.0.1",
"react-app-polyfill": "^1.0.6",
"react-chartjs-2": "^2.11.1",
"react-cookie": "^4.0.3",
"react-dev-utils": "^11.0.4",
"react-dom": "^17.0.1",
"react-firebaseui": "^4.1.0",
"react-ga": "^3.3.0",
"react-hook-form": "^6.13.1",
"react-instantsearch": "^6.8.2",
"react-joyride": "^2.3.0",
"react-moment": "^0.9.7",
"react-plain-carousel": "^1.3.1",
"react-router-dom": "^5.2.0",
"react-router-hash-link": "^2.4.0",
"react-scripts": "^4.0.3",
"resolve": "1.15.0",
"resolve-url-loader": "^3.1.2",
"sass-loader": "8.0.2",
"semver": "6.3.0",
"source-map-explorer": "^2.5.1",
"style-loader": "0.23.1",
"terser-webpack-plugin": "^2.3.8",
"ts-pnp": "1.1.6",
"url-loader": "2.3.0",
"webpack": "4.42.0",
"webpack-dev-server": "^3.11.2",
"webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "4.3.1",
"xyz": "^4.0.0"
,
"scripts":
"start": "node scripts/start.js",
"startLocal": "REACT_APP_NODE_ENV=development node scripts/start.js",
"build": "node scripts/build.js && cat src/custom-service-worker.js >> build/service-worker.js",
"test": "node scripts/test.js",
"analyze": "source-map-explorer 'build/static/js/*.js'",
"gitaddAndCommit": "npm version patch -no-git-tag-version && npm run generate-build-version && git add . && git commit -m 'commit for deploy'",
"commitPatch": "node scripts/gitCommitAndPatch",
"gitPush": "git push origin master --tag",
"pushAndNetlifyDeploy": "git push origin master --tag && netlify deploy --prod",
"eject": "react-scripts eject",
"generate-build-version": "node generate-build-version",
"prebuild": "npm run generate-build-version"
,
"ss-scripts":
"BuildAndDeployFirebase": "node scripts/build.js && firebase deploy --only hosting",
"startHeroku": "REACT_APP_NODE_ENV=production node scripts/start.js"
,
"eslintConfig":
"extends": "react-app",
"rules":
"@typescript-eslint/no-unused-vars": 1,
"@typescript-eslint/ban-ts-comment": "off",
"ban-ts-comment": "off"
,
"eslintIgnore": [
"**/*.js",
"**/*.jsx"
],
"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.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.js,jsx,ts,tsx",
"<rootDir>/src/**/*.spec,test.js,jsx,ts,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": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
"@babel/plugin-proposal-nullish-coalescing-operator",
"@babel/plugin-proposal-optional-chaining"
]
,
"devDependencies":
"@babel/preset-typescript": "^7.9.0",
"@types/material-ui": "^0.21.8",
"@types/react-router-dom": "^5.1.7",
"@typescript-eslint/eslint-plugin": "^4.24.0",
"@typescript-eslint/parser": "^4.24.0",
"eslint": "^7.27.0",
"eslint-plugin-import": "^2.23.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-react": "^7.23.2",
"typescript": "^3.9.9"
.eslintrc.json
"root": true,
"parser": "@typescript-eslint/parser",
"plugins": ["react", "@typescript-eslint", "eslint-plugin-node", "@typescript-eslint", "react-hooks"],
// "files": ["**/*.ts", "**/*.tsx"],
"env":
"browser": true,
"es6": true,
"node": true
,
"extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
"parserOptions":
"ecmaFeatures":
"jsx": true,
"modules": true
,
"ecmaVersion": 11,
"sourceType": "module",
"allowImportExportEverywhere": true
,
"rules":
"react/prop-types": 1, //changed from "off"
"react/no-unescaped-entities": 1,
"no-unused-vars": ["warn", "vars": "all", "args": "after-used", "ignoreRestSiblings": false ],
"no-undef": 1,
"no-extra-semi": 1,
"ban-ts-comment": "warn",
"@typescript-eslint/ban-ts-comment": "warn",
"@typescript-eslint/no-extra-semi": ["warn"]
,
"settings":
"react":
"version": "detect"
【问题讨论】：
分享你的 package.json 已安装包列表 + 整个 eslintrc.json 会有所帮助。 谢谢，我刚刚添加到我的帖子中 【参考方案1】：您的.eslintrc.json 中包含此行。
"plugins": ["react", "@typescript-eslint", "eslint-plugin-node", "@typescript-eslint", "react-hooks"],
但我看不到这些软件包安装在您的 package.json 文件中。因此你会得到错误。
参考eslint-config-react-app 中的create-react-app repo。
这是参考链接。 https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app
【讨论】：
谢谢！这并没有解决问题，但它似乎确实改变了我看到的错误 - 或者至少改变了我看到它们的顺序。似乎有帮助的一件事是在我的webpack.config.js 中更改 module: rules: []文件。我将 javascript 和 typescript 文件类型的规则替换为使用 babel-loader 的规则。在它被设置为使用 eslint 之前。我仍然不确定我是否了解正在发生的事情（因为我似乎仍然无法在需要时打开/关闭一些错误和警告），但这似乎是朝着正确方向迈出的一步。跨度>
以上是关于@typescript-eslint 编译错误不同于 linting 错误的主要内容，如果未能解决你的问题，请参考以下文章
为@typescript-eslint/parser 设置了解析错误“parserOptions.project”
使用 typescript-eslint 在 VSCode 编辑器中未显示 Typescript 错误
什么是“解析错误：已为 @typescript-eslint/parser 设置了“parserOptions.project”。 IntelliJ IDE 系列中的错误？
带有 @typescript-eslint/no-unsafe-* 规则的新 eslint 错误
@typescript-eslint/eslint-plugin 错误：'Route' 已定义但从未使用过（no-unused-vars）
我的“.eslintrc.js”文件出错 - “解析错误：已为 @typescript-eslint/parser 设置了“parserOptions.project”。”