面向 Web 開發人員的 16 個頂級 VS Code 擴展
已發表: 2020-02-12Microsoft Visual Studio Code (VS Code) 是軟件開發人員的頂級代碼編輯器之一。 自發布以來，它的受歡迎程度激增，不僅是因為它提供了穩定的平台，還因為微軟內置的可擴展性。 擴展市場是一個豐富的附加組件和功能，允許開發人員將 VS Code 自定義到他們夢想的開發環境中。 我們想分解一些當今可用的頂級 VS Code 擴展，以便您不會錯過任何一個。
1. Sublime Text Keymap 和設置導入器
在我們的列表中名列前茅的是標題恰當的 Sublime Text Keymap 和 Settings Importer。 如果標題不夠描述，此擴展程序可讓您引入現有的 Sublime Text 鍵盤映射和設置，以便您可以無縫過渡到使用 VS Code 作為默認設置。 由於有這麼多人喜歡 Sublime 並在它上面花費了數年時間，因此讓 VS Code 保留從該編輯器那裡獲得的肌肉記憶是很有意義的。
2. JavaScript (ES6) 代碼片段
當您一遍又一遍地重複相同的片段時，鍵入 JavaScript（或任何代碼）可能會變得很麻煩。 此擴展通過讓您基本上為常用代碼片段編寫快捷方式來幫助緩解這種情況。 觸發時，代碼段只是替換文本並直接插入到文檔中。
3. 支架對著色器 2
無論您編寫哪種語言，括號都可能是其中的主要部分。 保持它們筆直可能會讓人頭疼。 但是使用這個 VS Code 擴展，你可以對匹配的對進行顏色編碼，以幫助緩解這個痛點，並努力使代碼本身工作——而不是編輯器。
4. ESLint
在許多方面，ESLint是JavaScript中的棉短絨。 捕獲錯誤並立即為您提供反饋和警告對於保持團隊代碼清潔至關重要，在 JS 中確實沒有比 ESLint 更好的方法來做到這一點。 我們強烈建議盡快安裝這個。
5. 項目經理
VS Code 經常出現的一個問題是如何在不同項目之間進行交換。 默認情況下，流程並不是最直觀的。 因此，項目管理器通過在側欄中為您提供一個菜單來解決該問題，您可以使用該菜單來保存不同的文件夾和 Git 項目，以便在它們之間輕鬆切換。 這與其說是對編輯器的改進，不如說是對生活質量的提升。
6. 瀏覽器預覽
Web 開發中最令人討厭的元素之一是在不同的瀏覽器中加載和刷新您的內容以進行測試。 瀏覽器預覽通過在新的 Chrome 進程中為您提供 VS Code 內部工作的可靠預覽，有助於限制您需要執行此操作的數量。
7. 更漂亮
我們都想要更漂亮的代碼。 所以我們可能都應該安裝 Prettier 來為我們處理。 該描述將 Prettier 描述為“有意見的代碼格式化程序，它通過解析您的代碼並使用自己的規則重新打印它來強制執行一致的樣式，這些規則考慮了最大行長度，並在必要時包裝代碼。” 您可能不想將它用於每種語言或項目，因此有很多配置設置，因此您可以根據自己的喜好對其進行自定義。
8. gitlink
我們喜歡 gitlink 因為它很簡單。 雖然有很多 Git 擴展，但 gitlink 的一個特點是它很簡單，而且只做一件事。 它做得很好。 只需突出顯示一段代碼，gitlink 就會將您帶到該特定代碼段的在線存儲庫。 無論遠程託管在何處，快速轉到您的存儲庫都非常有用。
9.更好的評論
註釋您的代碼是開發人員可以擁有的最重要的習慣之一。 更重要的是，很好地評論你的代碼是一項應該在每個計算機科學課堂和編碼訓練營中教授的技能。 也就是說，Better Comments 是每個人都需要的 VS Code 擴展之一，因為如果您相信這個名字，它會讓您在代碼中留下更好的註釋。 借助可讓您區分問題、感嘆號、註釋掉的代碼、查詢、警報、突出顯示和待辦事項的快捷方式，此擴展不僅會讓您的生活更輕鬆，還會讓您的團隊的生活更輕鬆。 以及在項目中跟隨您的任何開發人員。 我們不能充分推薦這一點。
10. VS 代碼圖標
使用擴展自定義 VS Code 的一個主要部分是實際自定義。 不僅僅是功能改變。 使用 VS Code 圖標，編輯器變得更加豐富多彩且更易於導航。 文件系統帶有代表各種文件類型的圖標，這些圖標顯示在資源管理器以及文檔選項卡本身中。 它使您在復雜的文件系統中工作變得更加輕鬆，也不再那麼令人頭疼。 字面意思有時。 易於閱讀的圖標可防止眼睛疲勞和頭痛。 因此，為了您的健康，請安裝 VS Code Icons。
11. 自動關閉標籤
也許是我們，但輸入任何語言的結束標籤變得如此繁瑣。 只是在最後添加 / in 會使擊鍵感覺有點不對勁。 從不畏懼。 自動關閉標籤讓我們的生活更輕鬆。 所以我們想讓你更輕鬆。 它簡單易行，您可以繼續在它們之間打字，只需按自己的方式按鍵即可到達下一行或該行的末尾。 安裝它，讓您的手指從手動關閉標籤的體操中休息一下。
12.上色
CSS 很棒。 在 CSS 中選擇顏色不是。 當您處理十六進制代碼和 RGBA 值時，有時很難想像您為網站設置的調色板。 此擴展程序通過為您在文件中使用的任何顏色代碼提供視覺註釋來幫助緩解這種情況。 您可以看到您在文本內部使用的顏色作為突出顯示，這樣您就不必經常在色板和顏色選擇器等之間來回交換。
13. 寶典
Polacode 就像您的代碼編輯器的寶麗來相機。 旨在使您的代碼快照更清晰、更容易，對於任何希望他們的代碼恰到好處的教程作者來說，這是必須的。
14. GitLens
很難真正完全解釋是什麼讓 GitLens 如此出色。 它的工作原理就好像 Git 和 VS Code 在設計時考慮到了彼此，而不是通過命令行層次結構工作，您可以獲得可視化和洞察力，從而消除團隊 Git 工作中的很多混亂。 您可以通過懸停查看事物、查看最近的更改和註釋、VS Code 本身內的比較視圖、熱圖、行歷史等等。 它基本上是完美的 Git 擴展，我們認為您應該立即安裝它。
15. 直播服務器
您是否曾經想從您的 IDE 中啟動本地開發服務器並實時處理它？ 無論您如何回答這個問題，您都會想嘗試一下 Live Server。 因為這正是你可以用它做的。 雖然它可能不會完全消除對 Local by Flywheel 和 MAMP 等產品的需求，但在許多情況下肯定會減少它們的必要性。
16. 美化
Beautify 使用流行的js-beautify來讓你的 JavaScript 看起來漂亮整潔。 不要擔心斷線和奇怪的間距和縮進。 只需單擊一個按鈕，您的所有代碼都將準備好進行特寫（也許使用上面的 Polacode）。
結論
此列表可能包含數千個項目。 事實上，你們中的一些人可能安裝了數百種不同的擴展，您在不同的時間啟用和禁用這些擴展。 但我們覺得這些是 VS Code 擴展，您可以安裝它們，然後在深入市場時了解您還想要什麼。
您首選的 VS Code 擴展是什麼？ 讓我們在評論中知道！
文章特色圖片由 SVIATLANA SHEINA/shutterstock.com 提供