Visual Studio Code 必裝套件(extensions)

前言

https://code.visualstudio.com/opengraphimg/opengraph-home.png

Visual Studio Code是微軟推出開源且強大的免費編輯器
他有多麼強大與方便,我想就不必再多解釋了!

除了專案用到的針對性框架輔助套件之外(如Angular pack…)
以下列舉任何專案我一定要具備的好用又便利的公用套件!

可以按左邊快速定位套件介紹以及查看總共有哪些套件唷!

主題視覺類

Fira Code 字型


相當火的一個字型!雖然不是套件XD
把單調的符號合併後帶來的視覺感受相當舒服!
畢竟不是套件,安裝方式稍複雜些
詳細安裝方式請直接參閱FiraCode官方文件

Material Icon Theme

若看膩了預設的圖示,可以試試material icon
或可在MarketPlace搜尋關鍵字icon看有無更喜歡的icon!

One Dark Pro

也是一個相當火紅的主題。
相比於預設JavaScript那樣較活潑的配色
這個主題就暗化許多,看久也比較不會那麼刺眼

讓游標移動平滑柔順些

無意間在設定畫面翻到的設定,預設是關的
勾選後會讓游標移動流暢許多
設定搜尋Smooth
勾選「控制是否應啟用平滑插入點動畫」、「控制編輯器是否會使用動畫捲動」
set smooth

power mode

讓每次打字,都會有炫麗的特效!
我覺得預設就相當好看了,精巧的動畫也不至於太過花悄

其他動畫效果可參閱官方文件

安裝完後記得到設定啟用功能
我另外會把震動的效果關閉,只留下打字時冒出的小碎花

不然程式碼一直跳動看久了有點不太舒服
設定頁面搜尋power
勾選powermode: Enable以啟用
並將powermode: Shake Intensity改成0

vscode-powermode

註解類

Better Comments

在註解裡的第一碼加上關鍵字,會將註解用其他顏色表現出來
對於需要加強警示的註解或疑問可以用較強烈的顏色表現
vs-code better comments

TODO Highlight

todo:fixme:高亮出來!
可以高亮關鍵字明確提醒自己這段要增加、修改的部份
todo highlight

Todo Tree

裝了TODO Highlight,就一定要配合Todo Tree了!
會把註解中有標記todofixme以及旁邊的說明文字統一列出
點擊後亦會直接定位到此段程式碼!
等於自動收納了整個專案裡的待辦清單!
todo tree

輔助工具類

tabNine

tab 自動補齊程式碼!
請參閱科技報橘/工程師殺手級工具!一秒自動補齊後續程式碼,還支援 23 種程式語言

只能說,用過就回不去了
雖然有時候會小lag一下要等他彈提示字 XD
但整體來說爽度很足!

而且TAB補字時,若後面已有輸入;)]這些尾字,也會自動把多餘的符號消掉
不會按下TAB後,出現arr.map(val => console.log(val););這種囧況
還得自己移回去把括號裡多的;消除

vscode-tabNine

Bookmark

可以將特定行加上書籤,在追別人程式碼時相當方便
就算看了後面忘了前面,也可以馬上定位回去!
vscode-bookmark

而且書籤也可以加上label做個人註記

vscode-bookmark-collect

Code Spell Checker

常常手殘拼錯單字嗎?自動檢查拼字,避免無謂的拼字錯誤
vscode-code-spell-checker

expand-region

有時候重構或著在整理程式碼時,很常遇到要把整個callback以及原本的相關部份反白以刪除或複製
但常常游標移太快,不是多選到額外空白,就是多反白到無關的部份。浪費許多時間在選取上
使用expand-region就可以很迅速地用鍵盤由小地方逐一外擴到相關的部份
再配合剪下、刪除或alt+↓↑做到一氣呵成的鍵盤操作

vscode-expand-region

要注意的是,此套件安裝好後,預設是沒有快捷鍵的
需要自己手動設定快捷鍵
vscode-expand-region

打開喜好設定>鍵盤快速鍵(key-binding)expand region
Expand Region設定快速鍵為alt+a
Uodo Expand Region設定快速鍵為alt+q
選這2個快速鍵是因為不跟預設的快速鍵有所衝突

會設定成alt+a的想法是因為ctrl+a是眾所皆知的全選,所以用alt+a代表區域小選
Undo設alt+q代表quit。因多選到了,要quit回去

Bracket Pair Colorizer

常常在各種大小刮號嵌套的很混亂嗎?
尤其JavaScript的CallBack寫法,隨便一個基本盤就arr.map(() => {...})就直接參雜了3、4個大中小刮號在裡面
使用Bracket Pair Colorizer就可以幫你把刮號上色,在一行裡有多層刮號時方便直接辨識!
有1代跟2代,都是同一個作者。基本上一樣,2代有增加流暢度

vscode-bracket-pair-colorizer

我會在打開設定 > 搜尋Bracket Pair Colorizer > 打勾show Brackets In Gutter
會在左側行數前面,突顯出刮號類型與範圍。可以更清晰地掌握這段程式碼的長度!

vscode-bracket-pair-colorizer-show-gutter

參考資料

小克的 Visual Studio Code 必裝擴充套件(Extensions)私藏推薦
14 VSCODE EXTENSIONS THAT WILL IMPROVE YOUR PRODUCTIVITY