from Visual Studio Code

由於現階段對於 VS Code 及 Terminal 的操作複雜度不高，從安裝到實作上也較少遇到難以解決的問題，此篇筆記主要整理幾個常用功能及實用快捷鍵，以便需要時查詢。

VS Code 常用功能及快捷鍵

1. 同時選取多個相同變數：command⌘ + D

在撰寫類似邏輯、複製 Bootstrap 元件時，常常需要同時修改相同文字或變數，此時 command⌘ + D 就是必學的好用快捷鍵！

VS Code 同時選取多個相同變數

2. 同時選取多行：option⌥ + 游標點擊

有時候我們不是要編輯一模一樣的文字，而是要針對某幾個段落縮排或作微調，此時就可以使用 option⌥ + 游標點擊 同時選取多行。

VS Code 同時選取多行

3. 在 VS Code 視窗中開啟 Terminal：control + ~

開始使用本地環境（自己的主機）架設 server 和 database 後，同時開啟兩三個 Terminal 以及 text editor 是很正常的，在 VS Code 中開啟 Terminal 能有效增加螢幕的利用率，能避免在各個視窗間反覆切換。

在 VS Code 視窗中開啟 Terminal

4. 打開 Command Palette 功能面板查閱需要的功能：shift⇧ + command⌘ + P

在開發的過程中，難免會遇到許多未知的時刻或問題，有時用 shift⇧ + command⌘ + P 打開 Command Palette 功能面板就能得到答案！

VC Code 的 Command Palette 功能面板

Terminal for Mac 常用功能及快捷鍵

Terminal 就是可以直接跟電腦溝通的操作介面，有別於平常使用的圖形介面 GUI（例如：利用滑鼠及桌面直覺式的操作），往往需使用各種命令文字 command 來進行操作。善用 Terminal 也是全端工程師的入門必備技能之一，接下來會大量地使用。

1. 進入資料夾：cd

當要操作某專案的檔案時，必須先進入此專案資料夾，才能使用其中的檔案。我們會使用 cd 加上資料夾位置來進入，就是切換目錄（change directory）的指令。

[~] $ cd 路徑/資料夾名稱

Terminal command: cd

2. 新增資料夾：mkdir

接下來會有非常多實作的專案練習，未來除了公司或自己接的專案外，可能也會同時進行自己的 Side project。做好資料夾分類是非常重要的！

我們會使用 mkdir 加上資料夾名稱來新增（make directory）。

[~] $ mkdir 資料夾名稱

3. 新增檔案：touch（macOS 限定）

在建構視覺呈現的模板時，常常需要同時新增多個檔案，此功能就頗好用。我們使用 touch 加上檔案名稱（多個檔案時，在檔名中加空格）來新增。

[~/test] $ touch pic.jpg text.txt main.js style.css index.html

4. 列出資料夾內所有檔案：ls -a

ls -a （list all）可以列出資料夾內包含隱藏檔的所有檔案，在專案啟動時會常常用來檢查是否安裝或啟動成功（例如：git 和 npm 的初始化）。

[~/test] $ ls -a

Terminal command: mkdir, touch, ls

5. 移除整個專案資料夾：rm -rf

rm 只能用來刪除檔案，而在刻意練習各教材專案時，會需要刪除整個專案資料夾後重新實作，此時就會用 rm -rf （recursive force） 將資料夾連同每個檔案都強制執行刪除。要特別小心的是，此一指令會將資料夾完全移除，將無法再垃圾桶中找到。

[~] $ rm -rf test

Terminal command: rm -rf

6. 快速開啟 VS Code：code .

在 VS Code 和 Terminal 中分別完成設定後，方可使用 code . 指令在 VS Code 中開啟整個專案內所有檔案。

用 code 指令開啟 VS Code

7. 完全關閉 Terminal：command⌘ + Q

在專案告一段落要休息時，使用 command⌘ + Q 可以快速關閉所有 Terminal，也能有效節省的背景運作的資源。

8. 放大縮小文字 Zoom in & out：command⌘ + "+" or "-"

身為全端開發者，維護良好視力是必須的，善用 command⌘ + "+"可放大 Terminal，讓閱讀更舒適！

command⌘ + "+" 放大 Terminal

閱讀更多

關於本系列更多內容及導讀，請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。