iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
1
Software Development

這次我們不跳過 IDE系列 第 3

Day 03: 如果你只想趕快開工的話

  • 分享至 

  • xImage
  •  

為什麼這樣下標題?

前兩天的內容,講述不少理由,理由列得再多,仍然要回歸使用 IDE 的初衷:可以提高程式碼的撰寫品質、加速程式的開發時程
因此在第三天,我直接模擬一位工程師,他剛剛完成安裝。接著,安裝幾個 Extension 後,就可以開始上工。

該安裝的 Extension

如何安裝

嘛,會看這篇的多少都會使用,但請容許我再講解一次。

  1. 點擊左側快捷鍵。
    market_icon
  2. 在搜尋欄位輸入語言名稱。
    search_extension
  3. 點擊綠色的 install,即可完成安裝
    python_install

安裝你所撰寫的語言

除了 HTML、CSS、JavaScript 之外,都需要安裝相關語言的 extension。

基本上,各位工程師們有聽過的語言,vs code 幾乎都有支援,因此只有參考上一段如何安裝,在搜尋欄位輸入後,大致上都可以找到。
以下提供一個方法,可以快速檢查目前有支援的語言。

  1. 點擊右下角的語言名稱(我正在撰寫 markdown,因此會顯示 Markdown)。
    click_support_languages
  2. vs code 的畫面中央,會跳出語言列表,讓人可以快速理解目前有支援的語言。
    python_install

如果好奇目前支援哪些語言,可以去 Extension 的官方網頁查詢,請點我

安裝實用的 Extension

筆者覺得,如果有馬上使用的需求,那安裝以下所列,就夠用了。

語言包

Chinese (Traditional) Language Pack for Visual Studio Code

chinese_support
連結

這是由台灣一群熱心的工程師所製作,讓 vs code 的本地化變得可能發生。

編輯畫面

Bracket Pair Colorizer

bracket_pair_colorizer
連結

安裝的前提,撰寫的語言會使用括號(Bracket),尤其是大量使用大括號:{},就非常適合安裝。
這根本是廢話,幾乎所有語言都會使用到()、[]、{}
深陷 call back hell 的工程師們,使用後可以稍微舒緩一下
對於了解處在哪個 {} 之中,有極大的幫助。

indent-rainbow

ident_rainbow
連結

幫縮排染上彩虹的顏色(黃、綠、紅、藍)。
筆者極力建議,色彩佈景主題要搭配使用淺色主題,效果會更加明顯。

Trailing Spaces

trailing_spaces
連結

會自動幫沒有意義的空白,染上紅色。
對於程式碼的排版有一定要求的工程師,一定要試試看。

英文力

Code Spell Checker

code_spell_checker
連結

拼出錯誤的英文字時,會在該字下面標注,提醒工程師這邊英文拼錯了
身為天天在寫程式碼,a.k.a 英文,的工程師,要盡可能減少拼錯字的情況。假使被他人發現拼錯字,當下會感到一陣小尷尬的。

安裝結果示範圖

install_extensions_sample

總結

以上所列出的,已經滿足文章開頭的要求:不需要特地研究,安裝好就可以馬上開工
至於其他好用的 Extension,將留待後續好好地介紹介紹。


上一篇
Day 02: 為什麼我會想要推薦 vs code
下一篇
Day 04: 使用工具,從欣賞工具的樣貌開始
系列文
這次我們不跳過 IDE30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言