VSCode插件Path-Autocomplete高级技巧

jiezi

5 年前

曾经介绍过 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 上，是有两个选项关闭 js、ts 的路径提示的，我们可以通过关闭它们，达到目的：

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

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

VSCode插件Path-Autocomplete高级技巧

映射目录

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

设置插件选项

设置 VSCode 内置选项

快速跟踪文件

相关阅读