全文共3530字，預計學習時長13分鐘
圖源：unsplash
市場營銷最強策略之一：在人們知道自己需要什麼之前幫助他們意識到自己需要什麼。這一點上，VSCode深諳其道。
VSCode可能是目前最為流行的代碼編輯器，就是因為它滿足了每一個開發人員的需求，甚至可能開發人員自己都不清楚的需求。這就是VSCode的獨特魅力。
VSCode是為現代技術而創建的，因而大多數VSCode愛好者都是JavaScript開發人員。目前流行的JavaScript框架對於VSCode來說早已完美無缺，它擁有你所需要的一切。
科技日新月異，選擇文本編輯器時，一定要選最新最好的。優秀的開發人員不能不捨得花時間。但這並不是說應該轉而學習另一種語言，或者另一個框架。
正如筆者在之前的博客中一直強調的那樣，開發人員應當追上潮流，保持敏銳，瞭解最新信息，並將它們與目前使用的工具進行比較，瞭解其中區別及其優缺點，觀察其支撐和在社區中的發展，穩定至關重要。這會大大提升你的工作效率。
圖源：unsplash
VSCode擁有一個龐大的開源社區，其發展和潛力是無限的，本文將為你介紹25個最佳的VSCode擴展。
1.Auto-CloseTag
擁有VCSCode擴展是必要的。編寫代碼本就困難重重，擁有了VSCode擴展，就不需要僅僅因為缺少關閉標記（
）而查找錯誤。VSCode擴展可以自動添加剛剛添加的起始標籤的右括號，然後將鼠標光標放在標籤之間。是不是很酷?
2.VisualCode Integrated Terminal
將命令/終端放在VSCode編輯器中不僅會使工作更為輕鬆，還能節省空間。有了VSCode，你的終端就派上用場了。
3.ESLint/TSLint
此擴展的主要功能是自動格式化代碼，以便在整個團隊中實現一致的格式化。ESLint也可以配置為自動格式化代碼，無論何時出現錯誤，它都會發出一連串的警告。
數百萬的下載量可不是白給的~
4.CodeSpell Checker
如若不是以英語為母語的人，甚至可能也不是第二語言，那麼Code Spell Checker對避免代碼出現拼寫錯誤非常有幫助。無論是否能說一口流利的英語，打字錯誤是不可避免的——人們不會想花時間去找錯字，尤其在面對長代碼時。
5.Settings Sync
使用多臺機器時，該擴展將大有幫助。Settings sync讓所有電腦/筆記本電腦依照visual studio的設置方式實現同步。
同時在辦公室電腦和家用電腦上工作的開發人員，基本上會在不同的地點工作。手動更改兩端設置極為耗時，因為需要根據正在做的項目不時更改設置以便緩解編程壓力。建議使用這個擴展,以便將所有所作更改都自動同步到個人電腦和工作點。
6.Bracket Pair Colorizer
括號可謂是痛苦之來源，尤其是在處理大型項目時。當使用長代碼時，情況會更糟。Bracket Pair Colorizer將有效緩解這種壓力。
由於有大量嵌套的長代碼，尤其是在使用Javascript時，幾乎不可能確定哪些括號相互匹配。這一工具有助於更容易地找到打開和關閉，用顏色標識括號對將使代碼更具可讀性。趕緊下載吧!
7.Prettier
此前提到了ESLint，它可以自動格式化連續的代碼，並顯示警告和錯誤。
作為React/Native的開發人員，保持代碼整齊乾淨是必要的。首要的一點就是正確地縮進和分隔以便更好地讀取代碼，特別是在處理編寫已久的代碼時——帶有樣式、函數和處理程序的分隔非常重要，不僅方便自己，也方便了同事。要設置很簡單，點擊保存時即可自動格式化。
8.PathIntellisense
該擴展是筆者常用VSCode擴展之一。它可以節省很多時間。作為一名前端開發人員，筆者時常健忘，但又需要用到大量的組件、擴展和安裝包，特別是在使用React格式化時，因此，需要一些有助於處理文件路徑的東西。
大型項目中的工作麻煩多多，pathIntellisense將是你的左臂右膀。當嘗試在引文中輸入一條路徑時，智能感知會自動填寫或顯示建議。路徑智能感知還可以幫助自動完成所有隱藏文件。
9.BrowserPreview
該擴展對於前端開發人員而言必不可少。與其在Chrome中打開另一個窗口來瀏覽在代碼中所做的更改，不如下載這個瀏覽器進行預覽，這樣在VSCod中即可完成所有的工作。
該擴展可顯示代碼的瀏覽器預覽，因此不必在瀏覽器上打開標籤就可以看到一些小改動，大大了節省時間和空間。
10.Debuggerfor Chrome
這是筆者最愛和使用最多的VSCode擴展。作為一個前端網頁移動開發者，Debugger for Chrome為筆者提供了很大的幫助。特別是對於JavaScript開發人員來說，它可以節省很多做小改動的時間，有助於快速地找到並解決bug，對調試非常有幫助。
想要查找錯誤來自哪些行和函數，甚至查看其數據處理，控制檯可以提供很大的幫助。
11.MaterialIcon Theme
通過該擴展可為文件列表選擇漂亮可愛的圖標。如果文件是JavaScript，那麼在文件名旁邊的material樣式中會有一個JavaScript圖標。若是從事視覺開發，那麼該擴展就再適合不過了。
12.Javascript (ES6) Code Snippets
若你是JavaScript開發人員，Javascript (ES6) Code Snippets將是你最好的幫手。無論使用什麼JavaScript框架，此擴展都將有所幫助。如果只是一遍又一遍地輸入相同的通用代碼，效果倒不是很明顯。
該代碼片段十分方便，是一個輕量級的庫擴展，它可以綁定任何標準的JavaScript調用，因此只需鍵入快捷代碼，即可看到整個通用代碼自動輸入到編輯器中。該擴展不僅支持Javascript ES6，還支持Typescript、Reactjs、Vue和HTML。
13.LiveServer
在使用Live Server時，該VSCode擴展將有助於打開當前項目的Live web服務器。一般這項工作用像Webpack這樣的構建器完成即可，但是該擴展顯然更為有效。只需右擊並打開運行live server，便會自動完成剩餘的工作。
14.Github 擴展
若正在使用Github作為項目存儲庫，或者希望使用其他開發人員的源代碼存儲庫，那麼這個擴展就是為您量身定做。
順便一提，Github現在由微軟所有和管理，所以Github和VSCode現在都是微軟產品之一。
使用Github擴展，可以輕鬆地連接其他開發人員的存儲庫、喜歡的開發人員的存儲庫，甚至自己的存儲庫。經常使用Github的話，切換存儲庫將極為順手。
15.GitLens
Gitlens是另一個好用的擴展。它擴充了當前的VSCode Git功能，能夠從以前所作的提交和更改中同時執行代碼比較，還擁有其他一些很厲害的特性。
16.NPM
所有現代開發人員都知道NPM是什麼，以及它為什麼這麼重要。Node包管理器是一個可管理Package .json文件的擴展。如果需要的依賴項以及NPM包的版本控制尚未安裝，它會給出警告。
筆者所處理的大多數bug和錯誤都來自於使用的NPM包、函數和特性，因為它們與其他包不兼容，所以無法運行。如果沒有它所要求的依賴項沒有兼容的版本那可真是鴨梨山大！
17.Beautify
Beautify是另一用於代碼格式化的良好擴展，與前文提到的Prettier幾乎一樣，但是效果更漂亮。到目前為止，它已有將近1200萬的下載量了，還用筆者再多說什麼嗎。它可以格式化用Javascript、JSON、Sass、CSS和HTML編寫的代碼。
18.Live Sass Compiler
如果您喜好Sass風格，或者只是因為它是項目應用程序需求的一部分而恰好正在使用Sass，那麼這個VSCode擴展就是為您而生的!
它會實時將SASS/SCSS文件編譯成CSS文件，並自動提供應用程序或瀏覽器中已編譯樣式的實時預覽。
19.Emmet
自筆者開始使用VSCode以來，就一直在使用Emmet。它可以幫助開發人員提高編寫代碼的速度。使用該擴展不久之後就再也離不開它了。
20.VSCode Icons
這是為前端開發人員打造的VSCode擴展。與前文提到的material圖標很相似，但是設計不同。前端開發人員通常都喜歡可視化，對吧。這個圖標有助於查看文件類型，不管它們是HTML,CSS, Javascript還是其他類型。
21.顏色選擇器
顏色選擇器擴展有助於輕鬆選擇CSS文件中的顏色。它將立即反映或應用到當前正在處理的屬性。若喜歡使用RGBA顏色，也可以使用。
22.Quokka
Quokka被稱為JavaScript開發人員的現代便籤板。其構建旨在幫助開發人員進行代碼檢查。這是一個完美的解決方案。
與其他VSCode擴展相比，它非常輕量級、高效且強大，有助於加快工作進程。同時，它又是實時的，可以給出即時反饋。
它可以為每個結果匹配一個固定的顏色類型，以便開發人員更容易理解代碼。
23.Live Share
Live Share是VSCode文本編輯器中最先進的特性之一。當與團隊成員一起工作時，它無可挑剔。LiveShare的功能之一是允許每個開發人員實時地與其他開發人員共享代碼片段。
這一點堪稱完美，且有助於實現更加高效和多產團隊協作。LiveShare允許即時共享當前的項目，即使在調試時也是如此。
協作者不需要安裝任何存儲庫、sdk或任何東西來連接其他開發人員的當前代碼。團隊中的每個人都可以通過協作來遠程探索和修復問題。
24.ES7, React, Redux & GraphQL Snippets
高級開發人員目前使用的多是JavaScript框架(如React)，以及其他與生產和複雜應用程序兼容的技術，這項擴展是為他們量身定做的。
反覆輸入標準代碼效率低下。在該代碼片段的幫助下，可以輕鬆創建基於類的組件、功能組件、輸入項、生命週期方法等，只需鍵入快捷代碼，這是筆者使用最多的擴展之一，因為筆者一直使用的是Reactjs和React Native。
25.REST 客戶端
另一個高級工具是Rest客戶端擴展，在使用其他第三方工具和APIs時，它將大有幫助。另外也有助於輕鬆發出HTTP請求。
通過此擴展可輕鬆地在代碼編輯器中直接調用和結束，大大節省了時間——你可以使用這個方法，而不是隻為實現一個請求而來回切換瀏覽器或郵箱。
圖源：unsplash
無論是追求高效，還是尋求體驗，在這裡你都將找到滿意的答案。
留言點贊關注
我們一起分享AI學習與發展的乾貨
如轉載，請後臺留言，遵守轉載規範
關鍵字: 格式化 使用 Javascript
