|
工欲善其事必先利其器！如果你是做前端開發(fā)，我推薦 VS Code 作為「主力開發(fā)工具」。
VS Code 的全稱是 Visual Studio Code，是一款開源的、免費(fèi)的、跨平臺(tái)的、高性能的、輕量級(jí)的代碼編輯器。它在性能、語言支持、開源社區(qū)方面，都做得很不錯(cuò)。
VS Code 的特點(diǎn)
-
VS Code 的使命，是讓開發(fā)者在編輯器里擁有 IDE 那樣的開發(fā)體驗(yàn)，比如代碼的智能提示、語法檢查、圖形化的調(diào)試工具、插件擴(kuò)展、版本管理等。 -
跨平臺(tái)支持 MacOS、Windows 和 Linux 等多個(gè)平臺(tái)。 -
VS Code 的源代碼以 MIT 協(xié)議開源。 -
支持第三方插件，功能強(qiáng)大，生態(tài)系統(tǒng)完善。 -
VS Code 自帶了 JavaScript、TypeScript 和 Node.js 的支持。也就是說，你在書寫 JS 和 TS 時(shí)，是自帶智能提示的。當(dāng)然，其他的語言，你可以安裝相應(yīng)的擴(kuò)展包插件，也會(huì)有智能提示。
VS Code 的安裝
VS Code 的安裝很簡(jiǎn)單，直接去官網(wǎng)下載安裝包，然后雙擊安裝即可。
VS Code 快捷鍵
VS Code 用得熟不熟，首先就看你是否會(huì)用快捷鍵。以下列出的內(nèi)容，都是常用快捷鍵，而加粗部分的快捷鍵，使用頻率則非常高。
1、工作區(qū)快捷鍵
| Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 |
|---|
| Cmd + Shift + P | Ctrl + Shift + P，F(xiàn)1 | 顯示命令面板 | | | Cmd + B | Ctrl + B | 顯示/隱藏側(cè)邊欄 | 很實(shí)用 | Cmd + \ | Ctrl + \ | 創(chuàng)建多個(gè)編輯器 | 【重要】抄代碼利器 | | Cmd + 1、2 | Ctrl + 1、2 | 聚焦到第 1、第 2 個(gè)編輯器 | 同上重要 | | cmd +/- | ctrl +/- | 將工作區(qū)放大/縮小（包括代碼字體、左側(cè)導(dǎo)航欄） | 在投影儀場(chǎng)景經(jīng)常用到 | | Cmd + J | Ctrl + J | 顯示/隱藏控制臺(tái) | | | Cmd + Shift + N | Ctrl + Shift + N | 重新開一個(gè)軟件的窗口 | 很常用 | | Cmd + Shift + W | Ctrl + Shift + W | 關(guān)閉軟件的當(dāng)前窗口 | | | Cmd + N | Ctrl + N | 新建文件 | | | Cmd + W | Ctrl + W | 關(guān)閉當(dāng)前文件 | |
2、跳轉(zhuǎn)操作
| Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 |
|---|
| Cmd + ` | 沒有 | 在同一個(gè)軟件的多個(gè)工作區(qū)之間切換 | 使用很頻繁 | | Cmd + Option + 左右方向鍵 | Ctrl + Pagedown/Pageup | 在已經(jīng)打開的多個(gè)文件之間進(jìn)行切換 | 非常實(shí)用 | | Ctrl + Tab | Ctrl + Tab | 在已經(jīng)打開的多個(gè)文件之間進(jìn)行跳轉(zhuǎn) | 不如上面的快捷鍵快 | | Cmd + Shift + O | Ctrl + shift + O | 在當(dāng)前文件的各種方法之間進(jìn)行跳轉(zhuǎn) | | | Ctrl + G | Ctrl + G | 跳轉(zhuǎn)到指定行 | | Cmd+Shift+\ | Ctrl+Shift+\ | 跳轉(zhuǎn)到匹配的括號(hào) | |
3、移動(dòng)光標(biāo)
| Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 |
|---|
| 方向鍵 | 方向鍵 | 在單個(gè)字符之間移動(dòng)光標(biāo) | 大家都知道 | | option + 左右方向鍵 | Ctrl + 左右方向鍵 | 在單詞之間移動(dòng)光標(biāo) | 很常用 | | Cmd + 左右方向鍵 | Fn + 左右方向鍵 | 在整行之間移動(dòng)光標(biāo) | 很常用 | | Cmd + ← | Fn + ←（或 Win + ←） | 將光標(biāo)定位到當(dāng)前行的最左側(cè) | 很常用 | | Cmd + → | Fn + →（或 Win + →） | 將光標(biāo)定位到當(dāng)前行的最右側(cè) | 很常用 | | Cmd + ↑ | Ctrl + Home | 將光標(biāo)定位到文章的第一行 | | | Cmd + ↓ | Ctrl + End | 將光標(biāo)定位到文章的最后一行 | | | Cmd + Shift + \ | | 在代碼塊之間移動(dòng)光標(biāo) | |
4、編輯操作
| Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 |
|---|
| Cmd + Enter | Ctrl + Enter | 在當(dāng)前行的下方新增一行，然后跳至該行 | 即使光標(biāo)不在行尾，也能快速向下插入一行 | | Cmd+Shift+Enter | Ctrl+Shift+Enter | 在當(dāng)前行的上方新增一行，然后跳至該行 | 即使光標(biāo)不在行尾，也能快速向上插入一行 | | Option + ↑ | Alt + ↑ | 將代碼向上移動(dòng) | 很常用 | | Option + ↓ | Alt + ↓ | 將代碼向下移動(dòng) | 很常用 | | Option + Shift + ↑ | Alt + Shift + ↑ | 將代碼向上復(fù)制 | | | Option + Shift + ↓ | Alt + Shift + ↓ | 將代碼向下復(fù)制 | 寫重復(fù)代碼的利器 |
5、多光標(biāo)編輯
| Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 |
|---|
| Cmd + Option + 上下鍵 | Ctrl + Alt + 上下鍵 | 在連續(xù)的多列上，同時(shí)出現(xiàn)光標(biāo) | | | Option + 鼠標(biāo)點(diǎn)擊任意位置 | Alt + 鼠標(biāo)點(diǎn)擊任意位置 | 在任意位置，同時(shí)出現(xiàn)光標(biāo) | | | Option + Shift + 鼠標(biāo)拖動(dòng) | Alt + Shift + 鼠標(biāo)拖動(dòng) | 在選中區(qū)域的每一行末尾，出現(xiàn)光標(biāo) | | | Cmd + Shift + L | Ctrl + Shift + L | 在選中文本的所有相同內(nèi)容處，出現(xiàn)光標(biāo) | |
其他的多光標(biāo)編輯操作：（很重要）
6、刪除操作
| Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 |
|---|
| Cmd + shift + K | Ctrl + Shift + K | 刪除整行 | 「Cmd + X」的作用是剪切，但也可以刪除整行 | | option + Backspace | Ctrl + Backspace | 刪除光標(biāo)之前的一個(gè)單詞 | 英文有效，很常用 | | option + delete | Ctrl + delete | 刪除光標(biāo)之后的一個(gè)單詞 | | | Cmd + Backspace | | 刪除光標(biāo)之前的整行內(nèi)容 | 很常用 | | Cmd + delete | | 刪除光標(biāo)之后的整行內(nèi)容 | |
備注：上面所講到的移動(dòng)光標(biāo)、編輯操作、刪除操作的快捷鍵，在其他編輯器里，大部分都適用。
7、編程語言相關(guān)
| Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 |
|---|
| Cmd + / | Ctrl + / | 添加單行注釋 | 很常用 | | Option + Shift + F | Alt + shift + F | 代碼格式化 | 很常用 | | F2 | F2 | 以重構(gòu)的方式進(jìn)行重命名 | 改代碼備 | | Ctrl + J | | 將多行代碼合并為一行 | Win 用戶可在命令面板搜索”合并行“ | | Cmd + | | | | | Cmd + U | Ctrl + U | 將光標(biāo)的移動(dòng)回退到上一個(gè)位置 | 撤銷光標(biāo)的移動(dòng)和選擇 |
8、搜索相關(guān)
| Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 |
|---|
| Cmd + Shift + F | Ctrl + Shift +F | 全局搜索代碼 | 很常用 | | Cmd + P | Ctrl + P | 在當(dāng)前的項(xiàng)目工程里，全局搜索文件名 | | | Cmd + F | Ctrl + F | 在當(dāng)前文件中搜索代碼，光標(biāo)在搜索框里 | | | Cmd + G | F3 | 在當(dāng)前文件中搜索代碼，光標(biāo)仍停留在編輯器里 | 很巧妙 |
9、查找某個(gè)函數(shù)在哪些地方被調(diào)用了
比如我已經(jīng)在a.js文件里調(diào)用了 foo()函數(shù)。那么，如果我想知道foo()函數(shù)在其他文件中是否也被調(diào)用了，該怎么做呢？
做法如下：在 a.js 文件里，選中foo()函數(shù)（或者將光標(biāo)放置在foo()函數(shù)上），然后按住快捷鍵「Shift + F12」，就能看到 foo()函數(shù)在哪些地方被調(diào)用了，比較實(shí)用。
10、鼠標(biāo)操作
-
在當(dāng)前行的位置，鼠標(biāo)三擊，可以選中當(dāng)前行。 -
用鼠標(biāo)單擊文件的行號(hào)，可以選中當(dāng)前行。 -
在某個(gè)行號(hào)的位置，上下移動(dòng)鼠標(biāo)，可以選中多行。
|
