[vscode] 5 個實用的 VS Code 擴充套件 (extensions)

影片介紹

Better Comments

當你在撰寫程式碼註解的時候，有時候會需要撰寫該程式碼的用途以及注意事項等等，這時候就可以使用 Better Comments 來協助你區分這幾件事。

只要在註解的地方使用以下幾種符號，你的註解就會有不同的顏色，而該套件針對符號的定義如下(不侷限於 function)：

• * (important) : 該 function 有哪些重要的事項需注意

• ! (deprecated) : 棄用的 function

• ? (should...?) : 該 function 應該要做什麼嗎?

• todo : 該 function 的代辦事項

我們也可以自訂義符號(文字)和顏色，在該 extension 的介面點擊齒輪，之後選 Extension Settings，會看到以下畫面，點擊 Edit settings.json

我們自訂一個 Hello World 的文字

最後來看看效果

Code Spell Checker

Code Spell Checker 可以幫助我們檢查單字是否拼錯(底下有藍色波浪線)，有時候 function 或 variable 名稱拼錯的話，會覺得這個套件很讚，缺點是有一些第三方套件的命名並沒有被加進 Code Spell Checker 的字典裡，所以也會顯示警告提示。

Error Lens

如果我們要查看程式的錯誤或警告訊息，需要將滑鼠移到錯誤發生的位置，才會顯示詳細資訊，但安裝了 Error Lens 後，錯誤和警告訊息會直接顯示在畫面上：

Pretty TypeScript Errors

Pretty TypeScript Errors 可以幫我們修飾 typescript 的 error 訊息，畫面如下：

Paste JSON as Code

Paste JSON as Code 可以幫助我們將 json 格式的檔案轉換成 typescript 的 interface：