近期遇到的一个痛点，在 .ts 文件里尝试 import .vue 文件的时候，编辑器并没有给出 .vue 文件的提示，所以不得不手动写全，不过还是觉得太麻烦了，后来找到了 VSCode 有两个插件可以解决这个问题。
- Path Intellisense（下文简称为 Path_I）
- Path AutoComplete（下文简称为 Path_A）
插件选择
捣鼓一下午最后选择了 Path AutoComplete，理由如下：
- 能够同时和 TS 拓展插件的路径自动补全一起工作（Path_A 不行）
- 可以在任何类型的文件内工作
- 有更大的自定义的配置空间（比 Path_A 更多）
Path_A 的默认配置是不带文件拓展名，而且会在所有文件生效，所以同时也导致了一些路径推荐重复的问题，另外如果项目配置的路径别名的话，也需要同步相关配置。（Path_A 的文档中有提到会读取 tsconfig.json 的配置，但是好像并没有同步到路径别名）
自定义配置
为了让 Path_A 插件和 TS 还有 Volar 两个插件可以友好合作，所以需要一些额外的配置。
相关配置如下：
{
// 在 setting.json 中
...
"typescript.suggest.paths": true, // 启用 ts 插件的路径补全推荐
"path-autocomplete.extensionOnImport": true, // 导入时保留文件拓展名
"path-autocomplete.pathMappings": {
"@": "${folder}/src" // 设置路径别名 ${folder} 代表项目的根目录路径
},
"path-autocomplete.enableFolderTrailingSlash": false, // 文件夹末尾带左斜杠
"path-autocomplete.excludedItems": { // 忽略相关的配置，为了配置 ts 插件使用
"**/{*.js,*.ts}": {
"when": "**/{*.js,*.ts}",
}, // 在 js 和 ts 文件中时忽略掉 js 和 ts 文件的推荐
"**": {
"when": "**/{*.js,*.ts,*.vue}",
"isDir": true
}, // 在 js、ts、vue 文件中忽略所有文件夹
"**/*": {
"when": "**/*.vue",
"context": "(src)|(@import).*"
}, // 在 vue 文件中，如果使用 src 或者 @import 时忽略所有文件（避免和 Volar 插件的推荐重复）
"**/{*.vue,*.ts,*.js}": {
"when": "**/*.vue",
"context": "import.*"
} // 在 vue 文件中，如果使用 import 时时忽略vue、ts、js文件（避免和 Volar 插件的推荐重复）
}
}
最终效果
现在不仅有 vue 文件的路径补全，其实几乎任何类型文件能够自动补全了，包括 png/scss/less/svg 等等的任何文件。
我真棒！😋
参考文档
更多的配置可以看插件的文档。
