iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
6
Modern Web

For 前端小幼苗的圖解筆記系列 第 2

[Editor] CodePen / VS Code 常用快速鍵

開發推薦使用 Visual Studio Code ;另外可以使用線上即時渲染結果的編輯器 Codepen,用於小練習 / 快速試調 / 快速分享:


Codepen

使用線上編輯器可快速編輯 HTML / CSS / JavaScript,即時瀏覽網頁畫面,方便快速學習,例如查看教程時可以一邊進行實作練習,個人最常用的是 Codepen。( 相信你點開就會用了吧!我就不教學啦! )

其他類似的線上編輯器服務:


Visual Studio Code

工欲善其事必先利其器,好的 Editor / IDE 讓你開發速度加倍速,爛的編輯器讓你倒退嚕。
再把快速鍵的手感練起來,整個寫 Code 速度就是快的不要不要的,沒有滑鼠也能飛起來!(是要飛去哪啦!?

Visual Studio Code ( 簡稱 VS Code ) 跟 Sublime 都是目前滿熱門的編輯器。本系列教學以 VS Code 為主。

選擇 VS Code 主要原因:

  1. 輕量
  2. 插件多
  3. 使用戶多
    4. 轉職前看到前端工程師同事在用
    5. 轉職進修中看到講師們在用
    6. 轉職後看到公司同事在用

嘿啦~反正就這樣。直接送上 VS Code 下載傳送門

相信你載了之後摸個幾下就會使用了吧~我假設你秒會開啟檔案/開啟資料夾新增/編輯檔案囉!(超不負責任的教學文XD)。那就接著分享我個人常用的快速鍵:


開啟/關閉 檔案&專案資料夾

Hotkey Mac Windows Remark
開啟文件 Cmd + O Ctrl + O -
開啟資料夾 Cmd + K + L Ctrl + K + L -
儲存文件 Cmd + S Ctrl + S -
儲存所有文件 Cmd + Option + S Ctrl + k   S -
另存新檔 Cmd + Shift + S Ctrl +Shift + S -
開新檔案 Cmd + Ctrl + -
開新VSCode視窗 Cmd + Shift + Ctrl + Shift + -
關閉檔案/關閉窗格 Cmd + W Ctrl + WCtrl + F4 -
關閉所有檔案 Cmd + k Cmd + W Ctrl + k  Ctrl + W -
關閉整個 VS Code Cmd + Shift + W Ctrl + Shift + W -
快速搜尋檔案並開啟 Cmd + P Ctrl + P 註1
命令列 F1Cmd + Shift + P F1Ctrl + Shift + P 註1

備註

  1. 開頭輸入 > 為指令模式;沒有 > 開頭時為搜尋檔名快速開啟。

面板開關/設定/編輯檢視設定

Hotkey Mac Windows Remark
[VS Code] 放大 Cmd + + Ctrl + + -
[VS Code] 縮小 Cmd + Shift + + Ctrl + - -
[Scroll Page ] 往上滾 / 往下滾 Cmd + / Ctrl + / -
[面板開/關] 左側欄 Cmd + B Ctrl + B -
[面板開/關] 插件 Cmd + Shift + x Ctrl + Shift + X -
[面板開/關] 終端機 Cmd + ` Ctrl + ` -
[面板控制] 新開終端機 Cmd + Shift + \ Ctrl + Shift + ` -
[面板控制] 分割視窗方式新開終端機 Cmd + \ Ctrl + Shift + 5 -
[面板開/關] 下方面版 Cmd + J Ctrl + J -
[切換開啟中的檔案] 當前窗格的 Cmd + Shift + [ / ] Alt + / -
[切換開啟中的檔案] 列表往下選 Ctrl + tab Ctrl + tab -
└—————————— 往上選 Ctrl + Shift + tab Ctrl + Shift + tab -
[切換檔案] 所在窗格的檔案 Control + 1 / 2 ... Alt + 1 / 2 ...
[切換檔案] 切換/新增第N個窗格 Cmd + 1 / 2 ... Ctrl + 1 / 2 ... 註1
[文檔檢視] 自動折行檢視 option + Z Alt + Z 註2
用戶設置 Cmd + , Ctrl + ,
快速鍵設置 Cmd + K Cmd + S Ctrl + K Ctrl + S

備註

  1. 沒有第N個分割窗格時等同於新開分割窗格
  2. 只是方便檢視,非編輯文檔本身

編輯 Code 快鍵 - 當前行/跳至行 ...

Hotkey Mac Windows Remark
復原 Cmd + Z Ctrl + Z -
重做 Cmd + Shift + Z Ctrl + Shift + Z -
剪下 Cmd + X Ctrl + X 註1
複製 Cmd + C Ctrl + C 註1
貼上 Cmd + V Ctrl + V -
[刪除] 該行 Cmd + Shift + K Ctrl + Shift + K 多行也適用
[刪除] 該行游標之後的文字 Ctrl + K -
[移動] 往上/下行移 Option + / Alt + / 多行也適用
[複製] 往上/下複製 Option + Shift + / Alt + Shift + / 多行也適用
[縮排] 往後 Cmd + ]tab tab]
[縮排] 往前 Cmd + [Shift + tab] Shift + tab]
註解 Cmd + / Ctrl + /
文件自動排版 Alt + Shift + F Alt + Shift + F 註2

備註

  1. 沒有選取字時也有效作用於整行
  2. coding style 略有不同,使用自動排版務必謹慎。

游標快速跳至...

Hotkey Mac Windows Remark
[跳至] 畫面上的首行/末行 Fn + / -
[跳至] 文件第 1 行 Cmd + Ctrl + Home -
└———— 最後 1 行 Cmd + Ctrl + End -
[跳至] 目前行 最前面 Cmd + -
└————— 最後面 Cmd + -
[選取] 至目前行 最前面 Cmd + Shift + -
└—————— 最後面 Cmd + Shift + -
[選取] 向下選取相同字 Cmd + D Ctrl + D 選取字時按.註2
[選取] 選取所有相同字 Cmd + Shift + L Ctrl +Shift + L 選取字時按
[跳至] 前 / 後一個字 Option + / -
[跳至] 更動處下一個 Option + F5 Alt + F5 -
└————— 上一個 Option + Shift + F5 Alt + Shift + F5 -
[跳至] 該定義 F12 F12 註1

備註

  1. 例如游標停留在變數或function name時,按F12將直接跳至其定義的行。
  2. 沒選取字時將自動選取游標所在的單字

搜尋/取代

Hotkey Mac Windows Remark
[搜尋] 全專案 Cmd + Shift + F Ctrl + Shift + F 左側搜尋/取代面板
[搜尋] 特定資料夾 Shift + Option + F Shift + Alt + F 左側選取資料夾後按
[搜尋] 當前文檔 Cmd + F Ctrl + F 可先選字再按鍵
└ 選至下一個 EnterF3 EnterShift + F3 -
└ 選至上一個 Shift + Enter Shift + Enter -
└ 全選 Option + Enter Alt + Enter -
[取代] 目前文檔 Cmd +Option + F Ctrl + H 可先選字再按鍵
└逐一取代 Enter Enter 目前文檔取代結果時按
[取代] 全專案 Cmd + Shift + H Ctrl + Shift + H 左側搜尋/取代
└ 進階篩選欄 Cmd + Shift + J Ctrl + Shift + J 在搜尋/取代面板時按
└全部取代 Cmd +Option + Enter Ctrl + Alt + Enter 列表取代結果時按

左側檔案列表區,點選特定檔案後...

Hotkey Mac Windows Remark
以OS檔案總管開啟該檔所屬資料夾 Cmd +Option + R Shift + Alt + R -
複製該檔相對路徑 Cmd +Option + C Ctrl + k  Ctrl + Shift + C 備註1
複製該檔絕對路徑 Cmd +Option + Shift + C Shift + Alt+ C 備註1

備註:

  1. Path / Relative Path
    • 絕對路徑:...(略)/project/index.html
    • 相對路徑:index.html

Formate 排版自動校正

Hotkey Mac Windows Remark
自動格式化排版 Option + Shift + F Alt + Shift + B 需裝對應語言的 Formatter

瀏覽

Hotkey Mac Windows Remark
預設瀏覽器開啟目前檔案 Option + B Alt + B -
選擇瀏覽器開啟目前檔案 Option + Shift + B Alt + Shift + B -

插件限定

Hotkey Mac Windows Extention
將當前行加入至書籤 Cmd + Option + K Ctrl + Alt + k Bookmarks
運行 Live Server Cmd + L + O Alt + Shift + B Live Server

(↑ 這區快速鍵是特定插件定義的。實用插件推薦將於下一篇介紹。)


完整快速鍵一覽表:

快速鍵狂熱者可於下方參考完整版:

  • VS Code 官方快速鍵:WindowsMacOS

  • 在 VS Code 按 Cmd + K Cmd + SCtrl + K Ctrl + S )開啟快速鍵一覽表或變更定義:


上述為我平時寫 Code 會滿頻繁使用到的動作,相信看完上面的表格有些還是看不太出來怎麼用,自已在 VS Code 上 Try Try 吧!

(本來想錄個GIF動圖……之後有空再來補好了~現在先偷懶抓別人的教學文來分享:vscode-windows-版本基本常用快捷鍵|ucamc

手感是時間累積讓肌肉去記憶,一剛開始操作特定動作時刻意地去查看快速鍵,但隨著使用的次數變多就能夠一想到要做什麼動作手就自動反應對應按鍵,寫 code 速度就會變快囉。


同場加映:英打練起來

除了快速鍵的手感之外,英打的準確度是更重要的!自己寫 code 還滿常踩到打錯字的雷。
若你英打還不夠快、不夠準的話,每天睡前腦袋放空讓手練一波 ( 5-10 分鐘就好了 ) 。
推薦六角學院開發的線上英打練習 Keybr ,針對練習過程中的錯字機率去加強特定的字母練習:

傳送門:Keybr詳細介紹與教學


邊寫code邊搭配著快速鍵慢慢把手感練起來吧!
下一篇將介紹個人常用的 VS Code 插件,使開發過程更加便利!


個人 Blog: https://eudora.cc/


上一篇
《For 前端小幼苗的圖解筆記》參賽宣言
下一篇
[VS Code] 實用插件&個人化設定
系列文
For 前端小幼苗的圖解筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言