五倍紅寶石・專業程式教育

五倍紅寶石 ・專業程式教育機構

VSCode 的奇幻旅程

By Vense・11月 16 2019・技術文章
VSCode 的奇幻旅程

前言

「工欲善其事,必先利其器」,通常看到這個開頭,就知道今天要來介紹工具。在寫程式時,大家通常習慣的 Editor 是哪些呢? Vim、Emacs、Atom、Sublime、VSCode、記事本。而上述的 Editor 中,最廣為人知的就是被譽為「編輯器之神」的 Vim 和被譽為「神之編輯器」的 Emacs。由於這兩款 Editor 不同的特色與本質,形成了各自的派系並且相互歧視,因此還引發了 Editor 界的一場聖戰「Editor War」。

回到正題,這次主題的 VSCode 相較與前面兩款成神的 Editor 來講只能算是新生兒而已。但對筆者來說,選擇使用起來順手、舒服的 Editor 較為重要,接下來讓筆者稍微介紹一下這次的主角 VSCode:

  • 基於 Electron 開發 註1
  • 原始碼在 GitHub 上開源,並採用 MIT 授權條款
  • Windows、Linux 和 macOS 等作業系統皆有支援

註1:Electron 是 GitHub 開發的一個開源框架。開頭提到的 Atom 也是基於這個框架開發的。

安裝

這邊可以直接到 VSCode 的官方網站來直接下載,或是透過以下方式安裝:

MacOS

$ brew cask install visual-studio-code

Linux

Ubuntu / Debian

  1. 先到 VSCode 的網站
  2. 下載 .deb,並透過 apt 安裝
$ sudo apt install ./<file>.deb

RHEL / Fedora / CentOS

  • dnf
$ sudo dnf check-update
$ sudo dnf install code
  • yum
$ yum check-update
$ sudo yum install code

若使用的工具不在上述或是安裝遇到問題,可以參考官方這份文件

執行

安裝後,可以直接使用 Command Line 開啟:

$ code <path>

像筆者使用 MacOS,直接官網下載的檔案安裝後,在 Terminal 發現 code 不存在的話,請跟著以下步驟:

  1. 按下 F1 或是 cmd + shift + P
  2. 輸入 Shell Command: Install 'code' command in PATH 並按下 Enter

完成以上兩個步驟後,重開 Terminal 就可以使用 code 來開啟資料夾或檔案了

接著開啟 VSCode 後應該就會看到下面這個畫面: post-VSCode 的奇幻旅程

接著就來看看 VSCode 一些功能:

內建 Terminal

  • 快捷鍵: cmd + `

按下快捷鍵後,下方就可以看到 Terminal 的畫面,如下圖所示:

post-VSCode 的奇幻旅程

而 VSCode 預設的 Terminal 字型跟 Editor: Font Family 一樣,也就是 Menlo, Monaco, 'Courier New', monospace。如果想要更換字體,可以在設定中加入 "terminal.integrated.fontFamily": "<字型>"

設定

  • 快捷鍵: cmd + ,

post-VSCode 的奇幻旅程

按下快捷鍵後,就會看到像上方圖片一樣的設定檔畫面,而更改設定的方式有兩種

  1. 如上圖,可以直接點選更改設定值
  2. 點選圖片中,紅色框框的按鈕,會開啟一個 settings.json 的檔案,在上方的 內建 Terminal 部分所提到的 "terminal.integrated.fontFamily": "<字型>" ,也是直接加到這檔案內即可生效

而眼尖的讀者應該也發現在設定的畫面中,有區分使用者與工作區兩種,接下來就談談這兩種的區別吧!

使用者

這邊的使用者,是指當前登入該台電腦的使用者,所以只要是同一個使用者,無論開啟任何資料夾或檔案,都可以使用到一樣的設定,而各個作業系統的 settings.json 檔案路徑如下:

  • Windows: %APPDATA%\Code\User\settings.json
  • MacOS: $HOME/Library/Application Support/Code/User/settings.json
  • Linux: $HOME/.config/Code/User/settings.json

工作區

而這邊的工作區,是指當前開啟的資料夾,更改這邊的設定後會在資料夾的目錄下產生一個 .vscode 的資料夾,裡面存著 settings.json 的檔案。如果是專案上想要要有些共通的設定的話,就可以更改這邊的設定達到一致性

在這邊要注意的是,工作區的設定優於使用者設定,所以當使用 VSCode 的時候,發現跟原本設定怎麼有些出入時,就先檢查一下工作區的設定吧。

快捷鍵

介紹工具怎麼不介紹快捷鍵呢,好好使用快捷鍵可以達到事半功倍呢,接下來讓筆者一一介紹一些筆者常用的快捷鍵:

開啟快捷鍵設定的畫面

  • 快捷鍵: cmd + K + cmd + S
  • 更改快捷鍵的方式:
    1. 點選要更改快捷鍵的項目
    2. 點選項目前方的筆,或是按下快捷鍵 cmd + K + cmd + K
  • 設定檔路徑:
    • Windows: %APPDATA%\Code\User\keybindings.json
    • MacOS: $HOME/Library/Application Support/Code/User/keybindings.json
    • Linux: $HOME/.config/Code/User/keybindings.json

將整行向上(下)複製

  • 快捷鍵:
    • 向上複製: alt(option) + shift + up
    • 向下複製: alt(option) + shift + down

有時候遇到一樣的東西要寫很多行,還在使用 複製 + Enter + 貼上嗎?不如來試試看這個快捷鍵,這邊筆者有更改過快捷鍵,只要按下 cmd + up 或是 cmd + down 就可以快速地向上或向下複製一樣的東西了,如果要複製多行的話,把要複製的那幾行選取起來,再按下快捷鍵即可

更改當前檔案的 language mode

  • 快捷鍵: cmd + K + M

開啟 Markdown 的預覽畫面

  • 快捷鍵: cmd + K + V

快速選取「下一個」與選取項目相同的項目

  • 快速鍵: cmd + D
  • 使用方式: 選取文字後按下快捷鍵
  • 示意圖:
    • 點選前:

post-VSCode 的奇幻旅程

  • 點選後:

post-VSCode 的奇幻旅程

快速選取「所有」與選取項目相同的項目

  • 快速鍵: cmd + L
  • 使用方式: 選取文字後按下快捷鍵

快速開啟目標檔案

  • 快速鍵: cmd + P
  • 使用方式: 按下快捷鍵後,輸入要開啟的 檔案名稱 或是 路經 + 檔案名稱 後,按下 Enter 即可開啟

到達指定行數

  • 快速鍵: control + G
  • 使用方式: 按下快捷鍵後,輸入要到達的行數並按下 Enter,即可到達該行數

註解

  • 快速鍵: cmd + /

以上就是筆者日常常用的快捷鍵,如果有其他需求,不如先找找快捷鍵的設定裡面,有沒有各位需要的快捷鍵功能喔

套件 Extension

在 VSCode 裡面按下 cmd + shift + X 或是前往 VSCode Marketplace 都可以來尋找並安裝所需要的套件。如果是初次使用 VSCode 或是不知道該裝什麼套件的話,可以在 Extension 搜尋的地方輸入 Show Recommended Extension,就會列出 VSCode 建議安裝的套件,不過這邊還是要依照每個人使用需求去安裝。

如果是其他 Editor 使用習慣的使用者, VSCode 也有對應的快捷鍵可以安裝,只要按下 cmd + K + cmd + M ,就會列出其他 Editor 快捷鍵的套件以供安裝,以下推薦幾個筆者使用的套件:

結語

我們 VSCode 的啟航就到這了,大家或多或少對 VSCode 有進一步的認識 吧(?

透過這次的介紹,希望可以讓各位將 VSCode 打造成更順手的 Editor,而下一次將帶領大家探索 Extension 新大陸,並試著寫出屬於自己的套件。(ง๑ •̀_•́)ง