第一次使用VS Code時你應該知道的一切配置

時間 2019-11-05

標籤第一次使用 code 應該知道一切配置简体版

原文原文鏈接

前言

本文最新內容將在GitHub上實時更新。javascript

VS Code 原本是前端人員專用，但因爲它實在是太好用了，因而，各類開發方向的碼農也正在用 VS Code 做爲他們的主力編程工具。甚至是一些寫做的同窗，也把 VS Code 做爲 markdown 寫做工具。css

寫下這篇文章，是順勢而爲。html

VS Code 的介紹

VS Code 的全稱是 Visual Studio Code，是一款開源的、免費的、跨平臺的、高性能的、輕量級的代碼編輯器。它在性能、語言支持、開源社區方面，都作的很不錯。前端

編輯器與 IDE

IDE和編輯器是有區別的：java

IDE ：對代碼會有較好的智能提示，同時側重於工程項目，對項目的開發、調試工做有較好的圖像化界面的支持，所以比較笨重。好比 Eclipse 的定位就是 IDE。node
編輯器：要相對輕量許多，側重於文本的編輯。好比 Sublime Text 的定位就是編輯器。再好比 Windows 系統自帶的「記事本」就是最簡單的編輯器。git

須要注意的是，VS Code 的定位是編輯器，而非IDE。但 VS Code 又比通常的編輯器的功能要豐富許多。github

VS Code的一些補充

VS Code 的使命，是讓開發者在編輯器裏擁有 IDE 那樣的開發體驗，好比代碼的智能提示、語法檢查、圖形化的調試工具、插件擴展、版本管理等。web
VS Code 的源代碼以MIT協議開源。編程
VS Code 自帶了 TypeScript 和 Node.js 的支持。也就是說，你在書寫 JS 和 TS 時，是自帶智能提示的。
有一點你可能不知道，VS Code 這個客戶端軟件是用 js 語言開發出來的（具體請自行查閱關鍵字Electron）。有句話說得好：能用 js 實現的功能，最終必定會用 js 實現。

前端利器之爭： VS Code 與 WebStorm

前端小白最喜歡問的一個問題是：哪一個編輯器/IDE 好用？是VS Code仍是 WebStorm （WebStorm 實際上是 IntelliJ IDEA的定製版）？我來作個對比：

哪一個更酷：顯然 VS Code 更酷。
內存佔用狀況：根據個人觀察，VS Code是很佔內存的（尤爲是當你打開多個窗口的時候），但若是你的內存條夠用的話，使用起來是不會有任何卡頓的感受的。相比之下，IDEA 不只很是佔內存，並且還很是卡頓。
使用比例：固然是 VS Code 更勝一籌。先不說別的，我就拿數聽說話，我目前所在的前端團隊有100人左右，絕大部分前端同窗都在用 VS Code，妥妥的。

因此，若是你之後還問這個問題，那就真有些掉底了。

VS Code 的安裝

VS Code 官網：https://code.visualstudio.com

VS Code 的安裝很簡單，直接去官網下載安裝包，而後雙擊安裝便可。

上圖中，直接點擊 download 下載安裝便可。

VS Code快捷鍵

VS Code用得熟不熟，首先就看你是否會用快捷鍵。如下列出的內容，都是經常使用快捷鍵，而加粗部分的快捷鍵，使用頻率則很是高。

掌握10%的內容，足矣應對90%的工做。熟練使用它們，你就已經很牛了。

移動光標

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 + ↓	將代碼向下移動	很經常使用

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	全局搜索	很經常使用

多光標的使用

技巧1：按住「Option」鍵（windows 用戶是按住「Alt」鍵），而後在頁面中但願中現光標的位置點擊鼠標。

技巧2：選中某個文本，而後反覆按住快捷鍵「 Cmd + D 」鍵（windows 用戶是按住「Ctrl + D」鍵），便可將全文中與光標當前所在位置的詞相同的詞逐一加入選擇。

技巧3：選中一堆文本後，按住「Option + Shift + i」鍵（windows 用戶是按住「Alt + Shift + I」鍵），既可在每一行的末尾都建立一個光標。

工做區快捷鍵

Mac快捷鍵	Win快捷鍵	做用	備註
Cmd + B	Ctrl + B	顯示/隱藏側邊欄	很實用
`Cmd + \`	`Ctrl + \`	建立多個編輯器	比較實用
Cmd + Option + 左右方向鍵	Ctrl + Pagedown/Pageup	在已經打開的文件之間進行切換	很是實用
Ctrl + Tab	Ctrl + Tab	在已經打開的文件之間進行跳轉	不如上面的快捷鍵實用
Cmd + J	Ctrl + J	顯示/隱藏控制檯

自定義快捷鍵

按住快捷鍵「Cmd + Shift + P」，彈出命令面板，在命令面板中輸入「快捷鍵」，能夠進入快捷鍵的設置。

固然，你也能夠選擇菜單欄「偏好設置 --> 鍵盤快捷方式」，進入快捷鍵的設置：

快捷鍵列表

你能夠點擊 VS Code 左下角的齒輪按鈕，效果以下：

上圖中，在展開的菜單中選擇「鍵盤快捷方式」，就能夠查看和修改全部的快捷鍵列表了：

VS Code 的常見設置項

麪包屑（Breadcrumb）

打開 VS Code 的設置項，選擇「用戶設置 -> 工做臺 -> 導航路徑」，以下圖所示：

上圖中，將紅框部分打鉤便可。

設置成功後，咱們就能夠查看到當前文件的「層級結構」，很是方便。以下圖所示：

是否顯示代碼的行號

VS Code 默認顯示代碼的行號。你能夠在設置項裏搜索 editor.lineNumbers修改設置，配置項以下：

我建議保留這個設置項，無需修改。

右側是否顯示代碼的縮略圖

VS Code 會在代碼的右側，默認顯示縮略圖。你能夠在設置項裏搜索 editor.minimap進行設置，配置項以下：

將當前行代碼高亮顯示

當咱們把光標放在某一行時，這一行的背景色並無發生變化。若是想高亮顯示當前行的代碼，你能夠在設置項裏搜索editor.renderLineHighlight進行設置。配置項以下：

我設置完以後，發現效果不是很明顯。有待優化。

空格 or 製表符

VS Code 會根據你所打開的文件來決定該使用空格仍是製表。也就是說，若是你的項目中使用的都是製表符，那麼，當你在寫新的代碼時，按下tab 鍵後，編輯器就會識別成製表符。

常見的設置項以下：

editor.detectIndentation：自動檢測（默認開啓）。截圖以下：

editor.insertSpaces：按 Tab 鍵時插入空格（默認）。截圖以下：

editor.tabSize：一個製表符默認等於四個空格。截圖以下：

改完代碼後當即自動保存

改完代碼後，默認不會自動保存。你能夠在設置項裏搜索files.autoSave，修改配置項以下：

上圖中，咱們將配置項修改成onFocusChange以後，那麼，當光標離開該文件後，這個文件就會自動保存了。很是方便。

保存代碼後，是否當即格式化

保存代碼後，默認不會當即進行代碼的格式化。你能夠在設置項裏搜索editor.formatOnSave查看該配置項：

我以爲這個配置項保持默認就好，不用打鉤。

新建文件後的默認文件類型

當咱們按下快捷鍵「Cmd + N」新建文件時，VS Code 默認沒法識別這個文件究竟是什麼類型的，所以也就沒法識別相應的語法高亮。若是你想修改默認的文件類型，能夠在設置項裏搜索files.defaultLanguage，設置項以下：

上圖中的紅框部分，填入你指望的默認文件類型。我填的是html類型，你也能夠填寫成 javascript 或者 markdown，或者其餘的語言類型。

刪除文件時，是否彈出確認框

當咱們在 VS Code 中刪除文件時，默認會彈出確認框。若是你想修改設置，能夠在設置項裏搜索xplorer.confirmDelete。截圖以下：

我建議這個設置項保持默認的打鉤就好，不用修改。刪除文件前的彈窗提示，也是爲了安全考慮，萬一手賤不當心刪了呢？

命令面板的使用

Mac用戶按住快捷鍵 Cmd+Shift+P （Windows用戶按住快捷鍵Ctrl+Shift+P），能夠打開命令面板。效果以下：

若是們須要修改一些設置項，能夠經過「命令面板」來操做，效率會更高。這裏列舉一些。

字體設置

在命令面板輸入「字體」，能夠進行字體的設置，效果以下：

固然，你也能夠在菜單欄，選擇「首選項-設置-經常使用設置」，在這個設置項裏修改字體大小。

快捷鍵設置

在命令面板輸入「快捷鍵」，就能夠進入快捷鍵的設置。

大小寫轉換

選中文本後，在命令面板中輸入transfrom，就能夠修改文本的大小寫了。

VS Code 的經常使用技巧

文件對比

VS Code 默認支持對比兩個文件的內容。選中兩個文件，而後右鍵選擇「將已選項進行比較」便可，效果以下：

VS Code自帶的對比功能並不夠強大，咱們能夠安裝插件compareit，進行更豐富的對比。好比說，安裝完插件compareit以後，咱們能夠將「當前文件」與「剪切板」裏的內容進行對比：

查找某個函數在哪些地方被調用了

好比我已經在a.js文件裏調用了 foo()函數。那麼，若是我想知道foo()函數在其餘文件中是否也被調用了，該怎麼作呢？

作法以下：在 a.js 文件裏，選中foo()函數（或者將光標放置在foo()函數上），而後按住快捷鍵「Shift + F12」，就能看到 foo()函數在哪些地方被調用了，比較實用。

鼠標操做

在當前行的位置，鼠標三擊，能夠選中當前行。
用鼠標單擊文件的行號，能夠選中當前行。
在某個行號的位置，上下移動鼠標，能夠選中多行。

重構

重構分不少種，咱們來舉幾個例子。

一、命名重構：

當咱們嘗試去修改某個函數（或者變量名）時，咱們能夠把光標放在上面，而後按下「F2」鍵，那麼，這個函數（或者變量名）出現的地方都會被修改。

二、方法重構：

選中某一段代碼，這個時候，代碼的左側會出現一個「燈泡圖標」，點擊這個圖標，就能夠把這段代碼提取爲一個單獨的函數。

在當前文件中搜索

在上面的快捷鍵列表中，咱們已經知道以下快捷鍵：

Cmd + F（Win用戶是Ctrl + F）：在當前文件中搜索，光標在搜索框裏
Cmd + G（Win用戶是 F3）：在當前文件中搜索，光標仍在編輯器裏

可是，你可能會注意到，搜索框裏有不少按鈕，每一個按鈕都對應着不一樣的功能，以下圖所示：

上圖中，你能夠經過「Tab」鍵和「Shift + Tab」鍵在輸入框和替換框之間進行切換。

「在選定內容中查找」這個功能仍是比較實用的。你也能夠在設置項裏搜索 editor.find.autoFindInSelection，勾選該設置項後，那麼，當你選中指定內容後，而後按住「Cmd + F」，就能夠自動只在這些內容裏進行查找。該設置項以下圖所示：

正常狀況下，我建議這個設置項不用勾選。

全局搜索

在上面的快捷鍵列表中，咱們已經知道以下快捷鍵：

Cmd + Shift + F（Win用戶是Ctrl + Shift +F）：在全局的文件夾中進行搜索。效果以下：

上圖中，你能夠點擊紅框部分，展開更多的配置項。

Git版本管理

VS Code 自帶了 Git 版本管理，以下圖所示：

上圖中，咱們能夠在這裏進行常見的git 命令操做。若是你還不熟悉 Git版本管理，先去補補課吧。

與此同時，我建議安裝插件GitLens，它是 VS Code 中我最推薦的一個插件，簡直是Git神器，碼農必備。

將工做區放大/縮小

咱們在上面的設置項裏修改字體大小後，僅僅只是修改了代碼的字體大小。

若是你想要縮放整個工做區（包括代碼的字體、左側導航欄的字體等），能夠按下快捷鍵「cmd +/-」。windows用戶是按下「ctrl +/-」

當咱們在給別人演示代碼的時候，這一招十分管用。

若是你想恢復默認的工做區大小，能夠在命令面板輸入重置縮放（英文是reset zoom）

建立多層子文件夾

咱們能夠在新建文件夾的時候，若是直接輸入aa/bb/cc，好比：

那麼，就能夠建立多層子文件夾，效果以下：

.vscode 文件夾的做用

若是你發現項目的根目錄下有一個.vscode文件夾，說明這個文件夾表明的是當前項目的配置。

這個文件夾裏可能包含如下集中文件：

settings.json：工做空間設置。只針對當前項目有效。好比說，我能夠在這裏面要求當前項目的代碼統一使用製表符，而不須要要求每一位碼農去修改各自的配置文件。
sftp.json：ftp文件傳輸的配置。

自帶終端

咱們能夠按下「Ctrl + `」打開 VS Code 自帶的終端。我認爲內置終端並無那麼好用，我更建議你使用第三方的終端 item2。

markdown語法支持

VS Code自帶 markdown 語法高亮，寫完 md 文件以後，你能夠點擊右上角的按鈕進行預覽，以下圖所示：

你也能夠在控制面板輸入Markdown: 打開預覽，直接全屏預覽 markdown文件。

Emmet in VS Code

Emmet能夠極大的提升 html 和 css 的編寫效率，它提供了一種很是簡練的語法規則。

舉個例子，咱們在編輯器中輸入縮寫代碼：ul>li*6 ，而後按下 Tab 鍵，便可獲得以下代碼片斷：

<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

VS Code 默認支持 Emmet。更多 Emmet 語法規則，請自行查閱。

插件擴展 / 插件推薦

VS Code 有一個很強大的功能就是支持插件擴展。

上圖中，點擊紅框部分，便可在輸入框裏，查找你想要的插件名，而後進行安裝。

我來列舉幾個常見的插件，這些插件都很實用。

GitLens

我強烈建議你安裝插件GitLens，它是 VS Code 中我最推薦的一個插件，簡直是Git神器，碼農必備。若是你不知道，那真是out了。

GitLens 在 Git 管理上有不少強大的功能，好比：

將光標放置在代碼的當前行，能夠看到這樣代碼的提交者是誰，以及提交時間。這一點，是 GitLens 最便捷的功能。
查看某個 commit 的代碼改動記錄
查看不一樣的分支
能夠將兩個 commit 進行代碼對比，甚至能夠將兩個 branch 分支進行總體的代碼對比。這一點，簡直是 GitLens 最強大的功能。

RemoteHub

不要驚訝，RemoteHub 和 GitLens 是同一個做者開發出來的。

RemoteHub插件的做用是：能夠在本地查看 GitHub 網站上的代碼，而不須要將代碼下載到本地。

這個插件目前使用的人還很少，趕忙安裝起來嚐嚐鮮吧。

TODO Highlight

寫代碼過程當中，忽然發現一個Bug，可是又不想停下來手中的活，以避免打斷思路，怎麼辦？按照代碼規範，咱們通常是在代碼中加個TODO註釋。好比：（注意，必定要寫成大寫TODO，而不是小寫的todo）

//TODO:這裏有個bug，我一下子再收拾你

或者：

//FIXME:我也不知道爲啥， but it works only that way.

安裝了插件 TODO Highlight以後，按住「Cmd + Shift + P」打開命令面板，輸入「Todohighlist」，選擇相關的命令，咱們就能夠看到一個 todoList 的清單。

Bracket Pair Colorizer 2：突出顯示成對的括號【薦】

Bracket Pair Colorizer 2插件：以不一樣顏色顯示括號並用連線標註括號範圍。

Rainbow Brackets：

Rainbow Brackets插件：突出顯示成對的括號。

indent-rainbow：突出顯示縮進

indent-rainbow插件：突出顯示縮進。

安裝完成後，效果以下圖所示：

sftp：文件傳輸

若是你須要將本地文件經過 ftp 的形式上傳到局域網的服務器，能夠安裝sftp這個插件，很好用。在公司會常常用到。

安裝完成後，輸入快捷鍵「cmd+shift+P」彈出命令面板，而後輸入sftp:config，回車，當前工程的.vscode文件夾下就會自動生成一個sftp.json文件，咱們須要在這個文件裏配置的內容能夠是：

host：服務器的IP地址
username：工做站本身的用戶名
privateKeyPath：存放在本地的已配置好的用於登陸工做站的密鑰文件（也能夠是ppk文件）
remotePath：工做站上與本地工程同步的文件夾路徑，須要和本地工程文件根目錄同名，且在使用sftp上傳文件以前，要手動在工做站上mkdir生成這個根目錄
ignore：指定在使用sftp: sync to remote的時候忽略的文件及文件夾，注意每一行後面有逗號，最後一行沒有逗號

舉例以下：(注意，其中的註釋須要去掉)

{
    "host": "",     //服務器ip
    "port": 22,     //端口，sftp模式是22
    "username": "", //用戶名
    "password": "", //密碼
    "protocol": "sftp", //模式
    "agent": null,
    "privateKeyPath": null,
    "passphrase": null,
    "passive": false,
    "interactiveAuth": false,
    "remotePath": "/root/node/build/",  //服務器上的文件地址
    "context": "./server/build",        //本地的文件地址

    "uploadOnSave": true,   //監聽保存並上傳
    "syncMode": "update",
    "watcher": {            //監聽外部文件
        "files": false,     //外部文件的絕對路徑
        "autoUpload": false,
        "autoDelete": false
    },
    "ignore": [             //忽略項
        "**/.vscode/**",
        "**/.git/**",
        "**/.DS_Store"
    ]
}