Visual Studio Code 必裝套件(extensions)

前言

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

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

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

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

主題視覺類

Fira Code 字型


相當火的一個字型!雖然不是套件XD
把單調的符號合併後帶來的視覺感受相當舒服!
畢竟不是套件,安裝方式稍複雜些
詳細安裝方式請直接參閱點燈坊/如何在 VS Code 使用 Fira Code 字型 ?

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回去

參考資料

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