本文轉(zhuǎn)載自公眾號(hào)“讀芯術(shù)”(ID：AI_Discovery)。

如何實(shí)現(xiàn)從優(yōu)秀到頂尖的跨越?資深開(kāi)發(fā)人員告訴我們，用什么工具很關(guān)鍵。使用合適的工作工具可以使身為開(kāi)發(fā)人員的你的生活變得更加輕松。

這與你正在使用的IDE沒(méi)什么不同。許多開(kāi)發(fā)人員都將VisualStudio Code作為首選IDE，這樣他們就可以安裝擴(kuò)展。擴(kuò)展的種類是無(wú)限的。VisualStudio市場(chǎng)上有太多擴(kuò)展，本文將選擇其中7種能使編碼變得輕松的擴(kuò)展進(jìn)行介紹。

請(qǐng)注意，所有這些插件都可以在Visual Studio Marketplace上免費(fèi)獲得。

[[340980]]

1. REST客戶端

REST客戶端擴(kuò)展允許使用者發(fā)送HTTP請(qǐng)求并直接在VisualStudio Code中查看響應(yīng)。這能讓我們告別外部應(yīng)用程序，不再需要外部應(yīng)用程序向服務(wù)器發(fā)送HTTP請(qǐng)求。

它非常受歡迎，安裝量超過(guò)一百萬(wàn)，已經(jīng)有許多開(kāi)發(fā)人員使用，我也已經(jīng)使用這個(gè)插件很長(zhǎng)時(shí)間了。

發(fā)送請(qǐng)求從未如此簡(jiǎn)單。語(yǔ)法真的很干凈，可以使用許多選項(xiàng)來(lái)滿足使用者的需求。一個(gè)簡(jiǎn)單的GET請(qǐng)求所需要的只是一行包含GET關(guān)鍵字和URL的代碼。

2. CSSPeek

如果你是網(wǎng)絡(luò)開(kāi)發(fā)人員，那么CSSPeek是絕對(duì)必備的。通過(guò)此擴(kuò)展，只需將鼠標(biāo)懸停在元素的類名或ID上，即可查看應(yīng)用于HTML中某個(gè)元素的CSS規(guī)則。

請(qǐng)看下圖，此擴(kuò)展程序的具體功能如圖所示：

此外，此擴(kuò)展不僅可以查看樣式，還具有“轉(zhuǎn)到”功能，使用者通過(guò)該功能可以立即跳轉(zhuǎn)到應(yīng)用于該元素的CSS規(guī)則，這節(jié)省了很多尋找正確選擇器的時(shí)間。

3. Beautify

如果是喜歡簡(jiǎn)潔代碼的人，那你絕對(duì)會(huì)喜歡Beautify，此擴(kuò)展可幫助讓的代碼更加完美。Beautify支持JavaScript、HTML、CSS、Sass和JSON。

這個(gè)擴(kuò)展最棒的就是所有選項(xiàng)都是完全可自定義的，例如縮進(jìn)大小以及文件是否應(yīng)以新行結(jié)尾。如果使用多種編程語(yǔ)言編寫(xiě)代碼，Beautify稱得上是一個(gè)好幫手?？梢詾槊糠N編程語(yǔ)言自定義選項(xiàng)。

該擴(kuò)展程序下載量超過(guò)500萬(wàn)，在安裝次數(shù)最多的擴(kuò)展程序中位列前20名。

4. AutoRename Tag

Auto Rename Tag擴(kuò)展的功能很簡(jiǎn)單，但是非常好用。該擴(kuò)展可以自動(dòng)重命名配對(duì)的HTML標(biāo)簽。如果重命名開(kāi)始標(biāo)簽，它就會(huì)更改相應(yīng)的結(jié)束標(biāo)簽。反之亦然。

如果想在輸入開(kāi)始標(biāo)簽的結(jié)束括號(hào)時(shí)自動(dòng)添加結(jié)束標(biāo)簽，那么可以查看Auto Close Tag extension。安裝這兩個(gè)擴(kuò)展后，你將可以以更高效、更一致的方式編寫(xiě)HTML。

5. Quokka.js

Quokka.js是編輯器中的原型制作游樂(lè)場(chǎng)，可以訪問(wèn)項(xiàng)目的文件、內(nèi)聯(lián)報(bào)告等。代碼中的值會(huì)在運(yùn)行時(shí)更新，并顯示在代碼旁邊的IDE中。一句話，就是厲害!

6. NightOwl

如果沒(méi)有令人嘖嘖稱贊的主題，那么優(yōu)化VSCode的價(jià)值是什么呢?鑒于已經(jīng)在VSCode上花費(fèi)了很多時(shí)間，接下來(lái)就安裝一個(gè)主題來(lái)使它的外觀更好看吧。

Night Owl主題是許多開(kāi)發(fā)人員都使用的漂亮主題之一。根據(jù)對(duì)該主題的描述可知，它適合那些喜歡在深夜編寫(xiě)代碼的人。

如果不喜歡Night Owl主題的話也沒(méi)有關(guān)系，其他漂亮的VS Code主題也有很多，在我另一篇文章中有介紹過(guò)：https://levelup.gitconnected.com/code-pretty-in-these-themes-for-visual-studio-4162aa35aee1。

7. JavaScript(ES6) code snippets

要介紹的最后一個(gè)擴(kuò)展是JavaScript(ES6) code snippets擴(kuò)展。該擴(kuò)展包含十幾個(gè)代碼片段，可以使用它們來(lái)生成ES6代碼片段。

例如，鍵入clg然后按回車，將生成console.log。使用者可能要花一些時(shí)間來(lái)熟悉所有可能的代碼片段，但一旦掌握了它們，便可以很快輸入ES6。

這些助你成為頂尖開(kāi)發(fā)人員的擴(kuò)展快快收藏吧!