VS Code 从 src 文件夹打开文件答案

【问题标题】：VS Code Open File from src FolderVS Code 从 src 文件夹打开文件
【发布时间】：2020-07-31 12:06:42
【问题描述】：

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

src\components\App\index.js 文件包含大量代码，其中有以下两个import语句：

import App from './App';
import Routes from 'src/routes/Routes';

当我打开上述 index.js 文件时，我想打开导入语句引用的两个文件。您会注意到，第一个 import 语句引用了一个文件路径“./App”，它以一个句点开头，表明它是相对于当前文件的，而第二个 import 语句没有，而是引用一个从根目录开始的文件路径以 'src/' 开头的项目。

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

如果我是从头开始编写代码，我可以通过以相对方式对第二次导入进行编码来消除问题...

import Routes from '../../routes/Routes';

...但我没有那个选项。这是一个巨大的企业应用程序，包含数千个源文件和 300 多个组件，一个典型的文件可能有 20 个导入语句。当我阅读代码时，一个文件中几乎没有完全定义任何内容，我必须导航一个复杂的文件夹结构来查找导致其他代码的代码等等。在左侧的资源管理器窗口窗格中手动导航并不容易。该应用程序是由所有使用 WebStorm 的顾问构建的，可以轻松跳转到引用的代码，我正在尝试在 VS Code 中完成同样的事情。

当我读到关于 jsconfig.json (https://code.visualstudio.com/docs/languages/jsconfig) 的信息时，我以为我在做某事，我创建了以下文件，并将其放在 src 上方的根文件夹中，其中包含 src...

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

...但它没有用。我尝试了使用或不使用“包含”部分。

总之，我不想失去 VS Code 从相对路径打开文件的本机功能，但我想添加它以打开路径以“src/”开头的文件的功能。

【问题讨论】：

在 src 之前不需要/ 吗？假设 src 在项目的根目录中。否则 /path/to/src ?
@Tedskovsky，不。如果 import 语句需要/在 src 之前是真的，那么应用程序将无法正确构建，无法运行，并且顾问会发现并纠正这样的错字在开发过程的早期阶段。

标签： javascript reactjs file visual-studio-code

【解决方案1】：

好的，我想通了。当我发现 jsconfig.json 时，我走在了正确的道路上，但我只需要将起始路径定义为点斜杠。该文件应编写如下，并放在项目的根目录下。

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

【讨论】：