翻譯 原文作者:James Quick 原文位址:https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development
@
目錄
- 1. Debugger for chrome
- 2. Javascript (ES6) Code Snippets
- 3. ESLint
- 4. Live server
- 5. Bracket Pair Colorizor
- 6. Auto Rename Tag
- 7. Quokka
- 8. Path Intellisense
- 9. Project Manager
- 10. Editor Config
- 11. Sublime Text Keymap
- 12. Browser Preview
- 13. Git Lens
- 14. Polacode
- 15. Prettier
- 16. Better Comments
- 17. Git Link
- 18. VS Code Icons
- 19. Material Icon Theme
- 20. Settings Sync
- 21. Better Align
- 22. VIM
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIiclRnblN2XjlGcj8zZuBnL4ITM2QTMzIjMwMTMxAjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
相信我,調試JavaScript不僅僅是寫 console.log() (雖然這種方式應用最多)。Chrome内置了一些功能,可以擁有更好的調試體驗。這個插件能讓你在vs code裡使用所有(或者幾乎所有)這些調試功能。
如果你想了解更多,你可以閱讀:
Debugging JavaScript in Chrome and Visual Studio Code.
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
我喜歡Snippets插件。我覺得沒有必要反複輸入同一段代碼。這個插件為你提供了流行的(ES6)JavaScript代碼片段。
注…如果你沒有用es6javascript特性——趕緊用起來吧!
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
是否想編寫更好的代碼? 是否需要整個團隊使用一緻的格式? 安裝ESLint。 這個插件可以配置為自動設定代碼格式以及帶有錯誤或警告的“yell(提示)”。 VS Code通過合适的配置,可以向你展示這些提示。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
在代碼編輯器中進行更改,切換到浏覽器,然後重新整理以檢視更改。 那是開發人員無休止的循環,但是如果你在進行更改時浏覽器會自動重新整理會怎樣呢? 這就是Live Server的用武之地!
它還在本地伺服器上運作你的應用程式。 有些事情隻有在伺服器裡運作應用程式時才能測試,是以這也是個利好之處。
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
括号阻止開發人員活着的禍害。 使用大量嵌套代碼,幾乎不可能确定哪些括号彼此比對。 Bracket Pair Colorizor(如你所料)為括号比對顔色,以使代碼更具可讀性。 相信我,你想要!
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
是否需要重命名HTML中的元素? 好了,使用“Auto Rename Tag”,你隻需要重命名開始或結束标簽,其他标簽将自動重命名。 簡單但有效!
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
需要一個快速的地方來測試一些JavaScript嗎? 我曾經習慣在Chrome中打開控制台,然後在其中輸入一些代碼,但缺點很多。 Quokka在VS Code中為你提供了一個JavaScript(和TypeScript)暫存器。 這意味着你可以在自己喜歡的編輯器中測試一段代碼!
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
在大型項目中,記住特定的檔案名和檔案所在的目錄可能會很麻煩。 此插件将為你提供智能提示。 當你開始在引号中輸入路徑時,你将看到目錄和檔案名的智能提示。 這樣可以避免你在檔案浏覽中花費大量時間:)
https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager
我讨厭的一件事是在VS Code中的項目之間切換。 每次我必須打開檔案資料總管并在計算機上找到項目時。 但這随Project Manager 的應用而改變。 使用此插件,你可以在項目的側邊菜單中打開一個額外的菜單。 你可以在項目之間快速切換,儲存收藏夾或從檔案系統自動檢測Git項目。
如果你開發多個不同的項目,那麼這是保持組織狀态和提高效率的好方法。
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
Editor Config是少數幾種編碼樣式的标準,在主要文本編輯器/ IDE中都得到支援。 運作方式如下如下。 你将配置檔案儲存在你的編輯器支援的存儲庫中。 在這種情況下,你必須為VS Code添加擴充名,以使其遵守這些配置檔案。 設定起來超級容易,非常适合團隊項目。
https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings
你是Sublime的狂熱使用者,不願意切換到VS Code嗎? 通過更改所有快捷方式以比對Sublime的快捷方式,此擴充程式将使你切換得沒有任何感覺。 現在,你有什麼理由不進行切換?
https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview
我喜歡 Live Server extension 擴充(上文提到的),但就便利性而言,這個擴充更進一步。它為您提供了VS Code内部的實時重新加載預覽。 無需再檢視浏覽器即可看到很小的變化!
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
git插件一大堆,但是其中一個功能最強大,最多。 您會得到有關警告的資訊,行和檔案的曆史記錄,送出搜尋等等。 如果你需要有關Git工作流程的幫助,請從這個插件開始!
https://marketplace.visualstudio.com/items?itemName=pnp.polacode
你知道你在部落格和推特中看到的那些漂亮的代碼截圖嗎? 好吧,很可能它們來自Polacode。 使用起來超級簡單。 将一段代碼複制到剪貼闆,打開擴充名,粘貼代碼,然後單擊儲存圖像!
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
不要花時間格式化代碼...它做了。 前面,我提到了ESLint,它提供格式化和檢查。 如果你不需要棉絨檢查,那麼選擇Prettier。 它非常容易設定,可以配置為在儲存時自動格式化代碼。
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
此插件對各種類型的注釋進行不同顔色标記,以賦予它們不同的含義,并在其餘代碼中突出。 我一直在用這個來做提示。 很難忽略一個橙色的大提示,告訴我我有一些未完成的工作要做。
還有用于問題,警報和強調的顔色代碼。 你也可以添加自己定義的!
https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink
如果你想在Github中檢視正在處理的檔案,則這個插件适合你。 安裝後,隻需右鍵單擊檔案,你将看到在Github中打開檔案的選項。 如果你不使用Git Lens插件的話,這個插件對于檢查曆史記錄,分支版本等非常好用。
https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
你知道可以自定義VS Code中的圖示嗎? 如果你檢視設定,将會看到“檔案圖示主題”的選項。 從那裡,你可以從預安裝的圖示中選擇或安裝圖示包。 這個插件為你提供了一個非常可愛的圖示包,已有1100萬人使用!
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
你是Google Material 設計的粉絲嗎? 那麼,檢出這個“ Material主題”圖示包。 有數百種不同的圖示,它們看起來很棒!
https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
開發人員(包括我自己)花費大量時間自定義開發環境,尤其是文本編輯器。 使用“Settings Sync”插件,你可以在Github中儲存設定。 然後,可以使用一個指令将它們加載到任何新版本的VS Code。
https://marketplace.visualstudio.com/items?itemName=wwm.better-align
如果你是那種喜歡代碼中完美對齊的人,那麼你需要Better Align。 你可以對齊多個變量聲明,尾随注釋,代碼段等。沒有比安裝并嘗試一下更好的辦法來了解這個插件的過人之處了!
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim
你是VIM深度使用者嗎? 如果是的話,恭喜,你所掌握所有VIM騷操作,可以直接在VS Code中使用它。 我個人并不善于此道,但是我知道使用VIM發揮其潛力時會産生多麼瘋狂的生産力,進而為你提供更多的功能。