考虑一个典型的 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。使用转到定义:
它把我送到进口报关处。我无法跳转到那个文件。这很难管理,因为我们有数十个组件和属性在它们之间移动。能够通过转到每个定义来快速“向下”导航组件堆栈,这真是太棒了。
最佳答案
如果你有通过 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>
或导入路径以导航到它。
关于javascript - 如何让 Visual Studio Code 导航到 React 组件的源文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58014347/