VSCode 快速推坑介紹文

用過的 Editor 很多,常常出現新款的 Editor 都會嘗試一下,雖然主流的不一定會喜歡,但多嘗試也不是壞事,這邊稍微列出個人主觀的意見供大家參考參考:

Dreamweaver

這是早期在使用的 Editor,特色是所見即所得,但這個也成為 Dreamweaver 的致命傷,畢竟做網頁精準的還是瀏覽器上的呈現,過度依賴所見即所得對於學習會有所限制,後來開始精進 CSS 後就不太使用這個工具。

Sublime Text

目前相當主流的 Editor,到現在偶爾會打開使用,主要原因是速度極快,搭配良好的套件可以快速完成大量的程式碼,作為一個 Editor 是非常優秀的,但在開發上總是會期待更多的功能 (嘿嘿嘿。

Atom

算是 Sublime Text 的升級版,優秀的套件管理及更豐富的延伸套件,能夠達到 Sublime Text 沒有的功能,像是快速啟動 Webserver、內嵌終端機都不是問題。缺點是非常消耗硬體資源,對於較大的檔案可能會有 Crash 的問題,除此之外算是遇到 VSCode 之前的主要開發工具。

VSCode

在一開始使用時對於操作不是很習慣,但隨著套件越來越多以及更新改版,也很貼近先前使用的幾套工具,開始嘗試使用開發 Node.js 專案是非常棒的,除了前幾套開發工具有的功能外,內建的 Git、debug tool 都非常的實用,且能夠與 iTerm、Gulp、Webpack 整合,算是 Node.js 開發的神器 (2017年初來說的話啦)。

VSCode 的好用功能

內建 Terminal
按下 `Ctrl + `` 後, VSCode 就會開啟預設的 Terminal 工具,如下圖所示,個人通常是使用 iTerm 在開發,按下之後下方會有 iTerm 分頁直接使用。如果說有需要修改預設字體,可以打開設定檔加入以下:

1
"terminal.integrated.fontFamily": "Monaco for Powerline",

Git 整合

懶人使用的 Git 工具,只要勾一勾直接就可以 Commit。

在 Commit 前需要做程式碼比對也是相當容易的,點擊檔案名稱自動會出現比對,過去需要仰賴其他 GUI 工具才能做到,現在 VSCode 就內建此功能,可以大幅減少 Code Review 的時間。

Debug Mode 偵錯工具

針對 Node.js 或其他後端的開發 (目前僅有測試過 Node.js),VSCode 可以做到服務啟動、中斷點、一鍵重啟的功能,按下 cmd + shift + D 可以開始建立組態檔。

預設的組態檔其實都寫好了,存檔後就可以啟用服務。

設定中斷點,觸發時會列出當下的變數狀態,讓後端開發搞得跟用 Chrome 一個樣 (有嗎?

啟用後畫面上會出現這樣的工具,可以暫停、重啟、停止服務。

Gulp、Webpack … 整合

如果專案中有 gulpfile.js,按下 cmd + shift + P 呼叫 task run,VSCode 會自動撈出 gulpfile 內的 Task 讓開發者選擇執行。

停止方式:Terminate Running Task

尋找錯誤程式碼

程式碼有錯,卻找不到在哪裡 (隱藏在茫茫 Code 海中的全行字元啊~),按下 shift + cmd + m 就會標出目前錯誤的問題,但其實平常打錯他就會有標示囉。

程式碼提示

完整的 Javascript 程式碼提示,像下面這個功能不需要多解釋,隨便按都會看起來很專業。

設定檔

雖然說他沒有 Atom 那樣的 GUI 設定工具,但這樣的設計反而讓工程師更容易去搜尋想要的設定,左邊是設定的預設值,複製到右邊的個人設定檔就可以修改參數,且設定檔包含完整的中文說明,透過搜尋列可以輕鬆找到要修改得值。

VSCode 的功能相當多,相信不是一兩篇短文推坑就能摸熟,如果有興趣可以參考 Will 保哥介紹的影片,不到一個小時就能讓你從其他 Editor 轉來使用 VSCode。
影片:https://www.youtube.com/watch?v=CAQdar3JGEU

圖片目前放在 Dropbox Paper 上,如有遺失會再更新。