如何让 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.xml 文件。使用转到定义：

它让我进入进口申报。我无法跳转到那个文件。这很难管理，因为我们有数十个组件和属性在其中移动。能够通过转到每个定义快速“向下”导航组件堆栈将是令人麻木的真棒。

Answer 1

如果您有导入别名，通过 webpack 或 babel ，您可以jsconfig.json在paths.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>路径或导入路径来导航到它。