В VSCode, как правильно настроить jsconfig.json для абсолютных путей с импортом index.js для работы?

Question

В моем проекте React, где ./ является корневым каталогом, я настроил веб-пакет так, чтобы я мог импортировать любой файл из моего каталога ./src.

Например, рассмотрим следующую структуру каталогов:

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

, где src/components/Button/index.js содержит только это:

export { default } from './Button';

Теперь скажемЯ создаю еще один компонент в src/components/NewComponent, который структурирован аналогично src/components/Button, но внутри моего NewComponent.jsx я делаю следующее:

import Button from 'components/Button'

Выше компилируется просто отличнопотому что я правильно настроил свой веб-пакет.

То, что я хотел бы сделать, - это чтобы VSCode смог привести меня к определению Button компонента, когда я alt+click наслово Button оператора import и приведу меня к содержимому файла index.js, когда я alt+click в части components/Button.

Кажется, я не могу этого сделать.

My jsconfig.json на момент написания статьи было следующим:

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

И, если быть точным, соответствующая часть моей конфигурации webpack:

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']
  },
....

Answer 1

Я думаю, что ваша конфигурация верна, единственная ошибка, которую вы допустили, - настройка path .

Попробуйте:

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

или просто введите import Button from 'src/components/Button'

после этого вновь открыть проект et voilà;)