我的导入路径和单击打开文件有什么问题？

Question

我刚刚开始了一份新工作，因此也开始了新的设置。这并没有什么不同，但由于某种原因，我遇到了与导入路径显示的内容相关的 2 个问题，并且单击文件/组件以打开文件不起作用。

这可能是因为jsconfig 文件吗？：

    {
      "compilerOptions": {
        "checkJs": false,
        "target": "es2017",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./src",
        "paths": {
          "test-utils": ["../jest.config.js"]
        }
      },
      "exclude": ["node_modules", "build"]
    }

---

第 1 期

• 我的导入路径有时显示相对路径，有时不显示。示例 Provider 正确地从 node_modules 导入，但 Checkbox 没有：

    import React from 'react';
    import { Provider } from 'react-redux'; // YES
    import { Checkbox } from '../../../node_modules/antd/lib/index'; // NO

    export default function test() {
      return (
        <Provider>
          <Checkbox />
        </Provider>
      );
    }

所以在 VSCode 中，我检查了我的设置 JavaScript › Preferences: Import Module Specifier。当前设置为auto。如果我将其更改为relative，则看不到任何更改。如果我将其更改为non-relative，则复选框导入更改为：

import { Checkbox } from '../node_modules/antd/lib/index'; 但这仍然不是我对 node_module 导入的期望。

如果我删除 JSConfig，那么 import { Checkbox } 的行为看起来是正确的。但是，我显然是团队中唯一遇到此问题的人。

第 2 期

• 有时单击组件以通过按Command key (⌘) + Click 打开文件不会打开文件，但有时会打开。

    import StatusKey from '../../components/StatusKey'; // (⌘) + Click does not work
    import { columns } from './tableColumns';  // (⌘) + Click works

GIF：http://recordit.co/GKZfRa7emo

但是，如果我将 StatusKey 导入更改为 import StatusKey from 'components/StatusKey/index';，那么它可以工作。

如果我删除了 JSConfig，那么点击 Status 键将与原始导入一起使用。

---

感谢您的洞察力

Answer 1

jsconfig 需要将 "module": "commonjs", 作为 compilerOptions 的一部分