只是個幫助忙碌的專業人士和父母找回時間、平衡生活的斜槓老爸。 我探索人生的大小賽局,分享優化人生的實用觀點(關於人類、科技和未來)。
在我的個人網站上獲取最新的觀點:https://klkuo.guru
由於現階段對於 VS Code 及 Terminal 的操作複雜度不高,從安裝到實作上也較少遇到難以解決的問題,此篇筆記主要整理幾個常用功能及實用快捷鍵,以便需要時查詢。
在撰寫類似邏輯、複製 Bootstrap 元件時,常常需要同時修改相同文字或變數,此時 command⌘ + D
就是必學的好用快捷鍵!
VS Code 同時選取多個相同變數
有時候我們不是要編輯一模一樣的文字,而是要針對某幾個段落縮排或作微調,此時就可以使用 option⌥ + 游標點擊
同時選取多行。
VS Code 同時選取多行
開始使用本地環境(自己的主機)架設 server 和 database 後,同時開啟兩三個 Terminal 以及 text editor 是很正常的,在 VS Code 中開啟 Terminal 能有效增加螢幕的利用率,能避免在各個視窗間反覆切換。
在 VS Code 視窗中開啟 Terminal
在開發的過程中,難免會遇到許多未知的時刻或問題,有時用 shift⇧ + command⌘ + P
打開 Command Palette 功能面板就能得到答案!
VC Code 的 Command Palette 功能面板
Terminal 就是可以直接跟電腦溝通的操作介面,有別於平常使用的圖形介面 GUI(例如:利用滑鼠及桌面直覺式的操作),往往需使用各種命令文字 command 來進行操作。善用 Terminal 也是全端工程師的入門必備技能之一,接下來會大量地使用。
當要操作某專案的檔案時,必須先進入此專案資料夾,才能使用其中的檔案。我們會使用 cd
加上資料夾位置來進入,就是切換目錄(change directory)的指令。
[~] $ cd 路徑/資料夾名稱
Terminal command: cd
接下來會有非常多實作的專案練習,未來除了公司或自己接的專案外,可能也會同時進行自己的 Side project。做好資料夾分類是非常重要的!
我們會使用 mkdir
加上資料夾名稱來新增(make directory)。
[~] $ mkdir 資料夾名稱
在建構視覺呈現的模板時,常常需要同時新增多個檔案,此功能就頗好用。我們使用 touch
加上檔案名稱(多個檔案時,在檔名中加空格)來新增。
[~/test] $ touch pic.jpg text.txt main.js style.css index.html
ls -a
(list all)可以列出資料夾內包含隱藏檔的所有檔案,在專案啟動時會常常用來檢查是否安裝或啟動成功(例如:git 和 npm 的初始化)。
[~/test] $ ls -a
Terminal command: mkdir, touch, ls
rm
只能用來刪除檔案,而在刻意練習各教材專案時,會需要刪除整個專案資料夾後重新實作,此時就會用 rm -rf
(recursive force) 將資料夾連同每個檔案都強制執行刪除。要特別小心的是,此一指令會將資料夾完全移除,將無法再垃圾桶中找到。
[~] $ rm -rf test
Terminal command: rm -rf
在 VS Code 和 Terminal 中分別完成設定後,方可使用 code .
指令在 VS Code 中開啟整個專案內所有檔案。
用 code 指令開啟 VS Code
在專案告一段落要休息時,使用 command⌘ + Q
可以快速關閉所有 Terminal,也能有效節省的背景運作的資源。
身為全端開發者,維護良好視力是必須的,善用 command⌘ + "+"
可放大 Terminal,讓閱讀更舒適!
command⌘ + "+" 放大 Terminal
關於本系列更多內容及導讀,請閱讀作者於 Medium 個人專欄 【無限賽局玩家 Infinite Gamer | Publication – 】 上的文章 《用 JavaScript 打造全端產品的入門學習筆記》系列指南。