javascript - 在 VSCode 中如何正确配置 jsconfig.json 以便使用 index.js 导入的绝对路径工作？

Question

在我的 React 项目中，./ 是根目录，我配置了 webpack 以便我可以从我的 ./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 我正在做以下事情:

从 'components/Button' 导入 Button

上面的编译很好，因为我已经正确设置了我的 webpack。

我希望能够做的是，当我在 alt+click import 语句的单词 Button，当我 alt+click 时将我带到 index.js 文件的内容在 components/Button 部分。

我好像做不到。

截至撰写本文时，我的 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

我认为您的配置是正确的，您犯的唯一错误是在路径 设置中。

试试这个:

{
  "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à ;)