In my React project, where ./ is the root directory, I have configured webpack so that I can import any file from within my ./src directory.

For example, consider the following directory structure:

./
|-src/
| |-ponents/
| | |-Button/
| | | |-index.js
| | | |-Button.jsx

where src/ponents/Button/index.js contains just this:

export { default } from './Button';

Now let's say I create another ponent in src/ponents/NewComponent, which is structured similarly to src/ponents/Button, but inside my NewComponent.jsx I am doing the following:

import Button from 'ponents/Button'

The above piles just fine because I have set up my webpack correctly.

What I would like to be able to do, is for VSCode to be able to take me to the definition of the Button ponent when I alt+click on the word Button of the import statement, and take me to the index.js file's contents when I alt+click on the ponents/Button part.

I cannot seem to be able to do that.

My jsconfig.json is the following, as of the time of writing:

{
  "pilerOptions": {
    "target": "es6",
    "module": "monjs",
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "build", "dist"]
}

And, for good measure, the relevant part of my webpack config:

const PATHS = {
  node_modules: path.resolve(__dirname, 'node_modules'),
  src: path.resolve(__dirname, 'src'),
  style: path.resolve(__dirname, 'style'),
  assets: path.resolve(__dirname, 'assets'),
  test: path.resolve(__dirname, 'test')
};

module.exports = {
  resolve: {
    modules: [
      path.resolve(__dirname),
      PATHS.node_modules,
      PATHS.src,
      PATHS.style,
      PATHS.assets,
      PATHS.test
    ],
    mainFiles: ['index', 'index.js', 'index.jsx', 'index.scss'],
    extensions: ['.jsx', '.js', '.json', '.scss', '.css']
  },
....

In my React project, where ./ is the root directory, I have configured webpack so that I can import any file from within my ./src directory.

For example, consider the following directory structure:

./
|-src/
| |-ponents/
| | |-Button/
| | | |-index.js
| | | |-Button.jsx

where src/ponents/Button/index.js contains just this:

export { default } from './Button';

Now let's say I create another ponent in src/ponents/NewComponent, which is structured similarly to src/ponents/Button, but inside my NewComponent.jsx I am doing the following:

import Button from 'ponents/Button'

The above piles just fine because I have set up my webpack correctly.

What I would like to be able to do, is for VSCode to be able to take me to the definition of the Button ponent when I alt+click on the word Button of the import statement, and take me to the index.js file's contents when I alt+click on the ponents/Button part.

I cannot seem to be able to do that.

My jsconfig.json is the following, as of the time of writing:

{
  "pilerOptions": {
    "target": "es6",
    "module": "monjs",
    "baseUrl": "./",
    "paths": {
      "src/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "build", "dist"]
}

And, for good measure, the relevant part of my webpack config:

const PATHS = {
  node_modules: path.resolve(__dirname, 'node_modules'),
  src: path.resolve(__dirname, 'src'),
  style: path.resolve(__dirname, 'style'),
  assets: path.resolve(__dirname, 'assets'),
  test: path.resolve(__dirname, 'test')
};

module.exports = {
  resolve: {
    modules: [
      path.resolve(__dirname),
      PATHS.node_modules,
      PATHS.src,
      PATHS.style,
      PATHS.assets,
      PATHS.test
    ],
    mainFiles: ['index', 'index.js', 'index.jsx', 'index.scss'],
    extensions: ['.jsx', '.js', '.json', '.scss', '.css']
  },
....

• javascript
• reactjs
• import
• path
• visual-studio-code

Share Improve this question Follow asked Oct 2, 2018 at 21:49 Dimitris KaragiannisDimitris Karagiannis 9,39699 gold badges4545 silver badges7474 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

I think your configuration is correct the only mistake you've made is in the path setting.

Try this:

{
  "pilerOptions": {
    "target": "es6",
    "module": "monjs",
    "baseUrl": "./",
    "paths": {
      "ponents/*": ["./src/ponents/*/index"]
    }
  },
  “Include”: [“./src/**/*”],
  "exclude": ["node_modules", "build", "dist"]
}

or just type import Button from 'src/ponents/Button'

after this close-reopen the project et voilà ;)