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插件使用總結

😜😜😳😙😙😙😱