提升 JavaScript 開發效率的高級 VSCode 擴展之二！

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

---

爲了保證的可讀性，本文采用意譯而非直譯。
本系列的第一篇能夠在這裏看到：

提升 JavaScript 開發效率的高級 VSCode 擴展！

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！

做爲一名業餘愛好者、專業人員，甚至是每個月只有一次編程的開發人員，你必須知道，對於任何願意在工做中投入最大生產時間的人來講，擁有智能和敏捷的工具是相當重要的，廢話很少說，介紹插件比較重要。

1. Material Theme & Icons

這是 VS Code 主題中的重要角色。 做者認爲重要的主題是在編輯器中用筆和紙書寫最接近的東西（特別是在使用無對比變體主題時）。 從集成的工具到文本編輯器，你的編輯器看起來幾乎是平的和無縫的。

想象一個史詩般的主題加上史詩般的圖標。 Material Theme Icons 是替換默認 VSCode 圖標的絕佳選擇。設計的大型圖標目錄與主題融爲一體，使其更加美觀，這有助於你在資源管理器中輕鬆找到你的文件。

2. 具備居中佈局的禪模式或者勿擾模式 (Zen Mode)

爲了讓廣大苦逼碼農可以在 coding/docing 時有清晰的思路，表明最廣大碼農利益的 VSCode 也加入了「禪模式」。該模式能夠在你在頁面編輯文件時啓用，效果是全屏化你的編輯框，而後帶有若隱若現的雲霧效果。

打開方式：文件 > 首選項 > 設置 > 用戶設置 > 工做臺 > 禪模式

3. 具備連字的字體

文字的風格使閱讀變得簡單方便，你可使用好看連字的字體使編輯器看起來更友好。 這裏是支持連字的6種最佳字體 (根據www.slant.co)

你能夠嘗試 Fira Code，它很是棒並且是開源的。 如下是引入 Fira Code 後在 VSCode 輥更改該字體的方法。

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

具體使用方法能夠參考：

vscode中修改字體,使用 Fira Code

提升visual studio使用逼格的連體字(Fira code)以及多行編輯(MixEdit)

4.彩虹縮進 （indent-rainbow）

縮進風格，這個擴展爲文本前面的縮進着色，在每一個步驟中交替使用四種不一樣的顏色。

固然若是須要自定義本身喜歡的顏色，請將如下代碼段複製並粘貼到 settings.json 中

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],

5. 自定義標題欄

這是一個很棒的視覺調整，改變了不一樣項目的標題欄顏色，以便輕鬆識別它們。 若是你處理可能具備相同代碼或文件名的應用程序（例如react-native 應用程序和 React Web應用程序），這很是有用。

設置方式：打開方式：文件 > 首選項 > 設置 > 工做區設置

6. Tag Wrapping

若是你不認識 Emmet，那麼你多是一個喜歡打字的人。Emmet 容許你寫入縮寫代碼並返回的相應標記，目前 VSCode 已經內置，因此不用配置了。

若是你想了解更多的 Emmet 的簡寫，能夠查看 Emmet Cheatsheet

7. 內外平衡

這條建議來自 https://vscodecandothat.com/，做者很是推薦它。

你可使用 balance inward 和 balance outward 的 Emmet 命令在 VS 代碼中選擇整個標記。 將這些命令綁定到鍵盤快捷鍵是有幫助的，例如 Ctrl + Shift + 向上箭頭用於平衡向外，而 Ctrl + Shift +向下箭頭 用於平衡向內。

8. Turbo Console.log()

沒有人喜歡輸入很是長的語句，好比 console.log()。這真的很煩人，尤爲是當你只想快速輸出一些東西，查看它的值，而後繼續編碼的時候。若是我告訴你，你能夠像 Lucky Luke同樣快速地控制檯記錄任何東西呢?

這是經過名爲 Turbo Console Log 的擴展來完成的。它支持對下面一行中的任何變量進行日誌記錄，並在代碼結構以後自動添加前綴。你還能夠 取消註釋/註釋 alt+shift+u / alt+shift+c 爲全部由這個擴展添加的 console.log()。

此外，你也能夠經過 alt+shift+d 刪除全部：

9. Live server

這是一個很是棒的擴展，能夠幫助你啓動一個本地開發服務器，爲靜態和動態頁面提供實時從新加載功能，它對 HTTPS、CORS、自定義本地主機地址和端口等主要特性提供了強大的支持。

若是與 VSCode LiveShare 一塊兒使用，它甚至可讓你共享本地主機。

10. 使用多個遊標 複製/粘貼

當在不一樣的行上添加遊標來編輯多行代碼時，發現這個特性很是有用。你能夠複製和粘貼這些遊標選擇的內容，它們將按照複製的順序進行粘貼。

Mac: opt+cmd+up or opt+cmd+down

Windows: ctrl+alt+up or ctrl+alt+down

Linux: alt+shift+up or alt+shift+down

11. Breadcrumbs（麪包屑）

編輯器的內容上方如今有一個被稱爲 Breadcrumbs 的導航欄，它顯示你的當前位置，並容許在符號和文件之間快速導航。要使用該功能，可以使用 View > Toggle Breadcrumbs 命令或經過 breadcrumbs.enabled 設置啓用。要與其交互，請使用 Focus Breadcrumbs 命令或按 Ctrl + Shift + 。

12. Code CLI

VS代碼有一個強大的命令行界面，容許你控制如何啓動編輯器。你能夠經過命令行選項打開文件、安裝擴展名、更改顯示語言和輸出診斷信息。

想象一下，你經過 git clone <repo-url> 克隆一個遠程庫，你想要替換你正在使用的當前 VS Code實例。 經過命令 code . -r 將在沒必要離開 CLI 界面的狀況下完成這一操做 (在此處瞭解更多信息)。

12. Polacode

你常常會看到帶有定製字體和主題的代碼截屏，以下所示。這是在VS代碼與 x 擴展

我知道 Carbon 也是一種更好，更可定製的替代品。 可是，Polacode 容許你保留在代碼編輯器中並使用你可能已購買的任何專用字體，這些字體在 Carbon 中沒法使用。

14. Quokka (JS/TS ScratchPad)

Quokka 是J avaScript 和 TypeScript 的快速原型開發平臺。在你輸入代碼時，它將當即運行你的代碼，並在代碼編輯器中顯示各類執行結果。

Quokka 的一個很棒的擴展插件，當你準備技術面試時，你能夠輸出每一個步驟，而沒必要在調試器中設置斷點。它還能夠幫助您在實際使用以前研究庫的函數，如 Lodash 或 MomentJS，它甚至能夠用於異步調用。

15. WakaTime

若是你想記錄天天編程所花的時間，WakaTime 是一個擴展，它能夠幫助記錄和存儲有關編程活動的指標和分析。

原文：

https://medium.freecodecamp.o...

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

你的點贊是我持續分享好東西的動力，歡迎點贊！

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。