I have installed typescript to use in my Create React App project. I want to gradually refactor the ES files to TS.
But the linter now also parses the .js and .jsx files as 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?
My configuration is:
./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"
]
}
The command used to run:
{
"scripts": {
"lint": "node_modules/.bin/eslint --ext=.jsx,.js,.tsx,.ts ."
}
}
Similar to Typescript compiler settings, you can either use the command line to generate a configuration file using the --init flag from ESLint or create it manually. Either way, it's mandatory to have your ESLint configuration file.
It accepts an array of globs to exclude from the project globs. For example, by default it will ensure that a glob like ./**/tsconfig. json will not match any tsconfig s within your node_modules folder (some npm packages do not exclude their source files from their published packages).
ESLint is a JavaScript linter that you can use to lint either TypeScript or JavaScript code.
To use the plugins we have installed, update the plugins object in the eslintrc file: "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"], The last thing to set up in ESLint is the eslint-import-resolver-typescript. Just add the settings key in the eslint configuration file.
Ah, you should use the overrides property in eslint.rc as described in this post.
"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:
/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):
{
"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. Not ideal but it seems to be the only way at the time of writing.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With