在Vs-Code中配置“@”路径提示的插件

---

前言

在使用VS-Code打开VUE时，想使用@语法从src根目录导入一个文件的路径，默认情况下是无法自动提示下一级的路径的，如下图所示。这样很容易产生路径书写的错误。

---

一、下载Path Autocomplete

首先，在vs-code的应用商店中找到有一个Path Autocomplete的插件，作者是Mihai Vilcu。该插件可以帮助我们解决路径的提示问题。但是该插件是不能直接使用的，需要进行配置。

---

二、找到settings.json

配置的关键就是找到settings.json这个文件，下面提供两种方法找到该文件的位置。

2.1 方式一：通过命令面板

（1）在左下角找到命令面板，快捷键为Ctrl+Shift+P

（2）在上方搜索栏输入settings.josn，选择第二个用户设置。就可以打开setting.json文件。

2.2 方式二

（1）在左下角找到设置，快捷键是Ctrl+，

（2）找到右上角的打开设置按钮，点击后也可以直接打开settings.json文件。

---

三、在settings.json中配置

将以下内容粘到settings.json配置文件中。

	//导入文件时是否携带文件的拓展名
    "path-autocomplete.extensionOnImport": true,
    //配置@的路径提示
    "path-autocomplete.pathMappings": {
        "@":"${folder}/src"
    },

---

四、结果展示

再次使用@，发现可以自动提示找到下一级的目录。