[英]Configure ESLint to parse .ts and .tsx as Typescript and .js and .jsx as Ecmascript
I have installed typescript to use in my Create React App project.我已经安装了 typescript 以在我的 Create React App 项目中使用。 I want to gradually refactor the ES files to TS.
我想逐步将 ES 文件重构为 TS。
But the linter now also parses the.js and.jsx files as Typescript.但是 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
Is it possible to parse the.js and.jsx files as Ecmascript and the.ts and.tsx as Typescript?是否可以将 .js 和 .jsx 文件解析为 Ecmascript 并将 .ts 和 .tsx 解析为 Typescript?
My configuration is:我的配置是:
./eslintrc ./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 ./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"
]
}
The command used to run:用于运行的命令:
{
"scripts": {
"lint": "node_modules/.bin/eslint --ext=.jsx,.js,.tsx,.ts ."
}
}
Ah, you should use the overrides property in eslint.rc as described in this post .啊,你应该使用 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"]
}
]
Then I noticed that the ES files that included TS weren't finding the.ts files:然后我注意到包含 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
Can be resolved by either ( source ) adding this to .eslintrc (recommended):可以通过将其添加到.eslintrc (推荐)来解决( source ):
{
"extends": ["plugin:import/typescript"],
"rules": {
"import/extensions": [
"error",
"always",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
],
}
Or ( source and source ):或者(来源和来源):
{
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
"rules": {
"import/extensions": [
"error",
"ignorePackages",
{
"js": "never",
"jsx": "never",
"ts": "never",
"tsx": "never"
}
]
}
}
In other words, add the resolver for the file manually.换句话说,手动添加文件的解析器。
And ignore the im/extensions error.并忽略 im/extensions 错误。 Not ideal but it seems to be the only way at the time of writing.
不理想,但在撰写本文时似乎是唯一的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.