如何解决导入路径不能以'.tsx‘扩展名结尾
可以编辑tsconfig.json文件并添加路径选项,如下所示:
{
"compilerOptions": {
"target": "es5","lib": [
"dom","dom.iterable","esnext"
],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"noFallthroughCasesInSwitch": true,"module": "esnext","moduleResolution": "node","resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react-jsx","noImplicitAny": false,"paths": {
"@/*": ["src/*"]
},},"include": ["**/*.ts","**/*.tsx"],"exclude": ["node_modules"]
}
解决方法
我是typescript的新手,正在尝试为Typescript构建一个react样板。但无法导入格式为“.tsx”的组件。
我的tsconfig文件如下所示:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}
我的eslintrc看起来像这样:
{
"root": true,
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"@typescript-eslint"
],
"rules": {
"react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
"linebreak-style": 0,
"global-require": 0,
"eslint linebreak-style": [0, "error", "windows"],
"no-use-before-define": "off",
"indent": [2, 2]
}
}