我如何告诉 Visual Studio 代码关于相对路径

Question

我正在使用 create-react-app 工具创建一个 react-app，因此它使用 webpack 进行模块捆绑。具有以下目录结构

-my-app
--node_modules
--src
---components
----somecomponent
-----SomeComponent.jsx
----someothercomponent
-----SomeOtherComponent.jsx
----main.js
----public

为了避免许多 ../../（相对路径的点斜线），我设置了一个 NODE_PATH=./src，如下所示 package.json

"scripts": {
    "start": "NODE_PATH=./src react-scripts start",
    "build": "NODE_PATH=./src react-scripts build",
}

所以我现在可以像这样导入我的模块

import SomeComponent from "/components/somecomponent/SomeComponent"

因此即使更改目录结构也不会经常破坏我的代码。但是有了这个，我的 VSCode 无法识别路径，因此不会显示智能感知，我该如何解决它？

Answer 1

我致力于 VSCode 的 JS 和 TS 支持。对于这个用例，我认为您有几个选择：

在项目的根目录中创建一个 jsconfig.json 并使用 baseUrl:

{
    "compilerOptions": {
        "baseUrl": "./src"
    }
}

这应该允许导入，例如：

import SomeComponent from "components/somecomponent/SomeComponent"

或者，使用 paths 属性:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "~/*": ["./src/*"]
        }
    }
}

这将允许导入以下形式：

import SomeComponent from "~/components/somecomponent/SomeComponent"

您可以找到有关这些配置选项的更多详细信息here

我如何告诉 Visual Studio 代码关于相对路径

How do I tell Visual Studio Code about the relative path

visual-studio-code

vscode-settings