typescript - vscode 在“命名空间”文件夹中“找不到模块”(React-N + typescript + eslint)
问题描述
基本上我想要做的是缩短进口:
文件夹结构
- app
---- styles
----------- package.json -> {"name": "styles"}
----------- index.ts -> contains all my styles
在代码中
import {colors} from 'styles';
这可以在设备和模拟器上编译并运行,但 vscode 无法解析路径并抛出“无法找到模块'样式'”错误。现在我不确定这是 vscode 还是 eslint 问题。
我目前的设置:
包.json
{
"name": "xxx",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.8",
"react-native-gesture-handler": "^1.2.1",
"react-navigation": "^3.9.1",
"react-redux": "^7.0.3",
"redux": "^4.0.1",
"redux-observable": "^1.1.0",
"rxjs": "^6.5.2"
},
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/runtime": "^7.4.4",
"@types/react": "^16.8.17",
"@types/react-native": "^0.57.55",
"@types/react-redux": "^7.0.8",
"@types/redux-logger": "^3.0.7",
"@typescript-eslint/eslint-plugin": "^1.9.0",
"@typescript-eslint/parser": "^1.9.0",
"acorn": "^6.0.0",
"babel-jest": "^24.8.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.2.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.13.0",
"jest": "^24.8.0",
"metro-react-native-babel-preset": "^0.54.0",
"prettier": "^1.17.0",
"react-native-typescript-transformer": "^1.2.12",
"react-test-renderer": "16.8.3",
"redux-devtools-extension": "^2.13.8",
"redux-logger": "^3.0.6",
"typescript": "^3.4.5"
},
"jest": {
"preset": "react-native"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es2017",
"module": "es2015",
"moduleResolution": "node",
"outDir": "build",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"strictFunctionTypes": true,
"rootDir": "app",
"jsx": "react-native",
"sourceMap": true,
"noResolve": false,
"noImplicitAny": false,
"noImplicitReturns": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"allowJs": true,
"types": [
"react",
"react-native",
"jest"
],
},
"exclude": [
"android",
"ios",
"build",
"node_modules",
"__tests__",
"tests",
"babel.config.js",
"main.jsbundle",
"index.android.bundle",
"index.js",
"metro.config.js",
"rn-cli.config.js"
],
"filesGlob": [
"typings/index.d.ts",
"app/**/*.ts",
"app/**/*.tsx",
"locale/i18n.js",
],
"types": [
"react",
"react-native",
"jest"
],
"compileOnSave": false
}
.eslintrc.js
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
parser: '@typescript-eslint/parser', // Specifies the ESLint parser
extends: [
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
'plugin:react/recommended',
'plugin:import/errors',
'plugin:import/warnings',
"plugin:import/typescript"
],
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
ecmaFeatures: {
jsx: true, // Allows for the parsing of JSX
},
},
rules: {
"@typescript-eslint/no-empty-interface": 0
},
settings: {
react: {
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
},
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "bower_components", "app"],
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
},
};
样式/index.ts
export { default as colors } from './colors';
export { default as positioning } from './positioning';
export { default as text } from './text';
export { default as variables } from './variables';
有人提出问题吗?谢谢您的帮助!
解决方案
推荐阅读
- arrays - 在matlab中访问3d矩阵中的多个元素
- javascript - 使用 React-Radium 应用 Safari 特定的样式
- package - 错误:无法从 URL 或路径确定包名称
- android - RecyclerView Gridlayout 项填充其父项
- angularjs - 当模型长度是3的倍数时如何在angularjs中调用函数
- angular - Angular:将模板数据映射到其他演示文稿
- python - Django:作为字典的 SQL 结果
- multithreading - 在线程从未被阻塞的情况下,“线程在 STM 事务中无限期阻塞”
- python - 循环遍历 tif 堆栈并提取像素值的最快方法
- r - Shiny - 点击查看下一个情节