配置原因:

在使用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打开。(不要有与这个项目无关的文件),不然@路径提示将失效

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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐