VSCODE可以支持ES6导入的绝对路径参考

Question

而不是相对路径，例如import Foo from '../Foo'，当您拥有较大的项目时可能会变得毛茸茸，我们已经开始使用"绝对"路径，例如 import Foo from '~/utils/Foo'，其中 ~映射到我们的根JS目录（例如 assets/js或什么不是）。

这似乎打破了VSCODE的控制单击导航，我怀疑它所做的所有自动/隐式推动都因为它从根本上无法遵循导入语句。

有没有办法将~映射到VSCODE中的特定文件夹/子文件夹，以便再次工作？

（理想情况下，我们可以有多个映射，例如，一个用于src/main/js中的生产JS代码，一个用于我们的测试JS代码，例如在src/test/js中。）

Answer 1

我不认为这是普通的JavaScript项目的支持，但是它对打字稿项目得到了支持（并且我将详细介绍您也可以使用可用于JS项目的解决方法）。如果您想更好地支持这种功能，我建议您打开功能请求。

要在打字稿项目中启用此功能，请在项目的根部创建一个tsconfig.json文件：

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

paths是您想要的映射。这是有关映射的更多信息。

现在表单的任何进口：

import Foo from '~/utils/Foo'

将解决为

 import Foo from 'assets/js/utils/Foo'

默认情况下只能在打字稿文件中工作，但是您也可以通过将"allowJs": true添加到tsconfig.json中的JS文件中启用它：

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "~/*": [
                "assets/js/*"
            ]
        },
        "allowJs": true
    }
}

这应该为项目中的JavaScript文件启用相同的IntelliSense功能。

在JavaScript情况下，请记住paths配置仅用于工具支持。它不会改变代码的运行时行为，因此您仍然必须确保运行时可以正确解析模块路径'~/utils/Foo'。

再次，如果您希望这种情况得到更好的支持或对如何改善此处的情况有任何想法，请考虑对VSCODE打开功能请求。