vscode 中，vue import @ 路径提示

@ 路径提示

效果

1. 下载插件 Path Intellisense

名称: Path Intellisense
ID: christian-kohler.path-intellisense
说明: Visual Studio Code plugin that autocompletes filenames
版本: 2.4.0
发布者: Christian Kohler
VS Marketplace 链接: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

2. 修改 vscode 本地配置

在 setting.json 文件加入以下配置

 "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  }

3. 在项目中新建 jsconfig.json 文件

在 jsconfig.json 文件中加入以下配置

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules"]
}

重启 vscode 就可以生效了

注意： Path Intellisense 在 2.3.0 版本只支持js文件，不支持vue文件中提示， 需升级为2.4.0， 或换为 1.4.2 版本