VSCode Intellisense 不适用于 webpack + 别名

Question

我有一个使用 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'

确实如此。

有什么建议吗？

Answer 1

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

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

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

Answer 2

按照建议 here 这对我有用（我希望 @/ 解析为 ./src/）：

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

最小版本，但我也会离开 exclude:

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

Answer 3

补充一下 Matt 的回答，在 TypeScript 项目中您不需要创建 jsconfig.json 文件，只需将其添加到您的 tsconfig.json 文件和 vscode捡起来。

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

VSCode Intellisense 不适用于 webpack + 别名

VSCode Intellisense does not work with webpack + alias

visual-studio-code

vscode-settings