在VScode中配置@路径提示

配置原因：

在使用vue-cli开发（或者webpack工具开发）过程中，由于在输入路径的时候没有提示，既影响开发的速度，又无法判断输入的路径是否正确，因此我们可以在vscode中配置@路径提示

配置方法：

1、在使用webpack工具进行项目的开发时（目前已经很少用到）

@默认指向的就是 src目录
这个配置的意思就是 @ 代表的就是 src这个目录

在webpack.config.js文件中配置如下程序

module.exports ={
  resolve: {
    alias: {
      // 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
      '@': path.join(__dirname, './src/')
    }
  }
}

2、在使用vue-cli(脚手架)进行项目的开发时（vue项目使用）

第一步：先安装插件 Path Autocomplete 插件

第二步：安装成功后，在settings.json文件中配置文件

settings.json文件在   左上角-文件-首选项-设置-应用程序-设置同步 里面

也可点击设置中的符号

第三步：将以下代码复制到settings.json的括号中的第一行就可以了

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

   重启vscode，这样@路径提示就配置好了

注意：开发的那个项目，就定位到那个项目，然后用vscode打开。（不要有与这个项目无关的文件），不然@路径提示将失效

 如果有问题，欢迎大家评论区讨论，文章对你有用，给正在学习前端的小陈点个赞吧~~~