В основном я пытаюсь сократить импорт:
структура папок
- app
---- styles
----------- package.json -> {"name": "styles"}
----------- index.ts -> contains all my styles
В коде
import {colors} from 'styles';
Это компилируется и работает на устройстве.и симулятор, но vscode не может разрешить путь и выдает ошибку «Cannot find module 'styles'».Теперь я не уверен, если это vscode или eslint проблема.
Моя текущая настройка:
package.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"]
}
}
},
};
styles / 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';
Есть ли у кого-нибудь проблема?Спасибо за помощь!