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

😜😜😳😙😙😙😱