VSCode插件Path Autocomplete小技巧

曾经介绍过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,

这样的话也能解决重复提示的问题，固然缺点是，其余文件类型就没法解决了。

相关阅读：

• Folders are duplicated on sass import statement
• multiple suggesion in js files失效

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

快速跟踪文件

抱歉，理论上来讲这个是VSCode内置的取代该插件的方案，可是我老是发现不太好用。

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

相关阅读

关于VScode其余技巧，欢迎访问：

• 高效前端开发 - Visual Studio Code
• VSCode使用中CPU占用率异常暴增太高缘由
• VSCode安装后，已装中文包仍是显示英文的问题
• VSCode格式化代码功能失效的bug解决方法
• VSCode下让CSS文件完美支持SCSS或SASS语法方法
• VSCode几款FTP插件使用总结

😜😜😳😙😙😙😱