VS Code 擴充推薦

VS Code 擴充推薦 - Live Sass Compiler

Sass 的出現，改善 CSS 語法的不足， Sass 可以更像寫程式一樣定義變數、函數，也可以使用 if-else, for 等程式常見的邏輯控制，甚至模組化都可以做到，最後還可以編譯輸出 CSS, 讓前端工程師的工作效率提升到一個全新檔次。

知名的前端框架 Bootstrap 即使用 Sass 開發的，足見 Sass 的實用性！

本文將如何在 VS Code 中使用 Live Sass Compiler 擴充將 Sass 編譯成 CSS 。

Posted on  Aug 26, 2023  in  VS Code , VS Code 擴充推薦  by  Amo Chen  ‐ 2 min read

VS Code 擴充推薦 - Numbered Bookmarks

個人以往長時間使用 Vim 作為主要編輯器使用，但是現在除了 Vim 之外，也會使用 VS Code 進行開發。

Vim 有個功能稱為 bookmark , 可以讓人在特定行做一個書籤，等到需要的時候，可以使用快捷鍵/指令迅速跳到該書籤，可以節省切換的時間，相當高效。

不過使用 VS Code 之後就失去這個功能，所幸還是可以安裝擴充解決問題。

這個擴充稱為 Numbered Bookmarks 推薦給大家使用。

Posted on  Aug 25, 2023  in  VS Code , VS Code 擴充推薦  by  Amo Chen  ‐ 2 min read

VS Code 擴充推薦 - Better Comments

每個開發者或開發團隊在開發時，或多或少都會在註解(comments)留下一些說明或標籤(tags)，包含 TODO , FIXME , WARNING , REF 等等，這些被稱為 Codetags 。

雖然目前還沒有明確標準要怎麼使用這些標籤，不過開發時如果能將這些標籤強調(highlight)顯示，讓開發者更容易注意到註解處有其他成員想要說明的事或想要做的事，讓註解不僅僅只是註解，而是增加註解被關注到的機率。

本文將介紹 VS Code 擴充 Better Comments, 讓開發者或開發團隊可以自訂要強調顯示的 codetags, 以增強開發協作能力。

Posted on  Aug 14, 2023  in  VS Code , VS Code 擴充推薦  by  Amo Chen  ‐ 2 min read

VS Code 擴充推薦 - Dev Containers

本文介紹 VS Code 擴充 - Dev Containers, 這個擴充可以讓開發者用 VS Code 在 Docker 容器中進行開發，體驗上就跟在本機開發同樣自在，還可以統一開發團隊的開發環境！

目前知名開源專案 ELECTRON, CodeQL, etcd 等都已經使用 Dev Containers 作為開發一環，絕對值得使用！

Posted on  Aug 13, 2023  in  VS Code , VS Code 擴充推薦  by  Amo Chen  ‐ 4 min read

VS Code 擴充推薦 - EditorConfig

一樣米養百樣人，每個人喜歡用的編輯器(editor)都不一樣，有些人喜歡用 Vim, 有些人喜歡 Emacs, 有些人則使用 Visual Studio Code(VS Code)，個人則是 Vim 與 VS Code 兩棲使用者。

也由於編輯器預設值/設定不一樣，例如有些使用 Tab 縮排，有些用 4 個空格縮排，這種不同編輯器間的差異，會對開發團隊帶來 coding styles 不ㄧ致的問題，而且每個公司一般來說會有各種開發專案，不同開發專案間有不同的 coding styles 是很常見的事，這時如果只是在 README 或開發文件中規定 coding styles 不僅麻煩，也容易造成開發者的困擾。

針對這種問題，目前最好的解決辦法就是使用 EditorConfig ，將 coding styles 設定寫成 .editorconfig 放到各個專案之中，並請每位團隊成員安裝 EditorConfig 擴充(extension/plugin)，如此就能讓團隊成員在開啟各種不同專案自動載入不同的 coding styles, 完成一種無縫切換的開發體驗！

Posted on  Aug 11, 2023  in  VS Code , VS Code 擴充推薦  by  Amo Chen  ‐ 3 min read