VSCode通过jsconfig.json设置Webpack别名引入智能提示

在 vue 项目中，vue.config.js 设置 alias 别名来引入文件，在使用VSCode时发现别名路径智能提示不能使用

configureWebpack: {
    resolve: {
    alias: {
        "@": resolve("src"),
        "@i": resolve("src/api"),
        "@c": resolve("src/components"),
        "@a": resolve("src/assets"),
        "@s": resolve("src/styles"),
        "@u": resolve("src/utils"),
        "@v": resolve("src/views")
        }
    }
}

项目目录

├── src
│   ├── api
│   ├── componests
│   │   └── HelloWorld.vue
│   ├── assets
│   ├── styles
│   ├── utils
│   └── views
└── jsconfig.json

在项目根目录下新建一个 jsconfig.json 文件

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@i/*": ["src/api/*"],
      "@c/*": ["src/components/*"],
      "@a/*": ["src/assets/*"],
      "@s/*": ["src/styles/*"],
      "@u/*": ["src/utils/*"],
      "@v/*": ["src/views/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

注意：配置完成之后重启VSCode

示例：在使用组件 HelloWorld.vue 的时候智能提示可以使用。

// @c is an alias to src/components

import HelloWorld from "@c/HelloWorld.vue";