vscode «не удается найти модуль» в папках «namespaced» (React-N + typcript + eslint) - PullRequest
1 голос
/ 14 мая 2019

В основном я пытаюсь сократить импорт:

структура папок

- 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';

Есть ли у кого-нибудь проблема?Спасибо за помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...