一些你所不知道的VS Code外掛
摘要:你所不知道的系列。
Fundebug經授權轉載,版權歸原作者所有。
作為一名業餘愛好者、專業人員,甚至是每月只有一次程式設計的開發人員,你必須知道,對於任何願意在工作中投入最大生產時間的人來說,擁有智慧和敏捷的工具是至關重要的,廢話不多說,介紹外掛比較重要。
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
具體使用方法可以參考:
提高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
刪除所有:
程式碼部署後可能存在的BUG沒法實時知道,事後為了解決這些BUG,花了大量的時間進行log 除錯,這邊順便給大家推薦一個好用的BUG監控工具Fundebug。
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 中無法使用。
13. Quokka (JS/TS ScratchPad)
Quokka 是J avaScript 和 TypeScript 的快速原型開發平臺。在你輸入程式碼時,它將立即執行你的程式碼,並在程式碼編輯器中顯示各種執行結果。
Quokka 的一個很棒的擴充套件外掛,當你準備技術面試時,你可以輸出每個步驟,而不必在偵錯程式中設定斷點。它還可以幫助您在實際使用之前研究庫的函式,如 Lodash 或 MomentJS,它甚至可以用於非同步呼叫。
14. WakaTime
如果你想記錄每天程式設計所花的時間,WakaTime 是一個擴充套件,它可以幫助記錄和儲存有關程式設計活動的指標和分析。
原文: Here are some super secret VS Code hacks to boost your productivity
關於Fundebug
Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了10億+錯誤事件,付費客戶有Google、360、金山軟體、百姓網等眾多品牌企業。歡迎大家免費試用!