not resolving node_modules, aliases or relative imports in vscode

[davemcorwin]

.babelrc

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": [
          "."
        ],
        "alias": {
          "styles": "./styles",
          "components": "./components",
          "lib": "./lib",
          "pages": "./pages",
          "gql": "./gql"
        },
        "cwd": "babelrc"
      }
    ],
...
}

.eslintrc.yml

---
  env:
    browser: true
    node: true
    es6: true
  parser: babel-eslint
  parserOptions:
    sourceType: module
    ecmaFeatures:
      experimentalObjectRestSpread: true
      jsx: true
      impliedStrict: true
  plugins:
    - react
  extends:
    - eslint:recommended
    - plugin:react/recommended
    - plugin:import/errors
    - plugin:import/warnings    
  settings:
    import/resolver: babel-module

any thoughts? something I am doing wrong?

[ItsTarik]

glad that the config worked for all of you! @jefrydco i just combined some configs from many places, that was kind of mysterious.

[jieliu218]

@ItsTarik it

settings: { 'import/resolver': { 'babel-module': { root: ['./src'], }, }, }, This part is userful

[aprilmintacpineda]

I have something like _screens as my alias, but eslint complains that it's not found

on .eslintrc.js

settings: {
  react: {
    version: 'detect'
  },
  'import/ignore': ['react-native'],
  'import/resolver': {
    'babel-module': {
      alias
    }
  }
}

import aliases:

module.exports = {
  _components: './src/components',
  _screens: './src/screens',
  _fluxible: './src/fluxible',
  _graphql: './src/graphql',
  _root: './src'
};

on babe.config.js

const alias = require('./importAliases');

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./src'],
        alias
      }
    ]
  ],
  env: {
    production: {
      plugins: ['react-native-paper/babel']
    }
  }
};

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": [
        "src/*"
      ],
    }
  },
}