六角學院 Visual Studio Code 課程學習筆記

發表於 分類於 Disqus：

本文為觀看六角學院「 VSCode 開發功能大解密」的紀錄。

VSCode 是什麼

Visual Studio Code 是由微軟開發的開源文字編輯器，並包含很多強大的功能，輔助使用者編輯各種檔案。

官網： Visual Studio Code

基本環境介紹

VSCode 內建 Emmet 等功能，也有許多快捷鍵，方便使用。

常用的指令例如:

  • Ctrl+Shift+P, F1 ：顯示所有命令
  • Alt+↑/↓ ：位移整行程式碼
  • Ctrl+Enter ：在下方新增一行
  • Ctrl+Shift+Enter ：在上方新增一行
  • Ctrl+/ ：開關註解
  • Alt+Z ：切換自動換行
  • Ctrl+P ：搜尋檔案
  • Ctrl+D ：找到相同的片段
  • Shift+Alt+F ：排版
  • Ctrl+\ ：分割視窗
  • Ctrl+` ：開啟終端機

官方快捷鍵列表： Keyboard shortcuts for Windows
Emmet snippests 列表： Cheat Sheet

設定

用 Ctrl+, 或左下角的齒輪處可以找到設定。
設定選項

可以用圖形介面或 JSON 格式改動設定；也分成全域或工作區域設定。
例如使用 Live server 的話，就會在工作區資料夾底下出現 .vscode/setting.json ，裡面會有阜號之類的設定。
設定介面

佈景主題

可以更改色彩佈景主題跟圖示佈景主題。
佈景主題

Atom 的色彩佈景主題： Atom One Dark Theme
圖示佈景主題： Material Icon Theme

套件

VSCode 中可以用套件做到的事情很多，例如觀看 PDF 、 CSV 等檔案類型，也能看 PTT 。
以下是一些實用的套件：

支援程式語言

VSCode 支援許多程式語言，例如 JavaScript 、 C++ 、 Python 等。通常包含 IntelliSence 和 Snippets 等功能；也就是能夠顯示相關註釋及快速完成程式碼。此外還有重新命名變數的功能（選取變數按 F2 ）；又例如 Formatting ，即排版程式碼的功能。

官方文件：Language Support in Visual Studio Code

JSDoc Support

使用者可以自訂 JavaScript 的文件。

1
2
3
4
5
6
7
8
/**
 * 一些相關的說明
 * @param {Number} value1 這是一個數字參數
 * @param {String} value2 這是一個字串參數
 */
function testFunction(value1, value2){
    console.log(1);
}

JSDoc Support