工欲善其事,必先利其器,安裝 VS Code


Visual Studio Code(簡稱VS Code)是微軟出品的強大文字編輯 IDE ,功能如同前端開發人員熟知的 Sublime 環境,可以透過圖形化介面來搜尋/查看所需的擴充套件 (Extensions),以下課程可以使用此工具作為前端開發環境;以下列出常用的快速鍵及擴充功能供大家參考,沒有使用過的朋友可以玩看看。

下載 VS Code


快捷鍵速成班

能善用快捷鍵,可以幫助你寫程式寫得更快喔!

電腦上的快捷鍵

Windows 快速鍵 Mac 快速鍵
全選 Ctrl + A ⌘ + A
存檔 Ctrl + S ⌘ + S
重新命名檔案 F2 ↩︎
顯示桌面 Win + D ⌘ + F3
開啟我的電腦 Win + E
切換視窗 Alt + Tab ⌘ + Tab
關閉目前的視窗 Alt + F4 鍵 ⌘ + Q

Chrome上的快捷鍵

參考資料:https://support.google.com/chrome/answer/157179?hl=zh-Hant

Windows 快速鍵 Mac 快速鍵
開啟新視窗 Ctrl + N 鍵 ⌘ + N
開啟並切換至新分頁 Ctrl + T 鍵 ⌘ + T
切換至下一個開啟的分頁 Ctrl + Tab鍵或Ctrl + PgDn鍵 ⌃ + Tab (⌃ = control)
切換至上一個開啟的分頁 Ctrl + Shift + Tab鍵或Ctrl + PgUp鍵 ⌃ + Shift + Tab
開啟目前分頁瀏覽紀錄中的上一頁 Alt + 向左鍵 ⌘ + 向左鍵
開啟目前分頁瀏覽紀錄中的下一頁 Alt + 向右鍵 ⌘ + 向右鍵
將網頁上的所有內容都回復為預設大小 Ctrl + 0 鍵 ⌘ + 0
關閉目前的分頁 Ctrl + W鍵或Ctrl + F4鍵 ⌘ + W
放大網頁上的所有內容 Ctrl 鍵和 + 鍵 ⌘ 和 +鍵
縮小網頁上的所有內容 Ctrl 鍵和 - 鍵 ⌘ 和 -鍵
切換到網址列 Ctrl + L 鍵、Alt + D 鍵或 F6 鍵 ⌘ + L

VS Code快捷鍵

參考資料:https://code.visualstudio.com/docs/getstarted/keybindings
Windows版本:https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Mac版本:https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

Windows 快速鍵 Mac 快速鍵
快速搜尋(列出專案中的其他檔案) Ctrl +P ⌘ + P
註解 / 反註解 Ctrl +/ ⌘ + /
快速建立程式碼 在剛輸入的程式碼後按Tab 在剛輸入的程式碼後按Tab
上下移動單行程式 Alt+↑/Alt+↓ ⌥+↑ / ⌥+↓
導航至前後編輯區塊 Alt+→/Alt+← ⌘+→ / ⌘+←
以字為單位跳躍游標 Ctrl +→/Ctrl+← ⌥+→ / ⌥+←
切換最近使用的兩頁籤 Ctrl+Tab ⌃ + Tab
格式化文件 Shift + Alt + F Shift + ⌥ + F
程式碼縮排操作 Ctrl+[ Ctrl+] ⌘+[ / ⌘+]
程式碼縮排操作 Ctrl+Shift+[ Ctrl+Shift+] ⌘+Shift+[ / ⌘+Shift+]
命令輸入框 F1 F1
在頁面下方開啟Terminal Ctrl+` ⌃ + `
編輯相同文字區塊 Ctrl+D ... ⌘ + D
向上下做跨欄選取 Ctrl+Shift+ Alt+Top / Down ⌘ + Shift + ⌥ + ↑/↓
游標拖曳做上下跨欄選取 Alt+Shift+滑鼠左鍵拖曳 ⌥ + Shift + 滑鼠左鍵拖曳
游標點選做跨欄選取 Alt +滑鼠左鍵點選 ... ⌥ + 滑鼠左鍵點選
在當前行下方插入一行 Ctrl + Enter ⌘ + ↩︎
在當前行上方插入一行 Ctrl + Shift + Enter ⌘ + Shift + ↩︎
開啟擴充套件畫面 Ctrl+Shift+X

超酷的Emmet,Coding加速器

大多數的編輯器都有相對應的 Emmet 套件可以安裝,它能加快並縮短開發者在編寫 HTML 及 CSS 的時間。

VS Code有內建Emmet,但是Sublime沒有,所以這邊堤供喜歡Sublime的朋友安裝Emmet的方法


管理Git的工具

小烏龜 TortoiseGit
sourcetree

results matching ""

    No results matching ""