Javascript VS代码从src文件夹打开文件

Javascript VS代码从src文件夹打开文件,javascript,reactjs,file,visual-studio-code,Javascript,Reactjs,File,Visual Studio Code,我无法获取VS代码(对于Windows,但我认为这并不重要)来定位和打开与当前文件无关的文件。我有一个React应用程序,它遵循标准结构,其中src文件夹位于层次结构的顶部。请参阅下面附带的屏幕截图 src\components\App\index.js文件包含大量代码,其中有以下两条导入语句: import App from './App'; import Routes from 'src/routes/Routes'; 打开上面的index.js文件后,我希望打开import语句引用的两

我无法获取VS代码(对于Windows,但我认为这并不重要)来定位和打开与当前文件无关的文件。我有一个React应用程序,它遵循标准结构,其中src文件夹位于层次结构的顶部。请参阅下面附带的屏幕截图

src\components\App\index.js文件包含大量代码,其中有以下两条导入语句:

import App from './App';
import Routes from 'src/routes/Routes';
打开上面的index.js文件后,我希望打开import语句引用的两个文件。您会注意到,第一条导入语句引用了一个文件路径“/App”,该路径以一个句点开头,表示它与当前文件相关,而第二条导入语句没有,而是引用了一个文件路径,该路径从项目的根开始,以“src/”开头

VS代码在第一次导入时没有问题。我右键单击“./App”,从弹出式上下文菜单中选择“转到定义”,它会根据需要在新选项卡中打开文件src\components\App\App.js。但当我右键单击“src/routes/routes”时,VS代码报告“找不到路由的定义”

如果我是从头开始编写代码,我可以通过以相对的方式编写第二个导入来消除这个问题

import Routes from '../../routes/Routes';
……但我没有这个选择。这是一个巨大的企业应用程序,有数千个源文件和300多个组件,一个典型的文件可能有20条导入语句。当我阅读代码时,一个文件中几乎没有完整的定义,我必须浏览一个复杂的文件夹结构来查找导致其他代码的代码,等等。在左侧的“资源管理器”窗格中手动导航并不容易。这个应用程序是由顾问开发的,他们都使用WebStorm,可以很容易地跳转到引用的代码,我正试图在VS代码中完成同样的事情

当我读到关于jsconfig.json()的内容时,我想我已经了解了一些东西,我创建了以下文件,我将其放在src上面的根文件夹中,其中包含src

{
  "compilerOptions": {
    "baseUrl": "src/"
  },
  "include": ["src/**/*", "./"],
  "exclude": ["node_modules"]
} 
…但它不起作用。我试过有没有“包含”部分


总之,我不想失去VS代码从相对路径打开文件的本机功能,但我想增加它也可以打开路径以“src/”开头的文件的功能。

好的,我找到了答案。当我发现jsconfig.json时,我的路径是正确的,但我只需要将起始路径定义为点斜杠。该文件应按如下方式编写,并放置在项目的根目录下

{
    "compilerOptions": {
        "baseUrl": "./"
    },
    "include": [
        "./"
    ],
    "exclude": [
        "node_modules"
    ]
}

在src之前你不需要一个
/
?假设src位于项目的根目录中。否则/path/to/src?@Tedskovsky,否。如果src之前/需要的导入语句是真的,那么应用程序将无法正确构建,无法运行,顾问将在开发过程的早期发现并纠正此类错误。