[英]Turn off VSCode Typescript Errors for .JS / .JSX files & keep them for .TS / .TSX files?
[英]Configure ESLint to parse .ts and .tsx as Typescript and .js and .jsx as Ecmascript
我已经安装了 typescript 以在我的 Create React App 项目中使用。 我想逐步将 ES 文件重构为 TS。
但是 linter 现在也将 .js 和 .jsx 文件解析为 Typescript。
/project/file.js
19:35 warning Missing return type on function @typescript-eslint/explicit-function-return-type
20:35 warning Missing return type on function @typescript-eslint/explicit-function-return-type
是否可以将 .js 和 .jsx 文件解析为 Ecmascript 并将 .ts 和 .tsx 解析为 Typescript?
我的配置是:
./eslintrc
{
"extends": [
"airbnb",
"prettier",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint"
],
"parser": "@typescript-eslint/parser",
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx", ".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"
]
}
用于运行的命令:
{
"scripts": {
"lint": "node_modules/.bin/eslint --ext=.jsx,.js,.tsx,.ts ."
}
}
啊,你应该使用 eslint.rc 中的 overrides 属性, 如本文所述。
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"extends": [
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"prettier/@typescript-eslint"
],
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"]
}
]
然后我注意到包含 TS 的 ES 文件没有找到 .ts 文件:
/project/file.js
3:26 error Unable to resolve path to module './AnotherComonent' import/no-unresolved
3:26 error Missing file extension for "./AnotherComonent" import/extensions
可以通过将其添加到.eslintrc (推荐)来解决( source ):
{
"extends": ["plugin:import/typescript"],
"rules": {
"import/extensions": [
"error",
"always",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
}
{
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
}
}
换句话说,手动添加文件的解析器。
并忽略 im/extensions 错误。 不理想,但在撰写本文时似乎是唯一的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.