VSCode插件Path Autocomplete小技巧

Update 2020年09月21日

最近发现Path Autocomplete有点小问题,我在官方issues提了一下,虽然可以解决,但是我最终还是换回了老牌插件Path Intellisense,之前之所以没有用这个老牌插件是因为作者多年没更新了,不过今年作者发力,开始更新了,下文提供的方案,该插件基本也能实现。可以尝试一下噢。

上面提到的issue:Duplicate paths in HTML file,大家可以参考下。

VSCode很多内容都有时效性,仅供参考,以下是原文。


曾经介绍过Path Autocomplete是一款非常不错的VSCode插件。当然出了最基本的路径补全提示,还有些高级技巧和使用中可能遇到的小问题,在此和大家分享下。

映射目录

当你项目中的Webpack使用了resolve.alias,webpack.config.js配置如下:

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

那么项目之前引入的一个文件的方法假设是:

import Utility from '../../utilities/utility';

现在就可以写成:

import Utility from 'Utilities/utility';

问题来了,当你输入Utilities/的时候,编辑器根本不知道这里面有什么文件,无法实现补全提示。

这时候,只需要在这个项目添加一个插件的配置就可以了,配置如下:

{
  "path-autocomplete.pathMappings": {
    "Utilities": "${folder}/src/utilities/",
  }
}
${folder}表示项目根目录,如果你的项目和示例略有不同,请根据具体情况修改。

这样是不是很方便啊,同理很多脚手架或框架(比如Nuxt.js)自带了这种类似的依赖关系,都是可以通过插件的pathMappings设置来更好的写代码的。

该功能示例在官方文档Options - pathMappings,也有,可以参考。

出现重复文件和目录补全提示

比如,你可能会遇到路径补全提示中出现重复的目录名称或者是文件,如下图:

重复的目录和文件

那我也是尝试关闭VSCode自带的补全功能结果没找到。后来仔细阅读了插件文档,google相关信息,总结了下:

设置插件选项

该插件提供了一个选项path-autocomplete.ignoredFilesPatter,你可以通过添加一行设置如下:

"path-autocomplete.ignoredFilesPattern": "**/*.{js,ts,scss,css}"

参阅:Path Autocomplete Tips

意思是匹配到所有的js、scss、css、ts文件时,path-autocomplete将被忽略。

设置VSCode内置选项

在现有版本的VSCode上,是有两个选项关闭js、ts的路径提示的,我们可以通过关闭它们,达到目的:

"javascript.suggest.paths": false,
"typescript.suggest.paths": false,

这样的话也能解决重复提示的问题,当然缺点是,其他文件类型就无法解决了。

相关阅读:

总的来说,推荐使用第一种设置插件选项来解决这个问题。

快速跟踪文件

抱歉,理论上来说这个是VSCode内置的取代该插件的方案,但是我总是发现不太好用。

理论上,进行了jsconfig.json配置,详细可阅读官方说明,也可以达到映射目录的能力,并且,根据插件内的这段Configure VSCode to recognize path aliases描述来看,他是可以解决文件关联打开的,但是我反复测试了好久,都无法正常实现。原因不明,有兴趣的朋友也可以试试这个哦~

相关阅读

关于VScode其他技巧,欢迎访问:

😜😜😳😙😙😙😱


我的笔记
个人学习笔记

喜欢玩游戏听歌写东西 ฅʕ•̫͡•ʔฅ

899 声望
70 粉丝
0 条评论
推荐阅读
PostCSS学习指南终结篇
2021年12月07日:注意这是一篇发布于2018年的老文章,因网友提到上篇文章有个链接失效的问题,故将当时写的文章迁移过来(文章之前存于上家公司的FE内部提交,离职已久,正好借机迁移,避免丢失,也算是终结这几...

whidy1阅读 1.1k

VSCode 格式化哲学
当我们说「团队需要统一的代码样式」,大家都没有什么反对意见;但当问题变为「统一成什么样式?」时,大家的声音就嘈杂了起来。人们对于特定的编码方式很抵触,没有人喜欢花时间这样写代码,没人愿意接受别人的...

Cheri2阅读 629

VS Code For Web 深入浅出 -- Server 模块设计篇
在了解了 VS Code 的通信机制后,我们可以着手分析 VS Code Server 中各模块的实现以及设计思路了。<!-- more -->VSCode Server 模块设计通过之前的介绍我们可以了解到,VS Code 的能力是前后端分离的,这...

Duang1阅读 1.6k

VSCode For Web 深入浅出 -- 依赖注入设计
在阅读 VSCode 代码的过程中,我们会发现每一个模块中都有大量装饰器的使用,用来装饰模块以及其中依赖的模块变量。这样做的目的是什么呢?在这一篇中我们来详细分析一下。

Duang2阅读 1.7k

Mybatis源码-插件的使用和原理
Mybatis中的插件又叫做拦截器,通过插件可以在Mybatis某个行为执行时进行拦截并改变这个行为。通常,Mybatis的插件可以作用于Mybatis中的四大接口,分别为Executor,ParameterHandler,ResultSetHandler和Stateme...

半夏之沫1阅读 848

vscode & git:如何快速找回误删的文件
今天一时手误,在 vscode 的远程服务器中,工程下所有未提交的文件,在切换分支的时候,执行了 discard all changes,所有文件在 vscode、Finder、Trash 中都没有找到。

松宝写代码阅读 1.3k

封面图
TypeScript 4.9 发布!
TypeScript 是一种通过添加类型和类型检查构建在 JavaScript 之上的语言。类型可以描述诸如对象的形状、如何调用函数以及属性是否可以为 null 或 undefined 之类的东西。TypeScript 可以检查这些类型,以确保我们...

微软技术栈阅读 1.1k

封面图

喜欢玩游戏听歌写东西 ฅʕ•̫͡•ʔฅ

899 声望
70 粉丝
宣传栏