使用绝对路径而不是相对路径与 JetBrains WebStorm 自动导入反应答案

【问题标题】：React with JetBrains WebStorm auto import with absolute path instead of relative使用绝对路径而不是相对路径与 JetBrains WebStorm 自动导入反应
【发布时间】：2018-03-11 08:58:10
【问题描述】：

我在 React.js 中使用很棒的 JetBrains WebStorm 做各种项目。

每次我输入现有组件名称时，WebStorm 都会自动为我导入它，这很棒，但它是通过基于我正在导入的文件的相对路径来实现的。

看起来像这样：

import vintageAxios from "../../../../services/api/index";

但我希望它是这样的：

import vintageAxios from "services/api/index";

我已经使用NODE_PATH=src/ 变量设置了我的.env.local 文件，我已经使用create-react-app 设置了项目。

编辑：我在进口方面没有问题。我想知道的是是否有办法配置 WebStorm，以便它自动使用绝对路径而不是相对路径进行导入。

【问题讨论】：

标签： reactjs webstorm jetbrains-ide create-react-app

【解决方案1】：

对于任何使用 Typescript 的人。在Editor > Code Style > Typescript中勾选Use paths relative to tsconfig.json选项

【讨论】：

【解决方案2】：

找到它（WebStorm 2017.2），将您的源目录（例如 /src）标记为源根目录（右键单击它以找到它）后，您可以选中此框：

【讨论】：

像魅力一样工作！我需要将我的src 目录标记为“资源根”，它现在正在发挥作用！
如果您使用的是打字稿。这是代码风格/打字稿
这里的建议都不适合我。使用 WebStorm 2020.3，src 标记为资源根，Javascript 代码样式 Use paths relative to the project 未选中，TypeScript 代码样式 Use paths relative to tsconfig.json 未选中，EditorConfig 已禁用。仍将文件导入为../../../../../../../this/drives/me/crazy/。有什么想法吗？
好吧哇，所以我误解了那些复选框。使用相对于 tsconfig.json 的路径是我想要的，以避免每个文件的相对路径。也许不是该设置的最佳措辞，或者我今天只是一个草率的读者。
我遇到了完全相反的问题。我想要相对导入，但 WebStorm 坚持绝对导入。在 WebStorm 中切换设置无效。我的 tsconfig.json 没有指定 baseUrl，但 WebStorm 的行为就像它一样。