前端visual-studio-code編輯器

擁有合適的工具可以讓你的開發(fā)工作變得更加輕松。許多開發(fā)人員使用?VSCode?作為開發(fā)工具，VSCode 允許安裝各種擴展工具。

Visual Studio Marketplace?上有太多的可用擴展工具，我們將著重介紹下面8個擴展工具。

即使是最簡單的工具也能賦予人們力量去做偉大的事情--比茲·斯通

所有這些插件都可以在?Visual Studio Marketplace?上免費獲得。

1. REST Client

REST Client?擴展工具允許你發(fā)送?HTTP?請求并直接在?VSCode?中查看響應(yīng)。再也不需要使用外部應(yīng)用程序向服務(wù)器發(fā)送?HTTP?請求。

這是一個非常流行的擴展工具，得到眾多開發(fā)人員的青睞，獲得了超過 100W 次的安裝。另外我自己也使用這個插件已經(jīng)有一段時間了，我覺得它很棒。

發(fā)送請求變得如此容易。語法非常簡潔，并且提供了很多選項以滿足你的需求。簡單的?GET?請求只需要一行代碼，GET?關(guān)鍵字后跟?URL?即可。

你真的應(yīng)該嘗試一下?REST Client?擴展工具。

2. CSS Peek

如果你是一個?web?開發(fā)人員，CSS Peek?絕對是必要的。有了這個擴展工具，將鼠標(biāo)懸停在元素的類名或元素ID上，就可以看到應(yīng)用于這個元素的?CSS?規(guī)則。

如下圖所示：

這個擴展工具不僅僅允許你查看樣式。它還有一個“轉(zhuǎn)到”特性，允許你立即跳轉(zhuǎn)到應(yīng)用于元素的?CSS?規(guī)則。這為你節(jié)省了大量尋找正確選擇器的時間。

3. Beautify

如果你喜歡整潔的代碼，那么你肯定會喜歡?Beautify。

Beautify?支持?JavaScript，HTML，CSS，Sass?和?JSON。

這個擴展的最大優(yōu)點是所有選項都是完全可定制的--比如縮進大小和文件是否應(yīng)該以新行結(jié)尾。如果你用幾種編程語言編寫代碼，那么?Beautify?可以涵蓋?？梢宰远x每種編程語言的選項。

該擴展工具的下載量超過500W次，在最受歡迎的已安裝擴展工具中排名前20位。

4. Auto Rename Tag

Auto Rename Tag?擴展工具所做的工作很簡單，但是很好用。該擴展工具將自動重命名成對的?HTML?標(biāo)簽。如果你正在重命名一個開始標(biāo)簽，它將更改相應(yīng)的結(jié)束標(biāo)簽；反之亦然。

如果你想在開始標(biāo)簽的結(jié)束括號中鍵入時自動添加結(jié)束標(biāo)簽，你應(yīng)該看一看?Auto Close Tag?擴展工具。安裝這兩個擴展非常有用，將幫助你以更高效和一致的方式編寫?HTML。

5. Quokka.js

Quokka.js?是編輯器中的原型平臺，可以訪問項目文件，內(nèi)聯(lián)報告等。代碼中的值在運行時更新，并在鍵入代碼時顯示在IDE中的代碼旁邊。

簡直太棒了！

6. Night Owl

沒有一個驚艷的主題，優(yōu)化VS代碼有什么價值？不多，對吧？！既然你花了這么多時間在VS代碼上，你最好通過安裝一個主題讓它看起來更好看。

Night Owl 主題是許多開發(fā)人員使用的一個漂亮的主題。根據(jù)這個主題的描述，它為我們這些喜歡編寫代碼到深夜的人進行了微調(diào)與優(yōu)化。

如果你不喜歡?Night Owl?主題，安利一下：?Pink Cat Boo，?Panda Syntax,?Mini Dark,?Gatito Theme,?One Monokai，這幾個主題色也很好看~

7. JavaScript (ES6) code snippets

最后一個要介紹的擴展工具是?JavaScript (ES6) code snippets?擴展工具。該擴展工具有多個代碼片段，可供您來生成ES6代碼片段。

例如，鍵入clg然后按回車可以得到一個console.log?？赡苣枰欢螘r間來熟悉所有的代碼片段，但是只要掌握了它，您就能非?？斓拇虺鯡S6代碼

8. TabNine

TabNine?是我用過的最好的代碼補全工具，TabNine?是一款基于人工智能的代碼自動補全工具，TabNine在自動補全時會給出每個候選項的概率，并且按照概率大小進行排序，此外，會給出候選項的來源及地址，這樣更加方便查詢和閱讀。目前已經(jīng)有超過 30W 次下載。