如何告诉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"

您可以在此处找到有关这些配置选项的更多详细信