VS Code 的全稱是 Visual Studio Code，是一款開源的、免費的、跨平台的、高性能的、輕量級的代碼編輯器。這里只講在前端開發中的使用。
VS Code 的安裝
- VS Code 官網：https://code.visualstudio.com
VS Code快捷鍵
移動光標
| Mac快捷鍵 | Win快捷鍵 | 作用 | 備注 |
|---|---|---|---|
| Cmd + ← | Fn + ← | 將光標定位到當前行的最左側 | 很常用 |
| Cmd + → | Fn + → | 將光標定位到當前行的最右側 | 很常用 |
| Cmd + ↑ | Ctrl + Home | 將光標定位到文章的第一行 | |
| Cmd + ↓ | Ctrl + End | 將光標定位到文章的最后一行 |
根據上面的快捷鍵，我們可以舉一反三。補充如下：
-
「方向鍵」：在單個字符之間移動光標
-
「option + 左右方向鍵」：在單詞之間移動光標（很常用）。注：Win 快捷鍵是「Ctrl + 左右方向鍵」。
-
「Cmd + 左右方向鍵」：在整行之間移動光標（很常用）。注：Win 的快捷鍵是「Fn + 左右方向鍵」
-
「
Cmd + Shift + \」：在代碼塊之間移動光標。
刪除操作
| Mac快捷鍵 | Win快捷鍵 | 作用 | 備注 |
|---|---|---|---|
| option + Backspace | Ctrl + Backspace | 刪除光標之前的一個單詞 | 英文有效，很常用 |
| option + delete | Ctrl + delete | 刪除光標之后的一個單詞 | |
| Cmd + delete | 刪除光標之前的整行內容 | 很常用 | |
| Cmd + delete | 刪除光標之后的整行內容 | ||
| Cmd + shift + K | Ctrl + Shift + K | 刪除整行 | 「Cmd + X」的作用是剪切，但也可以刪除整行 |
編輯操作
| Mac快捷鍵 | Win快捷鍵 | 作用 | 備注 |
|---|---|---|---|
| Cmd + Enter | Ctrl + Enter | 在當前行下面新增一行，然后跳至該行 | 即使光標不在行尾，也能快速向下插入一行 |
| Option + ↑ | Alt + ↑ | 將代碼向上移動 | 很常用 |
| Option + ↓ | Alt + ↓ | 將代碼向下移動 | 很常用 |
| Option + Shift + ↑ | Alt + Shift + ↑ | 將代碼向上復制 | 很常用 |
| Option + Shift + ↓ | Alt + Shift + ↓ | 將代碼向下復制 | 很常用 |
js語言相關
| Mac快捷鍵 | Win快捷鍵 | 作用 | 備注 |
|---|---|---|---|
| Cmd + / | Ctrl + / | 添加單行注釋 | 很常用 |
| Option + Shift + F | Alt + shift + F | 代碼格式化 | 很常用 |
| Ctrl + J | 將多行代碼合並為一行 | Win 用戶可在命令面板搜索”合並行“ | |
| Cmd + | |||
| Cmd + U | Ctrl + U | 將光標的移動回退到上一個位置 | 撤銷光標的移動和選擇 |
跳轉操作
| Mac快捷鍵 | Win快捷鍵 | 作用 | 備注 |
|---|---|---|---|
| Ctrl + Tab | Ctrl + Tab | 在已經打開的文件之間進行跳轉 | |
| Cmd + P | Ctrl + P | 在當前的項目工程里，全局搜索文件 | 很常用 |
| Ctrl + G | Ctrl + G | 跳轉到指定行 | |
| Cmd + Shift + O | Ctrl + shift + O | 在當前文件的各種方法之間進行跳轉 |
搜索
| Mac快捷鍵 | Win快捷鍵 | 作用 | 備注 |
|---|---|---|---|
| Cmd + F | Ctrl + F | 在當前文件中搜索，光標在搜索框里 | |
| Cmd + G | F3 | 在當前文件中搜索，光標仍停留在編輯器里 | 很巧妙 |
| Cmd + Shift + F | Ctrl + Shift +F | 全局搜索 |
工作區快捷鍵
| Mac快捷鍵 | Win快捷鍵 | 作用 | 備注 |
|---|---|---|---|
| cmd +/- | ctrl +/- | 將工作區放大/縮小（包括代碼字體、左側導航欄） | 在投影儀場景經常用到 |
| Cmd + B | Ctrl + B | 顯示/隱藏側邊欄 | 很實用 |
Cmd + \ |
Ctrl + \ |
創建多個編輯器 | 比較實用 |
| Cmd + Option + 左右方向鍵 | Ctrl + Pagedown/Pageup | 在已經打開的文件之間進行切換 | 非常實用 |
| Ctrl + Tab | Ctrl + Tab | 在已經打開的文件之間進行跳轉 | 不如上面的快捷鍵實用 |
| Cmd + J | Ctrl + J | 顯示/隱藏控制台 |
VS Code插件推薦
VS Code 有一個很強大的功能就是支持插件擴展。
open in browser
安裝open in browser插件后，在 HTML 文件中「右鍵選擇 --> Open in Default Browser」，即可在瀏覽器中預覽網頁。