javascript - 如何让 Visual Studio Code 导航到 React 组件的源文件？

Question

考虑一个典型的 ReactJS 文件，例如:

import Popup from 'components/Popup/Popup';

// ...

<Popup
  trigger={
    <SVG src={pinIcon} className={pinClassName} />
  }
  content={pinTooltipText}
  position="bottom center"
  hideOnScroll
  className="popup-xl--hide"
/>

在 VS Code 中，我想转到作为我的组件的文件，因此跳转到 components/Popup/Popup。使用转到定义:

它把我送到进口报关处。我无法跳转到那个文件。这很难管理，因为我们有数十个组件和属性在它们之间移动。能够通过转到每个定义来快速“向下”导航组件堆栈，这真是太棒了。

Answer 1

如果你有通过 webpack 或 babel 导入别名，你可以创建一个 jsconfig.json file与 paths property in the compilerOptions .

这是下一个项目的 jsconfig.json配置为 @/ src/ 的别名目录。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "exclude": [
    "node_modules",
    "dist",
    ".next",
    ".cache",
    "bundles",
    "out"
  ],
  "include": [
    "pages/**/*",
    "src/**/*",
  ]
}

可能需要重新启动 VS Code，然后您应该可以CTRL+单击任何 <Component>或导入路径以导航到它。