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

前言

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

VS Code 本來是前端人員專用，但由於它實在是太好用了，於是，各種開發方向的碼農也正在用 VS Code 作為他們的主力編程工具。甚至是一些寫作的同學，也把 VS Code 作為 markdown 寫作工具。

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

VS Code 的介紹

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

編輯器 與 IDE

IDE和編輯器是有區別的：

• IDE ：對代碼會有較好的智能提示，同時側重於工程項目，對項目的開發、調試工作有較好的圖像化界面的支持，因此比較笨重。比如 Eclipse 的定位就是 IDE。

• 編輯器：要相對輕量許多，側重於文本的編輯。比如 Sublime Text 的定位就是編輯器。再比如 Windows 系統自帶的「記事本」就是最簡單的編輯器。

需要註意的是，VS Code 的定位是編輯器，而非IDE。但 VS Code 又比一般的編輯器的功能要豐富許多。

VS Code的一些補充

• VS Code 的使命，是讓開發者在編輯器里擁有 IDE 那樣的開發體驗，比如代碼的智能提示、語法檢查、圖形化的調試工具、插件擴展、版本管理等。

• 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%的工作。熟練使用它們，你就已經很牛了。

移動游標

根據上面的快捷鍵，我們可以舉一反三。補充如下：

• 「方向鍵」：在單個字元之間移動游標

• 「option + 左右方向鍵」：在單詞之間移動游標 。（很常用）

• 「Cmd + 左右方向鍵」：在整行之間移動游標。（很常用）

• 「Cmd + Shift + 」：在代碼塊之間移動游標。

刪除操作

備註：上面所講到的移動游標、刪除操作的快捷鍵，在其他編輯器里，也是同樣的操作。

編輯操作

JS語言相關

跳轉操作

搜索

多游標的使用

技巧1：按住 「Option」鍵（windows 用戶是按住「Alt」鍵） ，然後在頁面中希望中現游標的位置點擊滑鼠。

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

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

自定義快捷鍵

按住快捷鍵「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()函數在哪些地方被調用了，比較實用。

滑鼠操作

• 在當前行的位置，滑鼠三擊，可以選中當前行。

• 用滑鼠單擊文件的行號，可以選中當前行。

• 在某個行號的位置，上下移動滑鼠，可以選中多行。

重構

重構分很多種，我們來舉幾個例子。

1、命名重構：

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

2、方法重構：

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

在當前文件中搜索

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

• Cmd + F：在當前文件中搜索，游標在搜索框里

• Cmd + G：在當前文件中搜索，游標仍在編輯器里

但是，你可能會註意到，搜索框里有很多按鈕，每個按鈕都對應著不同的功能，如下圖所示：

上圖中，你可以通過「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 管理上有很多強大的功能，比如：

• 查看某個 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 的清單。

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"
    ]
}

Live Share：實時編碼分享

Live Share這個神奇的插件是由微軟官方出品，它的作用是：實時編碼分享。也就是說，它可以實現你和你的同伴一起寫代碼。這絕對就是結對編程的神器啊。

安裝方式：

打開插件管理，搜索“live share”，安裝。安裝後重啟 VS Code，在左側會多出一個按鈕：

上圖中，點擊紅框部分，登錄後就可以分享你的工作空間了。

Settings Sync

• 地址：https://github.com/shanalikhan/code-settings-sync

• 作用：多台設備之間，同步 VS Code 配置。

vscode-pigments

css顏色高亮顯示。

vscode-syncing

• 地址：https://github.com/nonoroazoro/vscode-syncing

• 作用：多台設備之間，同步 VS Code 配置。

最後一段

如果你有什麼推薦的 VS Code 插件，歡迎留言。

同時，你也可以關註我在 GitHub 上的 前端入門項目，超級詳細和真誠。