如何在VSCode中智能别名模块路径

Question

我希望VSCode为IntelliSense the module path，因此我可以通过单击来访问它。

例如，在配置jsconfig.json之后，我可以通过导入其全局路径来访问./src/styled/index。

但是我不知道如何使用别名@styles

// VSCode Intellisene Works
import { mixins, theme } from 'styles';

// VSCode Intellisene Doesn't work
import { mixins, theme } from '@styles';

我当前的jsconfig.json：

{
  "compilerOptions": {
    "baseUrl": "./",
    "jsx": "react",
    "paths": {
      "@styles": ["src/styles/index"]
    }
  }
}

Answer 1

在 settings.json 文件中，添加这一行：

"typescript.preferences.importModuleSpecifier": "non-relative"

如果删除了这个属性，那么丑陋的相对自动导入是默认选项。如果您当前正在使用 JS，只需将 'typescript' 更改为 'javascript'。要了解有关此设置选项的更多信息，只需像这样将鼠标悬停在其上：

Answer 2

似乎我不得不重启vscode，这是jsconfig.json文件的示例供参考：

{
  "compilerOptions": {
    "baseUrl": "./",
    "jsx": "react",
    "paths": {
      "@styles": ["src/styles/index"],
      "@fonts": ["src/fonts/*"],
      "@components/*": ["src/components/*"],
      "@config": ["src/config/index"],
      "@content": ["src/content"],
      "@images": ["src/images"],
      "@pages": ["src/pages"],
      "@utils/*": ["src/utils/*"]
    }
  }
}