VSCode 是什麼,常用外掛擴充套件推薦

Visual Studio Code (簡稱VSCode)是一個由微軟開發,支援多平台的開放原始碼免費程式碼編輯器,在2021 Stackoverflow的調查中,也是Web開發者最熱門的程式編輯器高達71%在使用,比兩年前的50%更高。VS Code 輕量但功能強大能支援語法凸顯,程式碼自動補全和重構的功能。VS Code 預設支援非常多語言,包含Javascript和CSS、HTML。也可透過下載擴充元件支援其他語言包含Python、C/C++等,提供很豐富的生態系統。

這篇基本的VSCode安裝使用教學,帶你快速上手設定本地開發環境,並推薦常用的VSCode外掛套件(Extensions)。

程式編輯器熱門排行

Installation

請前往 https://code.visualstudio.com/ 並依照你的作業系統下載適合的版本。

使用 Windows 版本的同學,在安裝過程中請記得勾選 Add “Open with Code” action 的兩個選項(如下圖)。這兩項設定可以讓你直接在檔案上用滑鼠右鍵來開啟 Visual Studio Code。

Configuration

請參考影片進行編輯器設定,在影片裡,我們會示範:

  1. 檔案管理、頁籤、存檔;
  2. 安裝外掛;
  3. 客製化縮排設定。

初學者的VSCode常用外掛擴充套件

以下是一些適合現階段安裝的擴充套件,你可以先安裝起來,但若要了解他們的使用方便,你需要閱讀外掛的說明,你可以等到熟悉編輯器之後,再回過頭來認識這些擴充套件。

  • Emmet (default): Visual studio code 已經預設安裝的擴充套件,提供了許多快速編寫 HTML 與 CSS 的縮寫,並且在你編寫程式碼的時候跳出提示,你可以在這裡認識常見的縮寫。如果你使用別的編輯器,請在編輯器上主動安裝此套件。
  • Live Server: 讓你可以在檔案儲存的同時,就直接在瀏覽器裡同步看到結果。
  • Markdown Preview Enhanced: 預覽 .md 檔案的 output

設定程式碼縮排

請記得設定你的程式碼縮排,設定的位置在 Preference > Settings

找到 Open settings.json 按鈕:

由於編輯器版本更新,按鈕也有可能在這個位置:

當你看到以下介面之後,請在右側的 User Settings 貼上以下程式碼,可以讓程式碼自動縮排,並且在程式碼超出視窗寬度時能自動繞行 (wrap):

{
“editor.tabSize”: 2,
“editor.wordWrap”: “on”,
“editor.formatOnSave”: true,
“editor.formatOnPaste”: true,
}

恭喜你!你安裝並設定好你的本地開發環境了!

深入認識VSCode:基本功能和操作介紹

編輯器介面與操作:VSCode的基本功能解析

VSCode的介面設計得非常直覺且易於操作。當你打開VSCode時,你會在左側看到活動欄。它包括以下五個主要部分:

  1. 檔案總管 (Explorer):你可以在這裡瀏覽、開啟你的檔案和專案。它可以讓你快速的導航到你的程式碼。
  2. 搜尋 (Search):如果你想要尋找某個特定的檔案或是程式碼,這裡就是你的最佳選擇。它提供全專案的搜尋和取代功能。
  3. 版本控制 (Source Control):VSCode 內建了 Git 的功能,你可以直接在這裡做 commit, pull, push 等操作。
  4. 執行 (Run):VSCode 提供了 debug 功能,你可以在這裡設定斷點,查看變數的值等。
  5. 擴充功能 (Extensions):在這裡你可以找到各種擴充功能,例如主題、語法高亮、程式碼提示等。

這些視圖提供了專案管理、檔案搜尋、版本控制等基本功能。此外,你可以透過調整視窗的樣式和主題,讓VSCode更符合你的個人風格。

快捷鍵與命令面板:提升編碼效率的秘密武器

VSCode 提供了許多快捷鍵來讓你的編程過程更加順暢。以下是一些例子:

  1. 快速開啟檔案 (Ctrl+P):你可以在這裡快速地搜尋和開啟你的檔案。
  2. 開啟命令面板 (Ctrl+Shift+P 或 F1):在命令面板,你可以找到並執行所有 VSCode 的命令。
  3. 開啟設定 (Ctrl+,):你可以在這裡自定義你的環境,例如改變主題、設定語言等。
  4. 格式化文件 (Shift+Alt+F):這個快捷鍵可以讓你的程式碼格式化,使它看起來更整潔。

學會VSCode的快捷鍵是提升編碼效率的關鍵。VSCode的命令面板(F1或Ctrl+Shift+P)提供了一個快速執行任何VSCode指令的方法,你可以輸入你想執行的指令,或是選擇最近使用的指令。另外,VSCode的快捷鍵設定也很彈性,你可以自訂任何快捷鍵,以符合你的編碼習慣。

推薦VSCode常用套件

VS code 提供很多強大的套件與套版,通常,在安裝新的開發環境時,會在編輯器上準備一些基本工具,包括:

自動檢查 Coding style 的工具

  • 稱為 Code linter,可以幫助你在 coding 過程中更有效地邊寫邊除錯
  • 要和 React 搭配的話,推薦使用 ESLint

自動排版工具

  • 在團隊協作中,我們應該使用與夥伴一致的程式碼排版習慣,包括什麼時候要空格、使用 tab 或 space 等等。幫你自動搞定這些細節的工具稱為 Formatter ,以 Prettier 為例,可以自動幫你的 tab、space 鍵調整成一致,讓縮排整齊、統一單雙引號等等
  • 在這裡推薦使用 Prettier extension in VSCode

以下是 ALPHA Camp 助教推薦的常用套件:

  • Chinese (Traditional) Language Pack for Visual Studio Code – 中文化 vscode ,不過在支援版本到 1.28 ,之後才會支援更高版本。
  • Code Spell Checker – 檢查有沒有拼錯字,超級推薦。
  • Settings Sync – 把設定、 plugin 雲端備份到 gist,超級推薦 。
  • Prettier – Code formatter – 自動排版、整潔程式碼的工具。舉例來說,假設一個專案有很多人在開發,有的人有加分號、有的人沒有;有的人用單引號、有的人用雙引號,這樣雖然程式執行時沒問題,但是整份 code 可能綜合了多種「風格」。 這時可以在 Prettier 根據專案設定好設定檔,如果有人用了不符合設定的「風格」(例如大家統一說好要用單引號,你卻用雙引號)Prettier 會自動根據設定檔幫你改成大家統一的風格。但反過來說,如你的沒有把 Prettier 設定好,它會自動修改你的程式碼,如補上「;」。所以使用時要特別注意。Prettier 的設定在 settings.json 這個檔案裡。
  • StandardJS – 和 prettier 的作用非常類似,會自動幫你調整程式碼的 style,只是它預設就是會使用 JavaScript Standard Style 的標準
  • TODO Highlight – 高亮特殊的關鍵字如 TODO 、 FIXME ,有時候寫筆記蠻好用的。
  • AutoFileName – 自動填入檔案路徑,在引入檔案時很方便。

(本文擷取自 AC全端 Web App 開發課程 學期二:JavaScript前後端開發)

3分鐘小測驗,找到你學習全端開發的入口