VSCode Intellisense 不适用于 webpack + 别名答案

【问题标题】：VSCode Intellisense does not work with webpack + aliasVSCode Intellisense 不适用于 webpack + 别名
【发布时间】：2021-08-18 19:29:27
【问题描述】：

我有一个使用 babel 别名的项目：

resolve: {
  alias: {
      vue: 'vue/dist/vue.js',
      '@cmp': resolve('src/components'),
      '@service': resolve('src/services'),
      '@scss': resolve('src/assets/styles'),
  }
}

和一个组件：

import someService from '@service/some'

而且 Intellisense 不起作用。与：

import someService from '../../../../service/some'

确实如此。

有什么建议吗？

【问题讨论】：

标签： visual-studio-code vscode-settings

【解决方案1】：

尝试创建jsconfig.json 并配置paths 编译器选项

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "commonjs",
    "paths": {
      "@cmp/*": ["./src/components/*"]
    }
  }
}

您可以找到有关paths 和其他编译器选项here 的更多信息

【讨论】：

很好的解决方案！ FWIW 此解决方案并非特定于 webpack，并且适用于任何* vscode 项目。 *我尝试过的，尤其是 React-Native。
@Johan 它可以工作，但 eslint 抱怨它：Unable to resolve path to module '@components/SocialMedia'.eslint(import/no-unresolved) 什么可以我要摆脱这个吗？我仍然希望 eslint 警告我未解决的路径。
@Johan 我在这里给你加了标签，因为感觉好像我没有在上面的评论中给你加标签。谢谢！
@cbdev420 我不记得对我的 eslint 配置做过任何特定的事情。我确实将我的module 设置为es6。

【解决方案2】：

这对我有用，正如 here 的建议（我希望 @/ 解析为 ./src/）：

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
    }
  },
  "exclude": ["node_modules", "dist"]
}

最小版本，但我也会留下exclude：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
}

【讨论】：

【解决方案3】：

只是添加到 Matt 的答案中，在 TypeScript 项目中，您不需要创建 jsconfig.json 文件，您只需将其添加到您的 tsconfig.json 文件中，vscode 就会将其拾取。

{
    "compilerOptions": {
    ...
        "paths": {
            "@MyAlias/*": ["./myDirectrory/*"]
        }
    }
}

【讨论】：