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