Vscode

VSCode 的奇幻旅程

by Vense 2019-11-16 00:00:00 UTC

前言

「工欲善其事,必先利其器」,通常看到這個開頭,就知道今天要來介紹工具。在寫程式時,大家通常習慣的 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 後應該就會看到下面這個畫面: VSCode

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

內建 Terminal

  • 快捷鍵: cmd + `

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

Terminal

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

設定

  • 快捷鍵: cmd + ,

Setting

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

  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
  • 使用方式: 選取文字後按下快捷鍵
  • 示意圖:
    • 點選前: cmd+D Before
    • 點選後: cmd+D After

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

  • 快速鍵: 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 新大陸,並試著寫出屬於自己的套件。(ง๑ •̀_•́)ง

«回文章列表