一篇搞定VS Code

--- title: VS Code的使用 --- ## 前言 VS Code 軟件實(shí)在是太酷、太好用了，越來越多的新生代互聯(lián)網(wǎng)民工正在使用它。 前端男神**尤雨溪**大大這樣評價 VS Code： ![](https://upload-images.jianshu.io/upload_images/9555590-15648b217ac79219.png) 有一點(diǎn)你可能會感到驚訝：VS Code 這款軟件本身，是用 JavaScript 語言編寫的（具體請自行查閱基于 JS 的 PC 客戶端開發(fā)框架 `Electron`）。Jeff Atwood 在 2007 年提出了著名的 Atwood 定律： > **任何能夠用 JavaScript 實(shí)現(xiàn)的應(yīng)用系統(tǒng)，最終都必將用 JavaScript 實(shí)現(xiàn)**。 Jeff Atwood 這個人是誰不重要（他是 Stack Overflow 網(wǎng)站的聯(lián)合創(chuàng)始人），重要的是這條定律。 前端目前是處在春秋戰(zhàn)國時代，各路英雄豪杰成為后浪，各種框架工具層出不窮，VS Code 軟件無疑是大前端時代最驕傲的工具。 如果你是做前端開發(fā)（JavaScript 編程語言為主），則完全可以將 VS Code 作為「**主力開發(fā)工具**」。這款軟件是為前端同學(xué)量身定制的，開箱即用。 如果你是做其他語言方向的開發(fā)，并且不需要太復(fù)雜的集成開發(fā)環(huán)境，那么，你可以把 VS Code 作為「**代碼編輯器**」來使用，縱享絲滑。 甚至是一些寫文檔、寫作的同學(xué)，也經(jīng)常把 VS Code 作為 markdown **寫作工具**，毫無違和感。 退而求其次，即便你不屬于以上任何范疇，你還可以把 VS Code 當(dāng)作最簡單的**文本編輯器**來使用，完勝 Windows 系統(tǒng)自帶的記事本。 寫下這篇文章，是順勢而為。 ## 一、驚艷登場：VS Code 的介紹 VS Code 的全稱是 Visual Studio Code，是一款開源的、免費(fèi)的、跨平臺的、高性能的、輕量級的代碼編輯器。它在性能、語言支持、開源社區(qū)方面，都做得很不錯。 微軟有兩種軟件：一種是 VS Code，一種是其他軟件。 在2015年4月29日的微軟Build開發(fā)者大會上，微軟宣布推出 VS Code之后，這個輕量級的編輯器成為全球無數(shù)開發(fā)者們最喜愛的開發(fā)工具。VS Code基于開源且跨平臺的理念，每月都會進(jìn)行迭代，并提供每天發(fā)布的 insider 版本（insider是微軟的一種公測計劃，類似于國內(nèi)軟件所說的內(nèi)測版）。它擁有至少幾萬個插件，生態(tài)極為活躍和豐富。 ### IDE 與 編輯器的對比 IDE 和編輯器是有區(qū)別的： - **IDE**（Integrated Development Environment，集成開發(fā)環(huán)境）：對代碼有較好的智能提示和相互跳轉(zhuǎn)，同時側(cè)重于工程項(xiàng)目，對項(xiàng)目的開發(fā)、調(diào)試工作有較好的圖像化界面的支持，因此比較笨重。比如 Eclipse 的定位就是 IDE。 - **編輯器**：要相對輕量許多，側(cè)重于文本的編輯。比如 Sublime Text 的定位就是編輯器。再比如 Windows 系統(tǒng)自帶的「記事本」就是最簡單的編輯器。 需要注意的是，VS Code 的定位是**編輯器**，而非 IDE ，但 VS Code 又比一般的編輯器的功能要豐富許多。可以這樣理解：VS Code 的體量是介于編輯器和 IDE 之間。VS Code 的使命，是讓開發(fā)者在編輯器里擁有 IDE 那樣的開發(fā)體驗(yàn)。 VS Code流行起來之后，使用 Sublime Text、Atom 這類編輯器軟件的人，自然就越來越少了。 ### VS Code 的特點(diǎn) - 跨平臺：支持 MacOS、Windows 和 Linux 等多個平臺。在這多種平臺下，擁有一致的用戶界面和開發(fā)體驗(yàn)。 - 開源：VS Code 的源代碼以 MIT 協(xié)議開源。不僅代碼開源，而且整個產(chǎn)品的開發(fā)計劃和發(fā)布管理也都是開源的。VS Code團(tuán)隊(duì)每年都會在 GitHub 的Wiki上發(fā)布 [Roadmap](https://github.com/microsoft/vscode/wiki/Roadmap)，列出一整年的規(guī)劃圖。VS Code 軟件的官方文檔也托管在了 [GitHub](https://github.com/Microsoft/vscode-docs) 上。 - 自帶終端、圖形化的調(diào)試工具、Git 版本控制。 - 插件擴(kuò)展：支持第三方插件，功能強(qiáng)大。既有中心化的插件市場，也可以直接在 VS Code里搜索你想要的插件。 - 生態(tài)：社區(qū)生態(tài)活躍且豐富，社區(qū)氛圍濃厚。 - 自帶 emmet：支持代碼自動補(bǔ)全，快速生成簡單的語法結(jié)構(gòu)。要知道，這個功能在 Sublime Text中，得先安裝插件才行。 - 語法支持：VS Code 自帶了 JavaScript、TypeScript 和 Node.js 的**語法支持**，包括：**語法高亮、代碼智能提示和補(bǔ)全、括號匹配、顏色區(qū)分、代碼片段提示**等。也就是說，你在書寫 JS 和 TS 時，這些語法支持都是自帶的。其他的一些語言，你需要先安裝相應(yīng)的**擴(kuò)展包**插件，就出現(xiàn)語法支持。 - 在修改配置方面，既有圖形化的配置界面，也有 基于 JSON 文件的配置方式，滿足不同人群的使用習(xí)慣。 ### 前端利器之爭： VS Code 與 WebStorm 前端小白最喜歡問的一個問題是：哪個編輯器/IDE 好用？是 VS Code 還是 WebStorm （WebStorm 其實(shí)是 IntelliJ IDEA 的定制版）？我來做個對比： - **哪個更酷**：顯然 VS Code 更酷。 - **內(nèi)存占用情況**：根據(jù)我的觀察，VS Code 是很占內(nèi)存的（尤其是當(dāng)你打開多個窗口的時候），但如果你的內(nèi)存條夠用，使用起來是不會有任何卡頓的感覺的。相比之下，IntelliJ IDEA 不僅非常占內(nèi)存，而且還非常卡頓。如果你想換個既輕量級、又不占內(nèi)存的編輯器，最好還是使用「Sublime Text」編輯器。 - **使用比例**：當(dāng)然是 VS Code 更勝一籌。先不說別的，我就拿數(shù)據(jù)說話，我目前所在的研發(fā)團(tuán)隊(duì)有 200 人左右（120個后臺、80個前端），他們絕大部分人都在用 VS Code 編碼，妥妥的。 所以，如果你以后還問這個問題，那就真有些掉底了。 ### VS Code 的技術(shù)棧、核心組件 了解 VS Code的技術(shù)棧和核心組件，可以讓我們對 VS Code 有更深入的認(rèn)識。此小段，了解即可。 - 開發(fā)框架：Electron。Electron可以使用 Node.js + JS這樣的技術(shù)棧開發(fā)桌面GUI應(yīng)用程序。 - 編輯器：Monaco Editor。Monaco Editor 是一款開源的在線代碼編輯器，是 **VS Code 瀏覽器版本**的最核心組件。[#](https://zhuanlan.zhihu.com/p/88828576) - 編程語言：TypeScript。TypeScript 是 JavaScript的嚴(yán)格超集。TS 在JS的基礎(chǔ)上添加了許多功能，引入了聲明文件，而且支持類型擴(kuò)展。TS 適合長期的、多人開發(fā)的大型項(xiàng)目開發(fā)。 - 讓編輯器支持語言功能：Language Server Protocol （LSP） 語言服務(wù)協(xié)議。LSP是編輯器/IDE 與語言服務(wù)器之間的一種協(xié)議，通過 JSON-PRC 傳輸消息，可以讓編輯器嵌入并支持各種編程語言。開發(fā)者可以在編輯器中使用各種語言來編寫程序。 - 讓編輯器支持調(diào)試功能：Debug Adapter Protocol（DAP）。DAP 是基于 JSON的協(xié)議，它抽象了開發(fā)工具與調(diào)試工具質(zhì)檢的通信。 - 集成終端：Xterm.js。VS Code的集成終端是基于開源項(xiàng)目 [Xterm.js](https://github.com/xtermjs/xterm.js/) 進(jìn)行開發(fā)的。Xterm.js 是一個使用 TS 開發(fā)的終端組件。另外，Xterm.js 并不是直接下來下來就能用的終端應(yīng)用，它只是一個前端組件，可以與 bash這樣的進(jìn)程進(jìn)行連接，然后讓用戶通過 Xterm.js 進(jìn)行交互。 ### VS Code 的安裝 - VS Code 官網(wǎng)： VS Code 的安裝很簡單，直接去官網(wǎng)下載安裝包，然后雙擊安裝即可。 ![](https://upload-images.jianshu.io/upload_images/9555590-2c171776f05b16a2.png) 上圖中，直接點(diǎn)擊 download，一鍵下載安裝即可。 VS Code支持以下平臺： ![](https://upload-images.jianshu.io/upload_images/9555590-888081991caf9aff.png) 安裝完成后的界面如下： ![](https://upload-images.jianshu.io/upload_images/9555590-cab84140561b0b82.png) VS Code被分為以下五個區(qū)域： - 編輯器 - 側(cè)邊欄 - 狀態(tài)欄 - 活動欄 - 面板 VS Code在功能上非?？酥?，只包含了大多數(shù)開發(fā)流程中所需要的基礎(chǔ)模塊，包括：編輯器、文件管理、窗口管理、首選項(xiàng)設(shè)置、終端等。 你需要根據(jù)具體需要安裝額外的組件或者插件。比如說，如果開發(fā)TS項(xiàng)目，則需要安裝 TS編譯器，以及ESLint、TSLint等語法規(guī)則&代碼風(fēng)格的檢查工具。如果開發(fā)C語言項(xiàng)目，則需要安裝gcc、Clang等編譯工具。 ## 二、嶄露鋒芒：VS Code 快捷鍵 VS Code 用得熟不熟，首先就看你是否會用快捷鍵。以下列出的內(nèi)容，都是常用快捷鍵，而加粗部分的快捷鍵，使用頻率則非常高。 任何工具，掌握 20%的技能，足矣應(yīng)對 80% 的工作。既然如此，你可能會問：那就只保留 20% 的特性，不久可以滿足 80%的用戶了嗎？ 但我想說的是：**那從來都不是同樣的 20%**，每個人都會用到不同的功能。 掌握下面這些高頻核心快捷鍵，你和你的工具，足矣露出鋒芒。 ### 1、工作區(qū)快捷鍵 | Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 | | :--------------------- | :----------------------- | :-------------------------------------------- | :------------------- | | **Cmd + Shift + P** | **Ctrl + Shift + P**，F(xiàn)1 | 顯示命令面板 | | | **Cmd + B** | **Ctrl + B** | 顯示/隱藏側(cè)邊欄 | 很實(shí)用 | | `Cmd + \` | `Ctrl + \` | **拆分為多個編輯器** | 【重要】抄代碼利器 | | **Cmd + 1、2** | **Ctrl + 1、2** | 聚焦到第 1、第 2 個編輯器 | 同上重要 | | **Cmd + +、Cmd + -** | **ctrl + +、ctrl + -** | 將工作區(qū)放大/縮?。òùa字體、左側(cè)導(dǎo)航欄） | 在投影儀場景經(jīng)常用到 | | Cmd + J | Ctrl + J | 顯示/隱藏控制臺 | | | **Cmd + Shift + N** | **Ctrl + Shift + N** | 重新開一個軟件的窗口 | 很常用 | | 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 + ` | 沒有 | 在同一個軟件的**多個工作區(qū)**之間切換 | 使用很頻繁 | | **Cmd + Option + 左右方向鍵** | Ctrl + Pagedown/Pageup | 在已經(jīng)打開的**多個文件**之間進(jìn)行切換 | 非常實(shí)用 | | Ctrl + Tab | Ctrl + Tab | 在已經(jīng)打開的多個文件之間進(jìn)行跳轉(zhuǎn) | 不如上面的快捷鍵快 | | Cmd + Shift + O | Ctrl + shift + O | 在當(dāng)前文件的各種**方法之間**（符號：Symbol）進(jìn)行跳轉(zhuǎn) | | | Cmd + T | Ctrl + T | 在當(dāng)前**工作區(qū)**的各種方法之間（符號：Symbol）進(jìn)行跳轉(zhuǎn) | | | Ctrl + G | Ctrl + G | 跳轉(zhuǎn)到指定行 | | | `Cmd+Shift+\` | `Ctrl+Shift+\` | 跳轉(zhuǎn)到匹配的括號 | | ### 3、移動光標(biāo) | Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 | | :---------------------------- | :----------------------------------------- | :----------------------------------------------------------- | :------------- | | 方向鍵 | 方向鍵 | 在**單個字符**之間移動光標(biāo) | 大家都知道 | | **option + 左右方向鍵** | **Ctrl + 左右方向鍵** | 在**單詞**之間移動光標(biāo) | 很常用 | | **Cmd + 左右方向鍵** | **Fn + 左右方向鍵**（或 Win + 左右方向鍵） | 將光標(biāo)定位到當(dāng)前行的最左側(cè)、最右側(cè)（在**整行**之間移動光標(biāo)） | 很常用 | | **Option + Alt + 左右方向鍵** | **Alt + Shift + 左右方向鍵** | 左右擴(kuò)大/縮小選中的范圍 | 很酷，極為高效 | | Cmd + ↑ | Ctrl + Home | 將光標(biāo)定位到文件的第一行 | | | Cmd + ↓ | Ctrl + End | 將光標(biāo)定位到文件的最后一行 | | | Cmd + Shift + \ | | 在**代碼塊**之間移動光標(biāo) | | ### 4、編輯操作 | Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 | | :--------------------- | :------------------ | :----------------------------------- | :------------------------------------- | | Cmd + C | Ctrl + C | 復(fù)制 | | | Cmd + X | Ctrl + X | 剪切 | | | Cmd + V | Ctrl + V | 粘貼 | | | **Cmd + Enter** | **Ctrl + Enter** | 在當(dāng)前行的下方新增一行，然后跳至該行 | 即使光標(biāo)不在行尾，也能快速向下插入一行 | | Cmd+Shift+Enter | Ctrl+Shift+Enter | 在當(dāng)前行的上方新增一行，然后跳至該行 | 即使光標(biāo)不在行尾，也能快速向上插入一行 | | **Option + ↑** | **Alt + ↑** | 將代碼向上移動 | 很常用 | | **Option + ↓** | **Alt + ↓** | 將代碼向下移動 | 很常用 | | Option + Shift + ↑ | Alt + Shift + ↑ | 將代碼向上復(fù)制一行 | | | **Option + Shift + ↓** | **Alt + Shift + ↓** | 將代碼向下復(fù)制一行 | 寫重復(fù)代碼的利器 | 另外再補(bǔ)充一點(diǎn)：將光標(biāo)點(diǎn)擊到某一行的任意位置時，默認(rèn)就已經(jīng)是**選中全行**了，此時可以直接**復(fù)制**或**剪切**，無需點(diǎn)擊鼠標(biāo)。這個非常實(shí)用，是所有的編輯操作中，使用得最頻繁的。它可以有以下使用場景： - 場景1：假設(shè)光標(biāo)現(xiàn)在處于第5行的**任意位置**，那么，直接依次按下 `Cmd + C` 和 `Cmd + V`，就會把這行代碼復(fù)制到第6行。繼續(xù)按 `Cmd + C` 和 `Cmd + V`，就會把這行代碼復(fù)制到第7行。copy代碼so easy。 - 場景2：假設(shè)光標(biāo)現(xiàn)在處于第5行，那么，先按下 `Cmd + C`，然后按兩下`↑` 方向鍵，此時光標(biāo)處于第3行；緊接著，繼續(xù)按下`Cmd + V`，就會把剛剛那行代碼復(fù)制到第3行，原本處于第3行的代碼會整體**下移**。 你看到了沒？上面的兩個場景，我全程沒有使用鼠標(biāo)，只通過簡單的復(fù)制粘貼和方向鍵，就做到了如此迅速的copy代碼。你說是不是很高效？ ### 5、刪除操作 | Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 | | :--------------------- | :------------------- | :--------------------- | :---------------------------------------- | | Cmd + shift + K | Ctrl + Shift + K | 刪除整行 | 「Cmd + X」的作用是剪切，但也可以刪除整行 | | **option + Backspace** | **Ctrl + Backspace** | 刪除光標(biāo)之前的一個單詞 | 英文有效，很常用 | | option + delete | Ctrl + delete | 刪除光標(biāo)之后的一個單詞 | | | **Cmd + Backspace** | | 刪除光標(biāo)之前的整行內(nèi)容 | 很常用 | | Cmd + delete | | 刪除光標(biāo)之后的整行內(nèi)容 | | 備注：上面所講到的移動光標(biāo)、編輯操作、刪除操作的快捷鍵，在其他編輯器里，大部分都適用。 ### 6、多光標(biāo)選擇/多光標(biāo)編輯 多光標(biāo)選擇在編程的**提效**方面可謂立下了汗馬功勞。因?yàn)楸容^難記住，所以你要時不時回來復(fù)習(xí)這一段。 | Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 | | --------------------------------- | ------------------------------ | ------------------------------------------------------------ | ---------------------------------------- | | **Option + 鼠標(biāo)連續(xù)點(diǎn)擊任意位置** | **Alt + 鼠標(biāo)連續(xù)點(diǎn)擊任意位置** | 在任意位置，同時出現(xiàn)多個光標(biāo) | 很容易記住 | | Cmd + D | Ctrl + D | 將光標(biāo)放在某個單詞的位置（或者先選中某個單詞），然后反復(fù)按下「 **Cmd + D** 」鍵， 即可將下一個相同的詞逐一加入選擇。 | 較常用 | | **Cmd + Shift + L** | **Ctrl + Shift + L** | 將光標(biāo)放在某個單詞的位置（或者先選中某個單詞），然后按下快捷鍵，則所有的相同內(nèi)容處，都會出現(xiàn)光標(biāo)。 | 很常用。比如變量重命名的時候，就經(jīng)常用到 | ### 7、多列選擇/多列編輯 多列選擇是更高效的多光標(biāo)選擇，所以單獨(dú)列成一小段。 | Mac 快捷鍵 | Win 快捷鍵 | 作用 | 備注 | | ------------------------- | ---------------------- | ------------------------------------------------------------ | -------------------- | | Cmd + Option + 上下鍵 | Ctrl + Alt + 上下鍵 | 在連續(xù)的多列上，同時出現(xiàn)多個光標(biāo) | 較常用 | | Option + Shift + 鼠標(biāo)拖動 | Alt + Shift + 鼠標(biāo)拖動 | 按住快捷鍵，然后把鼠標(biāo)從區(qū)域的左上角拖至右下角，即可在選中區(qū)域的每一行末尾，出現(xiàn)光標(biāo)。 | 很神奇的操作，較常用 | | **Option + Shift + i** | **Alt + Shift + I** | 選中一堆文本后，按下快捷鍵，既可在**每一行的末尾**都出現(xiàn)一個光標(biāo)。 | 很常用 | ### 8、編程語言相關(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)的移動回退到上一個位置 | 撤銷光標(biāo)的移動和選擇 | ### 9、搜索相關(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)仍停留在編輯器里 | 很巧妙 | ### 10、自定義快捷鍵 按住快捷鍵「Cmd + Shift + P」，彈出命令面板，在命令面板中輸入“快捷鍵”，可以進(jìn)入快捷鍵的設(shè)置。 當(dāng)然，你也可以選擇菜單欄「偏好設(shè)置 --> 鍵盤快捷方式」，進(jìn)入快捷鍵的設(shè)置： ![](https://upload-images.jianshu.io/upload_images/9555590-e72060f63bcb199e.png) 此外，如果你輸入這個快捷鍵后沒起作用，那有可能是與其他軟件（比如 PicGo 軟件）的快捷鍵沖突了，請檢查一下。 ### 11、快捷鍵列表 你可以點(diǎn)擊 VS Code 左下角的齒輪按鈕，效果如下： ![](https://upload-images.jianshu.io/upload_images/9555590-5db9017b8526e557.png) 上圖中，在展開的菜單中選擇「鍵盤快捷方式」，就可以查看和修改所有的快捷鍵列表了： ![](https://upload-images.jianshu.io/upload_images/9555590-c4cff47c1d1b80eb.png) ### 快捷鍵參考表（官方） VS Code官網(wǎng)提供了 PDF版本的鍵盤快捷鍵參考表，轉(zhuǎn)需： - Windows版本：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf - Mac 版本：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf - Linux版本：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf 我們在 VS Code軟件里通過菜單欄「幫助-->鍵盤快捷方式參考」也可以打開相應(yīng)平臺的快捷鍵大全（PDF版本）。 ## 三、高端訪問：命令面板的使用 Mac 用戶按住快捷鍵 `Cmd+Shift+P` （Windows 用戶按住快捷鍵`Ctrl+Shift+P`），可以打開快速命令面板。效果如下： ![](https://upload-images.jianshu.io/upload_images/9555590-82ff8e6f5688e8eb.png) 命令面板的作用是**希望解放開發(fā)者的鼠標(biāo)，讓一些操作和配置可以直接通過鍵盤進(jìn)行**。如果讓開發(fā)者記住所有的配置項(xiàng)在菜單的哪個位置是不現(xiàn)實(shí)的，而且有些命令并不在菜單中。 有了命令面板之后，如果你需要修改一些設(shè)置項(xiàng)，或者進(jìn)行一些快捷操作，則可以通過「命令面板」來操作，效率會更高。接下來列舉一些。 ### 1、VS Code 設(shè)置為中文語言 Mac 用戶按住快捷鍵 `Cmd+Shift+P` （Windows 用戶按住快捷鍵`Ctrl+Shift+P`），打開命令面板。 在命令面板中，輸入`Configure Display Language`，選擇`Install additional languages`，然后安裝插件`Chinese (Simplified) Language Pack for Visual Studio Code`即可。 或者，我們可以直接安裝插件`Chinese (Simplified) Language Pack for Visual Studio Code`，是一樣的。 安裝完成后，重啟 VS Code。 ### 2、設(shè)置字體大小 在命令面板輸入“字體”，可以進(jìn)行字體的設(shè)置，效果如下： ![](https://upload-images.jianshu.io/upload_images/9555590-5a8bcc07792468b4.png) 當(dāng)然，你也可以在菜單欄，選擇「首選項(xiàng)-設(shè)置-常用設(shè)置」，在這個設(shè)置項(xiàng)里修改字體大小。 ### 3、快捷鍵設(shè)置 在命令面板輸入“快捷鍵”，就可以進(jìn)入快捷鍵的設(shè)置。 ### 4、大小寫轉(zhuǎn)換 選中文本后，在命令面板中輸入`transfrom`，就可以修改文本的大小寫了。 ![](https://upload-images.jianshu.io/upload_images/9555590-989266d8374f5c36.png) ### 5、使用命令行啟動 VS Code （1）輸入快捷鍵「Cmd + Shift + P 」，選擇`install code command`： ![](https://upload-images.jianshu.io/upload_images/9555590-37c58b5174c061a6.png) （2）使用命令行： - `code`命令：啟動 VS Code 軟件 - `code pathName/fileName`命令：通過 VS Code 軟件打開指定目錄/指定文件。 備注：這種方法快捷簡單，但是在電腦重啟之后就失效了。稍后在第五段，我會介紹更常見的方法。 ### 6、修改特定編程語言的設(shè)置項(xiàng) 輸入快捷鍵「Cmd + Shift + P 」打開命令面板，然后輸入并執(zhí)行 `Configure Language Specific Settings`即可。 ![](https://upload-images.jianshu.io/upload_images/9555590-f59b8a3aba633eea.png) ## 四、私人訂制：VS Code 的常見配置 ### 0、設(shè)置項(xiàng)介紹 在修改 VS Code配置之前，我們需要知道，在哪里可以找到設(shè)置項(xiàng)的入口。 **方式1**：Mac用戶選擇菜單欄「Code--> 首選項(xiàng)-->設(shè)置」，即可打開配置項(xiàng)： ![](https://upload-images.jianshu.io/upload_images/9555590-3486228b6d1d2f50.png) **方式2**：點(diǎn)擊軟件右下角的設(shè)置圖標(biāo)： ![](https://upload-images.jianshu.io/upload_images/9555590-07b4ae04e6caf848.png) ![](https://upload-images.jianshu.io/upload_images/9555590-2c28b15f1b8d7de3.png) 如上圖所示，VS Code提供兩種不同范圍的設(shè)置： - **用戶**設(shè)置：全局生效。 - **工作區(qū)**設(shè)置：只針對當(dāng)前項(xiàng)目生效。工作區(qū)設(shè)置會覆蓋用戶設(shè)置。適用于團(tuán)隊(duì)協(xié)作場景。工作區(qū)的設(shè)置文件是保存在當(dāng)前項(xiàng)目根目錄的`.vscode/settings.json`中，可以被提交到Git倉庫，方便共享給項(xiàng)目組的其他成員。 操作技巧： （1）我們可以在設(shè)置面板的頂部搜索框，輸入關(guān)鍵詞，就能迅速定位到你想要的設(shè)置項(xiàng)。 （2）上圖中，點(diǎn)擊右上角的icon，可以通過 json文件的形式修改設(shè)置項(xiàng)。 ### 1、修改主題 1）修改顏色主題： 選擇菜單欄「Code --> 首選項(xiàng) --> 顏色主題」： ![](https://upload-images.jianshu.io/upload_images/9555590-b124f5555e8bf9f0.png) 在彈出的對話框中，挑選你一個你喜歡的的顏色主題吧，或者安裝其他顏色的主題： ![20211013_1018](https://upload-images.jianshu.io/upload_images/9555590-9ec2567c8a5178c9.png) 或者在設(shè)置項(xiàng)里搜索`Workbench: Color Theme`，進(jìn)行修改。 2）修改文件圖標(biāo)的主題： 選擇菜單欄「Code --> 首選項(xiàng) --> 文件圖標(biāo)主題」： ![20211013_1015](https://upload-images.jianshu.io/upload_images/9555590-e89d4c3a06650155.png) 在彈出的對話框中，挑選你一個你喜歡的的主題吧，或者安裝其他的主題： ![20211013_1019](https://upload-images.jianshu.io/upload_images/9555590-bea4486250b1d651.png) 或者在設(shè)置項(xiàng)里搜索`Workbench: Icon Theme`，進(jìn)行修改。 ### 2、面包屑（Breadcrumb）導(dǎo)航 打開 VS Code 的設(shè)置項(xiàng)，選擇「用戶設(shè)置 -> 工作臺 -> 導(dǎo)航路徑」，如下圖所示： ![](https://upload-images.jianshu.io/upload_images/9555590-a1042d74c0747baf.png) 上圖中，將紅框部分打鉤即可。 設(shè)置成功后，我們就可以查看到當(dāng)前文件的「層級結(jié)構(gòu)」，非常方便。如下圖所示： ![](https://upload-images.jianshu.io/upload_images/9555590-73f096c8ad58575f.png) 有了這個面包屑導(dǎo)航，我們可以點(diǎn)擊它，在任意目錄、任意文件之間隨意跳轉(zhuǎn)。使用頻繁非常高。 ### 3、是否顯示代碼的行號 VS Code 默認(rèn)顯示代碼的行號。你可以在設(shè)置項(xiàng)里搜索 `editor.lineNumbers`修改設(shè)置，配置項(xiàng)如下： ![](https://upload-images.jianshu.io/upload_images/9555590-ac0bca01dd947fdb.png) 我建議保留這個設(shè)置項(xiàng)，無需修改。 ### 4、右側(cè)是否顯示代碼的縮略圖 如果某個文件的代碼量很大，縮略圖就很有用了，可以預(yù)覽全局，并在當(dāng)前文件中快速跳轉(zhuǎn)。 VS Code 會在代碼的右側(cè)，默認(rèn)顯示縮略圖。你可以在設(shè)置項(xiàng)里搜索 `editor.minimap` 進(jìn)行設(shè)置，配置項(xiàng)如下： ![](https://upload-images.jianshu.io/upload_images/9555590-1b9d9c130439c2fb.png) 上面這張圖，你仔細(xì)琢磨下會發(fā)現(xiàn)，中文翻譯十分精準(zhǔn)。 ### 5、將當(dāng)前行代碼高亮顯示（更改光標(biāo)所在行的背景色） 當(dāng)我們把光標(biāo)放在某一行時，這一行的背景色并沒有發(fā)生變化。如果想**高亮顯示**當(dāng)前行的代碼，需要設(shè)置兩步： （1）在設(shè)置項(xiàng)里搜索`editor.renderLineHighlight`，將選項(xiàng)值設(shè)置為`all`或者`line`。 （2）在設(shè)置項(xiàng)里增加如下內(nèi)容： ```json "workbench.colorCustomizations": { "editor.lineHighlightBackground": "#00000090", "editor.lineHighlightBorder": "#ffffff30" } ``` 上方代碼，第一行代碼的意思是：修改光標(biāo)所在行的背景色（背景色設(shè)置為全黑，不透明度 90%）；第二行代碼的意思是：修改光標(biāo)所在行的邊框色。 ### 6、改完代碼后立即自動保存 **方式一**： 改完代碼后，默認(rèn)不會自動保存。你可以在設(shè)置項(xiàng)里搜索`files.autoSave`，修改參數(shù)值為`afterDelay` ，即可自動保存。如下： ![](https://upload-images.jianshu.io/upload_images/9555590-e7d8ae6bce27cc66.png) files.autoSave的參數(shù)值有以下幾種： - off（默認(rèn)值）：不自動保存。 - afterDelay（建議配置）：文件修改超過一定時間（默認(rèn)1秒）后，就自動保存。 - onFocusChange：當(dāng)前編輯器失去焦點(diǎn)時，則自動保存。如果我們將配置項(xiàng)修改為`onFocusChange`之后，那么，當(dāng)光標(biāo)離開該文件后，這個文件就會自動保存了。 - onWindowChange：VS Code軟件失去焦點(diǎn)時，則自動保存。 **方式二**： 當(dāng)然，你也可以直接在菜單欄選擇「文件-自動保存」。勾選后，當(dāng)你寫完代碼后，文件會立即實(shí)時保存。 ### 7、熱退出 當(dāng)VS Code退出后，它可以記住未保存的文件。如果你希望達(dá)到這種效果，那么，你需要先將設(shè)置項(xiàng)`files.hotExit`的值改為 `onExitAndWindowClose`。這個配置項(xiàng)要不要改，看你個人需要。比如我自己平時設(shè)置的值是`onExit`。 ![20211012_2014](https://upload-images.jianshu.io/upload_images/9555590-c47c988cbb75d1ab.png) ### 8、保存代碼后，是否立即格式化 保存代碼后，默認(rèn)**不會立即**進(jìn)行代碼的格式化。你可以在設(shè)置項(xiàng)里搜索`editor.formatOnSave`查看該配置項(xiàng)： ![](https://upload-images.jianshu.io/upload_images/9555590-d0d526050cdec429.png) 我覺得這個配置項(xiàng)保持默認(rèn)就好，不用打鉤。 ### 9、自動格式化粘貼的內(nèi)容 在設(shè)置項(xiàng)里搜索 `editor.formatOnPaste`，將設(shè)置項(xiàng)改為`true`： ![20211012_1049](https://upload-images.jianshu.io/upload_images/9555590-9384ff352126adff.png) ### 10、設(shè)置字體大小 在設(shè)置項(xiàng)里搜索`fontSize`，然后根據(jù)需要設(shè)置各種模塊的字體大?。? ![20211012_1053](https://upload-images.jianshu.io/upload_images/9555590-2cf05be6a619120e.png) ### 11、空格 or 制表符 VS Code 會根據(jù)你所打開的文件來決定該使用空格還是制表。也就是說，如果你的項(xiàng)目中使用的都是制表符，那么，當(dāng)你在寫新的代碼時，按下 tab 鍵后，編輯器就會識別成制表符。 （1）建議的設(shè)置項(xiàng)如下： - **editor.detectIndentation**：自動檢測（默認(rèn)開啟）。建議把這個配置項(xiàng)修改為 false，截圖如下： ![20211012_1139](https://upload-images.jianshu.io/upload_images/9555590-9db9d56afed111ad.png) 這樣做，是為了取消系統(tǒng)的自動縮進(jìn)，建議自己手動格式化比較好。 參考鏈接：https://www.yisu.com/zixun/327399.html - **editor.insertSpaces**：按 Tab 鍵時插入空格（默認(rèn)值為true）。截圖如下： ![](https://upload-images.jianshu.io/upload_images/9555590-bb168bf3b3e4a88e.png) - **editor.tabSize**：一個制表符默認(rèn)等于四個空格。截圖如下： ![](https://upload-images.jianshu.io/upload_images/9555590-631df13888101526.png) （2）狀態(tài)欄也會顯示當(dāng)前的縮進(jìn)值。點(diǎn)擊狀態(tài)欄，可以直接修改 tabSize 縮進(jìn)值： ![](https://upload-images.jianshu.io/upload_images/9555590-845f9cd157897af5.png) （3）另外，我們還可以安裝 prettier 插件，設(shè)置代碼在格式化時默認(rèn)縮進(jìn)值。prettier 是做代碼格式化的最常見工具。 ![](https://upload-images.jianshu.io/upload_images/9555590-89f19cc91b0c3791.png) （4）去掉每一行末尾的空格。在設(shè)置項(xiàng)里搜索`空格`或者`"files.trimTrailingWhitespace"`，將值設(shè)置為 true： ![20211012_1231](https://upload-images.jianshu.io/upload_images/9555590-563a761d63dbc7bc.png) 一般來說，每一行代碼末尾的空格是多余的，所以建議去掉。 ### 12、直觀地顯示代碼里的空格和縮進(jìn) ? 代碼里如果有縮進(jìn)或者空格，肉眼是看不出來的，但是我們可以修改配置項(xiàng)，把它揪出來。 在配置項(xiàng)里搜索`editor.renderWhitespace`，修改為`all`： ![20211012_1150](https://upload-images.jianshu.io/upload_images/9555590-f0e8dbeba5ca442b.png) 修改之后，代碼里的空格、縮進(jìn)的展示效果如下： ![20211012_1258](https://upload-images.jianshu.io/upload_images/9555590-4ffb23b5ebffeba7.png) 看到了沒？哪里有空格、哪里是縮進(jìn)，全都一目了然。 ### 13、新建文件后的默認(rèn)文件類型 當(dāng)我們按下快捷鍵「Cmd + N」新建文件時，VS Code 默認(rèn)無法識別這個文件到底是什么類型的，因此也就無法識別相應(yīng)的語法高亮。 如果你想修改默認(rèn)的文件類型，可以在設(shè)置項(xiàng)里搜索`files.defaultLanguage`，設(shè)置項(xiàng)如下： ![](https://upload-images.jianshu.io/upload_images/9555590-810648d90f98f83a.png) 上圖中的紅框部分，填入你期望的默認(rèn)文件類型。我填的是`html`類型，你也可以填寫成 `javascript` 或者 `markdown`，或者其他的語言類型。 ### 14、刪除文件時，是否彈出確認(rèn)框 當(dāng)我們在 VS Code 中刪除文件時，默認(rèn)會彈出確認(rèn)框。如果你想修改設(shè)置，可以在設(shè)置項(xiàng)里搜索`xplorer.confirmDelete`。截圖如下： ![](https://upload-images.jianshu.io/upload_images/9555590-9f2807509770e1ff.png) 我建議這個設(shè)置項(xiàng)保持默認(rèn)的打鉤就好，不用修改。刪除文件前的彈窗提示，也是為了安全考慮，萬一手賤不小心刪了呢？ ### 15、在新窗口打開文件/文件夾 通過 `window.openFoldersInNewWindow`（默認(rèn)值為off）和`window.openFilesInNewWindow`（默認(rèn)值為default），可以配置在打開文件夾、打開文件時，是否開啟一個新的窗口。我個人建議，把這兩個配置項(xiàng)都設(shè)置為 on，避免舊的窗口被覆蓋： ![](https://upload-images.jianshu.io/upload_images/9555590-d39ded37221ead8c.png) 補(bǔ)充知識—— `window.restoreWindows`可以用來配置 如何恢復(fù)之前的會話窗口。涉及到的場景是：你把 VS Code 關(guān)閉了，然后又打開了，是否要展示之前打開過的文件、文件夾？參數(shù)值有以下幾種： - one（默認(rèn)配置）：只會重新打開上一次回話中最后操作的那一個窗口。 - none：打開一個空的窗口，不包含任何文件、文件夾。 - all（建議配置）：恢復(fù)上一次會話中的所有窗口。 - folders：恢復(fù)上一次會話中包含文件夾的窗口。 ![20211012_1704](https://upload-images.jianshu.io/upload_images/9555590-fa40d664dbb89cce.png) ### 16、自動刪除行尾的空格 打開設(shè)置項(xiàng)，搜索`files.trimTrailingWhitespace`，將選項(xiàng)勾選，即可在保存文件時自動刪除行尾的空格。 ### 17、突出顯示成對的括號 我們可以用不同顏色顯示代碼中成對的括號，并用連線標(biāo)注括號范圍。簡稱**彩虹括號**。 最早是通過`Bracket Pair Colorizer 2`插件支持的，但是這個插件已經(jīng)被廢棄了，，因?yàn)?VS Code 已經(jīng)內(nèi)置了該功能。我們可以通過 VS Code的如下配置項(xiàng)，達(dá)到效果： ```json { "editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs":"active" } ``` ### 18、自動換行 自動換行：意味著當(dāng)文本到達(dá)屏幕或頁面的右邊緣時，自動換行會將文本移到下一行，以便繼續(xù)輸入或顯示。 打開設(shè)置項(xiàng)，搜索`Editor:Word Wrap`，將選項(xiàng)值設(shè)置為 on。 此外，你還可以選擇菜單欄`查看-->自動換行`，即可將當(dāng)前文件設(shè)置為自動換行。 > 接下來，我們來講一些更高級的操作。 ## 五、縱享絲滑：常見操作和使用技巧 ### 1、快速生成HTML骨架 先新建一個空的html文件，然后通過以下方式，可以快速生成html骨架。 **方式1**：輸入`!`，然后按下`enter`鍵，即可生成html骨架。如下圖： ![](https://upload-images.jianshu.io/upload_images/9555590-9d3de20d842fa73e.png) **方式2**：輸入`html:5`，然后按住 `Tab`鍵，即可生成html骨架。 生成的骨架，內(nèi)容如下： ```html Document ``` 有了上面的html骨架之后，我們就可以快樂地在里面插入CSS 代碼和 JS 代碼。 ### 2、并排編輯：左右（上下）顯示多個編輯器窗口（copy代碼利器） > 并排編輯是所有的編輯操作中最常用的一個技巧，十分有用。比如我們在開發(fā)一個項(xiàng)目時，可能需要同時打開 HTML 文件和 CSS 文件，很常見。 Mac 用戶按住快捷鍵 `Cmd + \`， Windows 用戶按住快捷鍵`Ctrl + \`，即可同時打開多個編輯器窗口，進(jìn)行并排編輯。效果如下： ![](https://upload-images.jianshu.io/upload_images/9555590-943124aa375a99ec.png) 按快捷鍵「Cmd + 1 」切換到左邊的窗口，按快捷鍵「Cmd + 2 」切換到右邊的窗口，以此類推。隨時隨地，想切就切。 學(xué)會了這一招，以后 copy 代碼的時候，leader 再也不用擔(dān)心我抄得慢了，一天工資到手。 --- 當(dāng)然，使用快捷鍵`Cmd + \`只是其中一種方式，我們還有很多種方式打開并行編輯。我們來做一個匯總。 如果你已經(jīng)打開了一個編輯器，那么可以通過以下幾種方式在另一側(cè)打開另一個編輯器：（按照使用頻率，從高到低排序） - 使用快捷鍵`Cmd + \`將編輯器一分為二。 - 使用快捷鍵`Cmd + P`調(diào)出文件列表，選擇要打開的文件，然后按下 `Cmd + Enter`快捷鍵。【重要】 - 按住 Option 鍵的同時，單擊資源管理器的文件（Windows 用戶是按 Alt 鍵）。 - 點(diǎn)擊編輯器右上角的 `Split Editor`按鈕。 - 選擇菜單欄「查看--> 編輯器布局」，然后選擇你具體想要的布局，如下圖所示： ![20211012_1451](https://upload-images.jianshu.io/upload_images/9555590-1e966a5448c6d1ee.png) - 通過拖拽，把當(dāng)前文件移動到任意一側(cè)。 補(bǔ)充知識：通過配置項(xiàng)`worbench.editor.OpenSideBySideDirection`可以控制編輯器在并排打開時出現(xiàn)的默認(rèn)位置（默認(rèn)值為right，你也可以根據(jù)需要改為 down）。如下圖所示： ![20211012_1455](https://upload-images.jianshu.io/upload_images/9555590-3193255d9d0d9ebb.png) ### 3、從終端 code 命令啟動 VS Code（Mac電腦） 在終端輸入`code`或者輸入 `code + 指定項(xiàng)目的目錄`，就可以啟動 VS Code，十分便捷。即： - `code` 命令：啟動 VS Code 軟件。 - `code pathName/fileName` 命令：通過 VS Code 軟件打開指定目錄/指定文件。 為了達(dá)到目的，我們需要先將 VS Code的軟件安裝路徑添加到環(huán)境變量，一勞永逸。具體操作如下： （1）打開 `bash_profile`文件： ```bash cd ~ vim ./bash_profile ``` （2）在 bash_profile 中添加如下內(nèi)容： ```bash # 從終端啟動VS Code，并設(shè)置vscode啟動的命令別名 alias code="/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code" ``` 注意，由于`Visual Studio Code.app`這個路徑里有空格，所以需要在空格前面加上反斜杠`\`。 （3）重啟環(huán)境變量的配置： ``` # 重啟 source ~/.bash_profile ``` 大功告成。 改完之后，如果沒生效，那你把 `bash_profile`文件 換成 `zshrc`文件試試。 參考鏈接： - [mac通過終端code 命令打開vscode](https://blog.csdn.net/logan_LG/article/details/106800904) 當(dāng)然，還可以通過命令面板，一鍵設(shè)置環(huán)境變量。具體做法是：輸入快捷鍵「Cmd + shift + P」打開命令面板，然后選擇 `shell 命令：從 PATH 中卸載 “code”命令`： ![](https://upload-images.jianshu.io/upload_images/9555590-f1eaa6d3c7c390b9.png) 完成后就可以在終端輸入命令+文件路徑來啟動 VS Code 了。 ### 3、從終端 code 命令啟動 VS Code（Windows電腦） 在終端輸入`code`或者輸入 `code + 指定項(xiàng)目的目錄`，就可以啟動 VS Code，十分便捷。即： - `code` 命令：啟動 VS Code 軟件。 - `code pathName/fileName` 命令：通過 VS Code 軟件打開指定目錄/指定文件。 為了達(dá)到目的，我們需要先將 VS Code的軟件安裝路徑添加到環(huán)境變量，一勞永逸。具體操作如下： （1）打開 VS Code 的安裝位置，進(jìn)入bin文件夾，復(fù)制路徑。比如：`D:\Microsoft VS Code\bin`。 （2）回到桌面，右鍵我的電腦-->高級系統(tǒng)設(shè)置-->環(huán)境變量-->編輯path值，在原來的path后面，追加內(nèi)容`;D:\Microsoft VS Code\bin`（即英文的分號+VS Code 的 bin 路徑) （3）重啟電腦，大功告成。 改完之后，如果沒生效，那八成是因?yàn)槟闾畹?path 值有問題。 參考鏈接： - [windows使用 code . 命令打開vscode](https://www.cnblogs.com/zyl-Tara/p/10642704.html) ### 4、在當(dāng)前文件中搜索 在上面的快捷鍵列表中，我們已經(jīng)知道如下快捷鍵： - Cmd + F（Win 用戶是 Ctrl + F）：在當(dāng)前文件中搜索，光標(biāo)在搜索框里 - Cmd + G（Win 用戶是 F3）：在當(dāng)前文件中搜索，光標(biāo)仍停留在編輯器里 多個搜索結(jié)果出來之后，按下 Enter 鍵之后跳轉(zhuǎn)到下一個搜索結(jié)果，按下 Shift + Enter 鍵之后跳轉(zhuǎn)到上一個搜索結(jié)果。 另外，你可能會注意到，搜索框里有很多按鈕，每個按鈕都對應(yīng)著不同的功能，如下圖所示： ![](https://upload-images.jianshu.io/upload_images/9555590-45e6597d2e8de979.png) 上圖中，你可以通過「Tab」鍵和「Shift + Tab」鍵在輸入框和替換框之間進(jìn)行切換。 「在選定內(nèi)容中查找」這個功能還是比較實(shí)用的。你也可以在設(shè)置項(xiàng)里搜索 `editor.find.autoFindInSelection`，勾選該設(shè)置項(xiàng)后，那么，當(dāng)你選中指定內(nèi)容后，然后按住「Cmd + F」，就可以**自動**只在這些內(nèi)容里進(jìn)行查找。該設(shè)置項(xiàng)如下圖所示： ![](https://upload-images.jianshu.io/upload_images/9555590-3ce4fc076755df5c.png) ### 5、全局搜索 在上面的快捷鍵列表中，我們已經(jīng)知道如下快捷鍵： - Cmd + Shift + F（Win 用戶是 Ctrl + Shift +F）：在全局的文件夾中進(jìn)行搜索。效果如下： ![20211012_1548](https://upload-images.jianshu.io/upload_images/9555590-4464f44a22c697ff.png) 上圖中，你可以點(diǎn)擊**紅框**部分，展開更多的配置項(xiàng)。然后點(diǎn)擊**紅圈**部分，進(jìn)行過濾搜索。注意，第二個紅圈那里會經(jīng)常用到，它可以在搜索時過濾掉 `.git`、`.node_modules`等忽略文件。 上圖中，我們還可以點(diǎn)擊“在編輯器中打開”，在一個單獨(dú)的文件中聚合展示搜索結(jié)果： ![](https://upload-images.jianshu.io/upload_images/9555590-fcfea71f95d246ba.png) ### 6、文件名/文件夾的搜索 前面的快捷鍵那一段我們講過，通過 「Cmd + P」可以快速搜索并打開**文件**/文件夾。這種方式，一般用于快速打開最近編輯過的文件。 其實(shí)還有一種很巧妙的方式，可以在整個項(xiàng)目里，既能搜到文件，也能搜到**文件夾**。這種方式，常用于**過濾項(xiàng)目的目錄**。操作方法很簡單： > 直接在文件資源管理器輸入關(guān)鍵字就行。搜索結(jié)果會自動出現(xiàn)；使用方向鍵進(jìn)行上下移動，可以在搜索的文件和文件夾之間進(jìn)行跳轉(zhuǎn)。 > > 另外，右上角會看到一個過濾器，點(diǎn)擊下圖中的紅圈部分，則只顯示匹配的文件和文件夾。 ![20211012_1616](https://upload-images.jianshu.io/upload_images/9555590-21e5ba9b3e18a860.png) 當(dāng)然，這招也有一點(diǎn)不足：不能搜中文。 ### 7、大綱視圖 如下圖所示，大綱視圖可以展示當(dāng)前代碼的方法結(jié)構(gòu)、文件的目錄結(jié)構(gòu)： ![20211012_1628](https://upload-images.jianshu.io/upload_images/9555590-5c46ee63dd4da6cd.png) ![20211012_1636](https://upload-images.jianshu.io/upload_images/9555590-148ee66e3743e0a4.png) ### 8、文件對比 VS Code 默認(rèn)支持**對比兩個文件的內(nèi)容**。選中兩個文件，然后右鍵選擇「將已選項(xiàng)進(jìn)行比較」即可，效果如下： ![](https://upload-images.jianshu.io/upload_images/9555590-36428ea98d1e7d42.png) VS Code 自帶的對比功能并不夠強(qiáng)大，我們可以安裝插件`compareit`，進(jìn)行更豐富的對比。比如說，安裝完插件`compareit`之后，我們可以將「當(dāng)前文件」與「剪切板」里的內(nèi)容進(jìn)行對比： ![](https://upload-images.jianshu.io/upload_images/9555590-c55196b1516d243d.png) 如果你安裝了 GitLens 插件，還可以將兩個git分支的代碼進(jìn)行比對，非常完美。 ### 9、查找某個函數(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)單擊文件的**行號**，可以選中當(dāng)前行。 - 在某個**行號**的位置，**上下移動鼠標(biāo)，可以選中多行**。 ### 11、重構(gòu) 重構(gòu)分很多種，我們來舉幾個例子。 **命名重構(gòu)**： 當(dāng)我們嘗試去修改某個函數(shù)（或者變量名）時，我們可以把光標(biāo)放在上面，然后按下「F2」鍵，那么，這個函數(shù)（或者變量名）出現(xiàn)的地方都會被修改。 **方法重構(gòu)**： 選中某一段代碼，這個時候，代碼的左側(cè)會出現(xiàn)一個「燈泡圖標(biāo)」，點(diǎn)擊這個圖標(biāo)，就可以把這段代碼提取為一個單獨(dú)的函數(shù)。 ### 12：終端配置 VS Code軟件自帶了終端，但我個人認(rèn)為不是很好用，而且VS Code 軟件關(guān)了之后，終端也沒了。建議大家使用其他的終端軟件，專業(yè)的事情交給專業(yè)的人做。 - Windows平臺的終端：推薦 PowerShell 軟件。遠(yuǎn)程終端推薦 xshell 軟件。 - Mac平臺的終端：推薦 [iTerm2 ](https://iterm2.com/)。 iTerm2 是Mac平臺最好用的終端軟件，沒有之一。 **右鍵行為**： > 在終端上，單擊右鍵所產(chǎn)生的行為在不同的系統(tǒng)里是不同的。 - Windows：如果有**選定**文本，則復(fù)制當(dāng)前文本；如果沒有選定文本，則粘貼。 - macOS：選中光標(biāo)所在位置的單詞，并顯示右鍵菜單。 - Linux：顯示右鍵菜單。 ### 13、Git 版本管理 在 VS Code中使用Git之前，需要你先安裝 Git 環(huán)境。 VS Code 自帶了 Git 版本管理的功能，如下圖所示： ![](https://upload-images.jianshu.io/upload_images/9555590-19b9299df7905ad3.png) 上圖中，我們可以在這里進(jìn)行常見的 git 命令操作。如果你還不熟悉 **Git 版本管理**，可以先去補(bǔ)補(bǔ)課。 我自己用的最多的功能是**diff 代碼**和**合并沖突**，自從用上了 VS Code 的這兩個功能，簡直離不開它。 我們先來看看 diff 代碼的效果： ![20211013_1411](https://upload-images.jianshu.io/upload_images/9555590-448abd21327a631c.png) 上圖中，點(diǎn)擊右上角的`...`，然后點(diǎn)擊`內(nèi)聯(lián)視圖`，則可以換一種視圖 diff 代碼： ![](https://upload-images.jianshu.io/upload_images/9555590-8f811429ef299cbe.png) **Git狀態(tài)欄**： ![20211013_1421](https://upload-images.jianshu.io/upload_images/9555590-d064a9bedfbd21c4.png) 在VS Code的左下角會顯示Git狀態(tài)欄。如果當(dāng)前代碼倉庫配置了遠(yuǎn)程倉庫，那么“同步更改”會顯示以下信息： - 左邊的數(shù)字：表示遠(yuǎn)程分支比本地分支多了XX個 Git commit。 - 右邊的數(shù)字：表示本地分支比遠(yuǎn)程分支多了XX個 Git commit。 點(diǎn)擊“同步更改”按鈕，會拉取（pull）遠(yuǎn)程分支到本地分支，并推送（push）本地的Git commit到遠(yuǎn)程分支。 如果當(dāng)前代碼倉庫沒有配置遠(yuǎn)程倉庫，則會顯示“發(fā)布更改”的按鈕。點(diǎn)擊“發(fā)布更改”按鈕，會把當(dāng)前分支push到遠(yuǎn)程倉庫。 --- 另外，我建議安裝插件`GitLens`搭配使用，它是 VS Code 中我最推薦的一個插件，簡直是 Git 神器，碼農(nóng)必備。 我還要補(bǔ)充一句： 有人說，高手都是直接用命令行操作Git。然而，根據(jù)我多年的經(jīng)驗(yàn)來看，如果你的代碼倉庫需要管理的分支特別多，與團(tuán)隊(duì)的其他成員需要經(jīng)常協(xié)作，那么，我建議你**優(yōu)先使用** GUI 圖形化工具來操作Git，避免出錯。 我推薦的GUI版的Git工具有： - [Tower](https://www.git-tower.com/) - [Sourcetree](https://www.sourcetreeapp.com/) - [GitKraken](https://www.gitkraken.com/) ### 14、將工作區(qū)放大/縮小 我們在上面的設(shè)置項(xiàng)里修改字體大小后，僅僅只是修改了代碼的字體大小。 如果你想要縮放整個工作區(qū)（包括代碼的字體、左側(cè)導(dǎo)航欄的字體等），可以按下快捷鍵「**cmd +/-**」。windows 用戶是按下「ctrl +/-」 **當(dāng)我們在投影儀上給別人演示代碼的時候，這一招十分管用**。 如果你想恢復(fù)默認(rèn)的工作區(qū)大小，可以在命令面板輸入`重置縮放`（英文是`reset zoom`） f### 11、創(chuàng)建多層子文件夾 我們可以在新建文件夾的時候，如果直接輸入`aa/bb/cc`，比如： ![](https://upload-images.jianshu.io/upload_images/9555590-8cfe845dc206324a.png) 那么，就可以創(chuàng)建多層子文件夾，效果如下： ![](https://upload-images.jianshu.io/upload_images/9555590-4f4d9d71b2c46e17.png) ### 15、`.vscode` 文件夾的作用 為了統(tǒng)一團(tuán)隊(duì)的 vscode 配置，我們可以在項(xiàng)目的根目錄下建立`.vscode`目錄，在里面放置一些配置內(nèi)容，比如： - `settings.json`：工作空間設(shè)置、代碼格式化配置、插件配置。 - `sftp.json`：ftp 文件傳輸?shù)呐渲谩? `.vscode`目錄里的配置只針對當(dāng)前項(xiàng)目范圍內(nèi)生效。將`.vscode`提交到代碼倉庫，大家統(tǒng)一配置時，會非常方便。 ### 16、自帶終端 我們可以按下「Ctrl + `」打開 VS Code 自帶的終端。我認(rèn)為內(nèi)置終端并沒有那么好用，我更建議你使用第三方的終端 **item2**。 ### 17、markdown 語法支持 VS Code 自帶 markdown 語法高亮。也就是說，如果你是用 markdown 格式寫文章，則完全可以用 VS Code 進(jìn)行寫作。 寫完 md 文件之后，你可以點(diǎn)擊右上角的按鈕進(jìn)行預(yù)覽，如下圖所示： ![](https://upload-images.jianshu.io/upload_images/9555590-15f6f5b5a3cd9c6f.png) 我一般是安裝「Markdown Preview Github Styling」插件，以 GitHub 風(fēng)格預(yù)覽 Markdown 樣式。樣式十分簡潔美觀。 你也可以在控制面板輸入`Markdown: 打開預(yù)覽`，直接全屏預(yù)覽 markdown 文件。 ### 18、Emmet in VS Code `Emmet`可以極大的提高 html 和 css 的編寫效率，它提供了一種非常簡練的語法規(guī)則。 舉個例子，我們在編輯器中輸入縮寫代碼：`ul>li*6` ，然后按下 Tab 鍵，即可得到如下代碼片段： ```html
``` VS Code 默認(rèn)支持 Emmet。更多 Emmet 語法規(guī)則，可以自行查閱。 ### 19、修改字體，使用「Fira Code」字體 這款字體很漂亮，很適合用來寫代碼： ![](https://upload-images.jianshu.io/upload_images/9555590-68d26f845ad7def0.png) 安裝步驟如下： （1）進(jìn)入 網(wǎng)站，下載并安裝「Fira Code」字體。 （2）打開 VS Code 的「設(shè)置」，搜索`font`，修改相關(guān)配置為如下內(nèi)容： ```json "editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 設(shè)置字體顯示 "editor.fontLigatures": false,//控制是否啟用字體連字，true啟用，false不啟用 ``` 上方的第二行配置，取決于個人習(xí)慣，我是直接設(shè)置為`"editor.fontLigatures": null`，因?yàn)槲也惶?xí)慣連字。 ### 20、代碼格式化 VS Code 默認(rèn)對 JavaScript、TypeScript、JSON、HTML 提供了開箱即用的代碼格式化支持。其他語言則需要先安裝相應(yīng)的插件才能支持。 另外，我們還可以安裝 Prettier 插件進(jìn)行**更精細(xì)**的代碼格式化。下一段將插件的時候，會講解。 ### 21、智能提示 IntelliSense VS Code 默認(rèn)對 JavaScript、TypeScript、JSON、HTML、CSS、SCSS、Less這7種語言（文件）提供了**智能提示**的支持。其他編程語言則需要先安裝相應(yīng)的插件才能支持。 在 VS Code插件職場中，下圖是最受歡迎的8種[編程語言插件](https://marketplace.visualstudio.com/search?target=VSCode&category=Programming%20Languages&sortBy=Installs)： ![20211013_1120](https://upload-images.jianshu.io/upload_images/9555590-ef88076d92ce1242.png) 智能提示的功能很強(qiáng)大， 包括函數(shù)介紹、代碼自動補(bǔ)全等等。 ### 22、調(diào)試與運(yùn)行 VS Code **內(nèi)置**了對 Node.js 運(yùn)行時的調(diào)試支持，可以直接調(diào)試 JavaScript 和 TypeScript。其他編程語言的調(diào)試，則需要先安裝相應(yīng)的插件才能支持。 在 VS Code插件市場中，下圖是最受歡迎的幾種調(diào)試插件： ![](https://upload-images.jianshu.io/upload_images/9555590-6f83aee9fb2e6b33.png) ### 23、文件傳輸：sftp 如果你需要將本地文件通過 ftp 的形式上傳到局域網(wǎng)的服務(wù)器（需要先把服務(wù)端的配置搭建好），可以安裝`sftp`這個插件，很好用。在公司會經(jīng)常用到。 步驟如下： （1）安裝插件`sftp`。 （2）配置 `sftp.json`文件。 插件安裝完成后，輸入快捷鍵「cmd+shift+P」彈出命令面板，然后輸入`sftp:config`，回車，當(dāng)前工程的`.vscode`文件夾下就會自動生成一個`sftp.json`文件，我們需要在這個文件里配置的內(nèi)容可以是： - `host`：服務(wù)器的 IP 地址 - `username`：用戶名 - `privateKeyPath`：存放在本地的已配置好的用于登錄工作站的密鑰文件（也可以是 ppk 文件） - `remotePath`：工作站上與本地工程同步的文件夾路徑，需要和本地工程文件根目錄同名，且在使用 sftp 上傳文件之前，要手動在工作站上 mkdir 生成這個根目錄 - `ignore`：指定在使用 sftp: sync to remote 的時候忽略的文件及文件夾，注意每一行后面有逗號，最后一行沒有逗號 舉例如下：(注意，其中的注釋需要去掉) ```json { "host": "192.168.xxx.xxx", //服務(wù)器ip "port": 22, //端口，sftp模式是22 "username": "", //用戶名 "password": "", //密碼 "protocol": "sftp", //模式 "agent": null, "privateKeyPath": null, "passphrase": null, "passive": false, "interactiveAuth": false, "remotePath": "/root/node/build/", //服務(wù)器上的文件地址 "context": "./server/build", //本地的文件地址 "uploadOnSave": true, //監(jiān)聽保存并上傳 "syncMode": "update", "watcher": { //監(jiān)聽外部文件 "files": false, //外部文件的絕對路徑 "autoUpload": false, "autoDelete": false }, "ignore": [ //忽略項(xiàng) "**/.vscode/**", "**/.git/**", "**/.DS_Store" ] } ``` （3）在 VS Code 的當(dāng)前文件里，選擇「右鍵 -> upload」，就可以將本地的代碼上傳到 指定的 ftp 服務(wù)器上（也就是在上方 `host` 中配置的服務(wù)器 ip）。 我們還可以選擇「右鍵 -> Diff with Remote」，就可以將本地的代碼和 ftp 服務(wù)器上的代碼做對比，非常方便。 ### 24、沉浸模式/禪模式 程序員寫代碼需要專注，有時需要進(jìn)入一種心流。VS Code給我們提供了一種全屏下的沉浸模式，周圍的面板都會被隱藏起來，只顯示編輯器部分。 操作方法：菜單欄選擇「查看-外觀-禪模式」即可；或者按下快捷鍵`Cmd + K`，放手，再按`Z`也可以達(dá)到目的。 ### 25、遠(yuǎn)程同步 VS Code 配置項(xiàng) 北京時間的[2020年8月14日](https://zhuanlan.zhihu.com/p/184868336)，微軟發(fā)布 Visual Studio Code 1.48 穩(wěn)定版。此版本**原生**支持用戶同步 VS Code的配置，只需要登錄微軟賬號或者 GitHub 賬號即可。 有了這個功能之后，我們可以先在老電腦上登錄賬號，即可將軟件的配置項(xiàng)自動開啟云同步。當(dāng)你下次換一個新的電腦，下載安裝 VS Code，點(diǎn)擊軟件左下角的設(shè)置按鈕，登錄此前的微軟賬號或GitHub賬號，即可自動將舊電腦的軟件配置項(xiàng)，同步到新電腦的軟件上。極其方便。 ### 26、正則表達(dá)式批量刪除字符串 **需求**：將文本中的字符串`axxxxb`，批量替換為`ab`。其中，開頭字符 a 和 結(jié)尾字符 b 固定，中間xxx長度不確定。 **解決**：傳統(tǒng)查找替換無法勝任?？梢允褂肰Scode正則表達(dá)式功能，查找`a.*?b`替換為`ab`即可。其中`?`是禁止貪婪匹配，否則會誤刪很多內(nèi)容。 --- **拓展需求**：需求——將文本中的字符串`axxxx`，批量替換為`a`。其中，開頭字符 a 固定，后面的xxx長度不確定。 **解決**：傳統(tǒng)查找替換無法勝任?？梢允褂肰Scode正則表達(dá)式功能，查找`a.*?\n`替換為`a\n`即可。 ## 六、三頭六臂：VS Code 插件介紹 & 插件推薦 VS Code 有一個很強(qiáng)大的功能就是支持插件擴(kuò)展，讓你的編輯器仿佛擁有了三頭六臂。 ### 安裝插件 ![](https://upload-images.jianshu.io/upload_images/9555590-39dc87f497c51443.png) 上圖中，點(diǎn)擊紅框部分，即可在頂部輸入框里，查找你想要的插件名，然后進(jìn)行安裝。 插件安裝完成后，記得重啟軟件（或者點(diǎn)擊插件位置的“重新加載”），插件才會生效。 另外，我們還可以訪問官網(wǎng)的插件市場來安裝插件： - VS Code插件市場（官方）：https://marketplace.visualstudio.com/vscode **插件的安裝目錄**： - Windows：：`%USERPROFILE%\.vscode\extensions` - macOS：`~/.vscode/extensions` - macOS：`~/.vscode/extensions` ### 插件的類型 ![20211013_1757_2](https://upload-images.jianshu.io/upload_images/9555590-cad2d0422286efa8.png) 插件市場的首頁有四個模塊，可以作為重要的信息來源： - Featured：由 VS Code團(tuán)隊(duì)精心推薦的插件。 - Trending：近期熱門插件。 - Most Popular：按總安裝量排序的插件。 - Recently Added：最新發(fā)布的插件。 ![20211013_1758](https://upload-images.jianshu.io/upload_images/9555590-0bcd06316643d8eb.png) ![20211013_1955](https://upload-images.jianshu.io/upload_images/9555590-87ca6bc19655605a.png) 插件市場至少有17種類型的插件：（按照數(shù)量排序） - Themes：主題插件 - Programming Languages：編程語言插件 - Snippets：代碼片段 - Extension Packs：插件包，里面包括多個插件 - Formatters：代碼格式化 - Linters：靜態(tài)檢查 - Debuggers：調(diào)試器 - Keymaps：快捷鍵映射 - Visualization：可視化 - Language Packs：各國的語言插件 - Azure：Azure 云計算 - Data Science：數(shù)據(jù)科學(xué) - SCM Providers：源代碼控制管理器（source control manager） - Notebooks - Education：教育 - Testing：測試相關(guān) - Machine Learning：機(jī)器學(xué)習(xí) - Others：其他 ### 插件的過濾顯示 在 VS Code中打開插件管理視圖，可以針對已安裝的插件，進(jìn)行過濾展示。 1）點(diǎn)擊插件視圖右上角的`...`按鈕，可以展示不同狀態(tài)的插件： ![20211013_2011](https://upload-images.jianshu.io/upload_images/9555590-7e056fd09475d986.png) 2）在搜索框輸入字符`@`，會展示出不同類型的過濾器： ![20211013_2015](https://upload-images.jianshu.io/upload_images/9555590-bc184f56352f5522.png) **常見的過濾器如下**： 1）按大類搜： - `@builtin`：顯示 VS Code內(nèi)置的插件 - `@disabled`：顯示被禁用的插件 - `@enabled`：顯示已啟用的插件 - `@installed`：顯示已安裝的插件 - `@outdated`：顯示待更新的插件 2）精準(zhǔn)搜索： - `@id`：按id顯示插件 - `@tag`：根據(jù)標(biāo)簽顯示插件。 3）對插件進(jìn)行排序： - `@sort:installs`：根據(jù)插件的安裝量排序 - `@sourt:rating`：根據(jù)插件的評分排序 - `@sort:name`：根據(jù)插件名字的字母順序排序 4）組合搜索：（舉例） - `@installed @category:themes`：顯示已安裝的主題插件。 - `@sort:installs java`：對 Java 相關(guān)的插件按照安裝量排序。 下面的內(nèi)容，我來列舉一些常見的插件，這些插件都很實(shí)用，小伙伴們可以按需安裝。注意：每一類插件里，**順序越靠前，越實(shí)用**。 ### 1、基本插件 #### Chinese (Simplified) Language Pack for Visual Studio Code 讓軟件顯示為簡體中文語言。 ### 2、Git 相關(guān)插件 #### GitLens 【薦】 我強(qiáng)烈建議你安裝插件`GitLens`，它是 VS Code 中我最推薦的一個插件，簡直是 Git 神器，碼農(nóng)必備。如果你不知道，那真是 out 了。 GitLens 在 Git 管理上有很多強(qiáng)大的功能，比如： - 將光標(biāo)放置在代碼的當(dāng)前行，可以看到這樣代碼的提交者是誰，以及提交時間。這一點(diǎn)，是 GitLens 最便捷的功能。 - 查看某個 commit 的代碼改動記錄 - 查看不同的分支 - 可以將兩個 commit 進(jìn)行代碼對比 - 甚至可以將兩個 branch 分支進(jìn)行整體的代碼對比。這一點(diǎn)，簡直是 GitLens 最強(qiáng)大的功能。當(dāng)我們在不同分支 review 代碼的時候，就可以用到這一招。 打開你的 Git倉庫，未安裝 GitLens 時是這樣的： ![](https://upload-images.jianshu.io/upload_images/9555590-9d38ff062146ed5b.png) 安裝了 GitLens 之后是這樣的： ![](https://upload-images.jianshu.io/upload_images/9555590-b12fbb4246c7895a.png) 上圖中，紅框部分就是 GitLens 的功能，諸君可以自由發(fā)揮。 補(bǔ)充一個有意思的趣事：Python插件、Ruby插件、GitLens插件、Vetur插件，這四個插件的開發(fā)者先后加入了微軟。 #### Git History 有些同學(xué)習(xí)慣使用編輯器中的 Git 管理工具，而不太喜歡要打開另外一個 Git UI 工具的同學(xué)，這一款插件滿足你查詢所有 Git 記錄的需求。 #### Local History 【薦】 維護(hù)文件的本地歷史記錄。代碼意外丟失時，有時可以救命。 ![](https://upload-images.jianshu.io/upload_images/9555590-9c52ca3960086b63.png) ### 3、代碼智能提示插件 #### Vetur Vue 多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補(bǔ)全，debugger。VS Code 官方欽定 Vue 插件，Vue 開發(fā)者必備。 #### ES7 React/Redux/GraphQL/React-Native snippets React/Redux/react-router 的語法智能提示。 #### JavaScript(ES6) code snippets ES6 語法智能提示，支持快速輸入。 #### javascript console utils：快速打印 log 日志【薦】 安裝這個插件后，當(dāng)我們按住快捷鍵「Cmd + Shift + L」后，即可自動出現(xiàn)日志 `console.log()`。簡直是日志黨福音。 當(dāng)我們選中某個變量 `name`，然后按住快捷鍵「Cmd + Shift + L」，即可自動出現(xiàn)這個變量的日志 `console.log(name)`。 其他的同類插件還有：Turbo Console Log。 不過，生產(chǎn)環(huán)境的代碼，還是盡量少打日志比較好，避免出現(xiàn)一些異常。 編程有三等境界： - 第三等境界是打日志，這是最簡單、便捷的方式，略顯低級，一般新手或資深程序員偷懶時會用。 - 第二等境界是斷點(diǎn)調(diào)試，在前端、Java、PHP、iOS 開發(fā)時非常常用，通過斷點(diǎn)調(diào)試可以很直觀地跟蹤代碼執(zhí)行邏輯、調(diào)用棧、變量等，是非常實(shí)用的技巧。 - 第一等境界是測試驅(qū)動開發(fā)，在寫代碼之前先寫測試。與第二等的斷點(diǎn)調(diào)試剛好相反，大部分人不是很習(xí)慣這種方式，但在國外開發(fā)者或者敏捷愛好者看來，這是最高效的開發(fā)方式，在保證代碼質(zhì)量、重構(gòu)等方面非常有幫助，是現(xiàn)代編程開發(fā)必不可少的一部分。 #### Code Spell Checker：單詞拼寫錯誤檢查 這個拼寫檢查程序的目標(biāo)是幫助捕獲常見的單詞拼寫錯誤，可以檢測駝峰命名。從此告別 Chinglish. #### Auto Close Tag、Auto Rename Tag 自動閉合配對的標(biāo)簽、自動重命名配對的標(biāo)簽。 ### 4、代碼顯示增強(qiáng)插件 #### highlight-icemode：選中相同的代碼時，讓高亮顯示更加明顯 VSCode 自帶的高亮顯示，實(shí)在是不夠顯眼?？梢杂貌寮С忠幌隆? 所用了這個插件之后，VS Code 自帶的高亮就可以關(guān)掉了： 在用戶設(shè)置里添加`"editor.selectionHighlight": false`即可。 參考鏈接：[vscode 選中后相同內(nèi)容高亮插件推薦](https://blog.csdn.net/palmer_kai/article/details/79548164) #### vscode-icons vscode-icons 會根據(jù)文件的后綴名來顯示不同的圖標(biāo)，讓你更直觀地知道每種文件是什么類型的。 #### indent-rainbow：突出顯示代碼縮進(jìn) `indent-rainbow`插件：突出顯示代碼縮進(jìn)。 安裝完成后，效果如下圖所示： ![](https://upload-images.jianshu.io/upload_images/9555590-553cadc732c85bed.png) #### TODO Highlight 寫代碼過程中，突然發(fā)現(xiàn)一個 Bug，但是又不想停下來手中的活，以免打斷思路，怎么辦？按照代碼規(guī)范，我們一般是在代碼中加個 TODO 注釋。比如：（注意，一定要寫成大寫`TODO`，而不是小寫的`todo`） ``` //TODO:這里有個bug，我一會兒再收拾你 ``` 或者： ``` //FIXME:我也不知道為啥， but it works only that way. ``` 安裝了插件 `TODO Highlight`之后，按住「Cmd + Shift + P」打開命令面板，輸入「Todohighlist」，選擇相關(guān)的命令，我們就可以看到一個 todoList 的清單。 #### Better Comments 為注釋添加更醒目、帶分類的色彩。 ### 5、代碼格式化插件 #### Prettier：代碼格式化 Prettier 是一個代碼格式化工具，**只關(guān)注格式化，但不具備校驗(yàn)功能**。在一個多人協(xié)同開發(fā)的團(tuán)隊(duì)中，統(tǒng)一的代碼編寫規(guī)范非常重要。一套規(guī)范可以讓我們編寫的代碼達(dá)到一致的風(fēng)格，提高代碼的可讀性和統(tǒng)一性。自然維護(hù)性也會有所提高，代碼的展示也會更加美觀。 步驟如下： （1）安裝插件 `Prettier`。 （2）在項(xiàng)目的根路徑下，新建文件`.prettierrc`，并在文件中添加如下內(nèi)容： ```json { "printWidth": 150, "tabWidth": 4, "semi": true, "singleQuote": true, "trailingComma": "es5", "tslintIntegration": true, "insertSpaceBeforeFunctionParenthesis": false } ``` 上面的內(nèi)容，是我自己的配置，你可以參考。更多配置，可見官方文檔： （3）Mac用戶按快捷鍵「Option + Shift + F」，Win 用戶按快捷鍵「Alt + shift + F」，即可完成代碼的格式化。如果你的VS Code 設(shè)置的是自動格式化代碼，那么這一步可以忽略。 #### ESLint：代碼格式的校驗(yàn) 日常開發(fā)中，建議用 Prettier 做**代碼格式化**，然后用 eslint 做**格式校驗(yàn)**。很多人把這兩個插件的功能弄混了。 一般做法是：格式化建議是由程序員手動觸發(fā)，格式校驗(yàn)由系統(tǒng)強(qiáng)制校驗(yàn)。通過 Prettier **手動**觸發(fā)格式化，是為了讓用戶有感知；通過eslint 做**強(qiáng)制**校驗(yàn)之后，如果代碼的格式不符合要求，系統(tǒng)就禁止你提交代碼。 #### Beautify 代碼格式化工具。 備注：相比之下，Prettier 是當(dāng)前最流行的代碼格式化工具，比 Beautify 用得更多。 #### Paste JSON as Code 此插件可以將剪貼板中的 JSON 字符串轉(zhuǎn)換成工作代碼。支持多種語言。 #### JS-CSS-HTML Formatter【薦】 保存文件時，自動格式化 HTML、CSS、JS代碼。 ### 6、圖片相關(guān)插件 #### Polacode-2020：生成代碼截圖 【薦】 可以把代碼片段保存成美觀的圖片，主題不同，代碼的配色方案也不同，也也可以自定義設(shè)置圖片的邊框顏色、大小、陰影。 尤其是在我們做 PPT 分享時需要用到代碼片段時，或者需要在網(wǎng)絡(luò)上優(yōu)雅地分享代碼片段時，這一招很有用。 生成的效果如下： ![](https://upload-images.jianshu.io/upload_images/9555590-804b87573b9bd4b9.png) 其他同類插件：`CodeSnap`。我們也可以通過 這個網(wǎng)站生成代碼圖片 有人可能會說：直接用 QQ 截圖不行嗎？可以是可以，但不夠美觀、不夠干凈。 #### Image Preview 【薦】 圖片預(yù)覽。鼠標(biāo)移動到圖片 url 上的時候，會自動顯示圖片的預(yù)覽和圖片尺寸。 ### 7、CSS相關(guān)插件 #### CSS Peek 增強(qiáng) HTML 和 CSS 之間的關(guān)聯(lián)，快速查看該元素上的 CSS 樣式。 #### Vue CSS Peek CSS Peek 對 Vue 沒有支持，該插件提供了對 Vue 文件的支持。 #### Color Info 這個便捷的插件，將為你提供你在 CSS 中使用顏色的相關(guān)信息。你只需在顏色上懸停光標(biāo)，就可以預(yù)覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關(guān)信息了。 ### 8、Mardown 相關(guān)插件 #### Markdown Preview Github Styling 【薦】 以 GitHub 風(fēng)格預(yù)覽 Markdown 樣式，十分簡潔優(yōu)雅。就像下面這樣，左側(cè)書寫 Markdown 文本，右側(cè)預(yù)覽 Markdown 的渲染效果： ![](https://upload-images.jianshu.io/upload_images/9555590-5333516f8e68de46.png) #### Markdown Preview Enhanced 預(yù)覽 Markdown 樣式。 #### Markdown All in One 這個插件將幫助你更高效地在 Markdown 中編寫文檔。 ### 9、通用工具類插件 #### sftp：文件傳輸 【薦】 如果你需要將本地文件通過 ftp 的形式上傳到局域網(wǎng)的服務(wù)器，可以安裝`sftp`這個插件，很好用。在公司會經(jīng)常用到。 詳細(xì)配置已經(jīng)在上面講過。 #### Live Server 【薦】 在本地啟動一個服務(wù)器，代碼寫完后可以實(shí)現(xiàn)「熱更新」，實(shí)時地在網(wǎng)頁中看到運(yùn)行效果。就不需要每次都得手動刷新頁面了。 使用方式：安裝插件后，開始寫代碼；代碼寫完后，右鍵選擇「Open with Live Server」。 #### open in browser 安裝`open in browser`插件后，在 HTML 文件中「右鍵選擇 --> Open in Default Browser」，即可在瀏覽器中預(yù)覽網(wǎng)頁。 #### Project Manager 工作中，我們經(jīng)常會來回切換多個項(xiàng)目，每次都要找到對應(yīng)項(xiàng)目的目錄再打開，比較麻煩。Project Manager 插件可以解決這樣的煩惱，它提供了專門的視圖來展示你的項(xiàng)目，我們可以把常用的項(xiàng)目保存在這里，需要時一鍵切換，十分方便。 #### WakaTime 【薦】 統(tǒng)計在 VS Code 里寫代碼的時間。統(tǒng)計效果如下： ![](https://upload-images.jianshu.io/upload_images/9555590-931cee9cfe847e34.png) #### Code Time `Code Time`插件：記錄編程時間，統(tǒng)計代碼行數(shù)。 安裝該插件后，VS Code 底部的狀態(tài)欄右下角可以看到時間統(tǒng)計。點(diǎn)擊那個位置之后，選擇「Code Time Dashboard」，即可查看統(tǒng)計結(jié)果。 備注：團(tuán)長試了一下這個 code time 插件，發(fā)現(xiàn)統(tǒng)計結(jié)果不是很準(zhǔn)。 #### File Tree to Text Generator：快速生成文件的目錄樹 如題。 #### minapp：小程序支持 小程序開發(fā)必備插件。 #### Search node_modules `node_modules`模塊里面的文件夾和模塊實(shí)在是太多了，根本不好找。好在安裝 `Search node_modules` 這個插件后，輸入快捷鍵「Cmd + Shift + P」，然后輸入 `node_modules`，在彈出的選項(xiàng)中選擇 `Search node_modules`，即可搜索 node_modules 里的模塊。 ![](https://upload-images.jianshu.io/upload_images/9555590-d8d609b5ba068718.png) #### RemoteHub 不要驚訝，RemoteHub 和 GitLens 是同一個作者開發(fā)出來的。 `RemoteHub`插件的作用是：可以在本地查看 GitHub 網(wǎng)站上的代碼，而不需要將代碼下載到本地。 ![](https://upload-images.jianshu.io/upload_images/9555590-2654589f72fec6ec.png) 這個插件目前使用的人還不多，趕緊安裝起來嘗嘗鮮吧。 #### Live Share：實(shí)時編碼分享 `Live Share`這個神奇的插件是由微軟官方出品，它的作用是：**實(shí)時編碼分享**。也就是說，它可以實(shí)現(xiàn)你和你的同伴一起寫代碼。這絕對就是**結(jié)對編程**的神器啊。 安裝方式： 打開插件管理，搜索“l(fā)ive share”，安裝。安裝后重啟 VS Code，在左側(cè)會多出一個按鈕： ![](https://upload-images.jianshu.io/upload_images/9555590-4d2d512c30a32a38.png) 上圖中，點(diǎn)擊紅框部分，登錄后就可以分享你的工作空間了。 ![](https://upload-images.jianshu.io/upload_images/9555590-fa5c8520b46a9eec.png) #### Import Cost 在項(xiàng)目開發(fā)過程中，我們會引入很多 npm 包，有時候可能只用到了某個包里的一個方法，卻引入了整個包，導(dǎo)致代碼體積增大很多。`Import Cost`插件可以在代碼中友好的提示我們，當(dāng)前引入的包會增加多少體積，這很有助于幫我們優(yōu)化代碼的體積。 ### 10、主題插件 給你的 VS Code 換個皮膚吧，免費(fèi)的那種。 - Dracula Theme - Material Theme - Nebula Theme - [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) - One Monokai Theme - Monokai Pro - Ayu - [Snazzy Plus](https://marketplace.visualstudio.com/items?itemName=akarlsten.vscode-snazzy-akarlsten) - [Dainty](https://marketplace.visualstudio.com/items?itemName=alexanderte.dainty-vscode) - `SynthWave '84` - GitHub Plus Theme：白色主題 - Horizon Theme：紅色主題 ## 七、無縫切換：VS Code 配置云同步 我們可以將配置云同步，這樣的話，當(dāng)我們換個電腦時，即可將配置一鍵同步到本地，就不需要重新安裝插件了，也不需要重新配置軟件。 下面講的兩個同步方法，都可以，看你自己需要。方法1是 VS Code自帶的同步功能，操作簡單。方法2 需要安裝插件，支持更多的自定義配置。 ### 方法1：使用 VS Code 自帶的同步功能 1、**配置同步**： （1）在菜單欄選擇「 Code --> 首選項(xiàng) --> 打開設(shè)置同步」： ![](https://upload-images.jianshu.io/upload_images/9555590-a1e5ef1421155456.png) （2）選擇需要同步的配置： ![](https://upload-images.jianshu.io/upload_images/9555590-b5e26522e8edbd1e.png) （3）通過Microsoft或者GitHub賬號登錄。 上圖中，點(diǎn)擊“登錄并打開”，然后彈出如下界面： ![](https://upload-images.jianshu.io/upload_images/9555590-a98a95d45a54fa90.png) 上圖中，使用 微軟賬號或者 GitHub賬號登錄： ![](https://upload-images.jianshu.io/upload_images/9555590-849bc8d4e9411971.png) （4）同步完成后，菜單欄會顯示“首先項(xiàng)同步已打開”，最左側(cè)也會多出一個同步圖標(biāo)，如下圖所示： ![](https://upload-images.jianshu.io/upload_images/9555590-f8a1584291b330fa.png) 2、**管理同步**： （1）點(diǎn)擊菜單欄「Code --> 首選項(xiàng) --> 設(shè)置同步已打開」，會彈出如下界面，進(jìn)行相應(yīng)的同步管理即可： ![](https://upload-images.jianshu.io/upload_images/9555590-e346dc37b67a93bf.png) （2）換另外一個電腦時，登錄相同的賬號，即可完成同步。 參考鏈接： - [VS Code原生的配置同步功能——Settings Sync](https://blog.csdn.net/baidu_33340703/article/details/106967884) ### 方法2：使用插件 `settings-sync` 使用方法2，我們還可以把配置分享其他用戶，也可以把其他用戶的配置給自己用。 1、**配置同步**：（將自己本地的配置云同步到 GitHub） （1）安裝插件 `settings-sync`。 （2）安裝完插件后，在插件里使用 GitHub 賬號登錄。 （3）登錄后在 vscode 的界面中，可以選擇一個別人的 gist；也可以忽略掉，然后創(chuàng)建一個屬于自己的 gist。 （4）使用快捷鍵 「Command + Shift + P」，在彈出的命令框中輸入 sync，并選擇「更新/上傳配置」，這樣就可以把最新的配置上傳到 GitHub。 2、**管理同步**：（換另外一個電腦時，從云端同步配置到本地） （1）當(dāng)我們換另外一臺電腦時，可以先在 VS Code 中安裝 `settings-sync` 插件。 （2）安裝完插件后，在插件里使用 GitHub 賬號登錄。 （3）登錄之后，插件的界面上，會自動出現(xiàn)之前的同步記錄： ![](https://upload-images.jianshu.io/upload_images/9555590-27fb23be1ae5f07d.png) 上圖中，我們點(diǎn)擊最新的那條記錄，就可將云端的最新配置同步到本地： ![](https://upload-images.jianshu.io/upload_images/9555590-e9cc114582de7267.png) 如果你遠(yuǎn)程的配置沒有成功同步到本地，那可能是網(wǎng)絡(luò)的問題，此時，可以使用快捷鍵 「Command + Shift + P」，在彈出的命令框中輸入 sync，并選擇「下載配置」，多試幾次。 **使用其他人的配置**： 如果我們想使用別人的配置，首先需要對方提供給你 gist。具體步驟如下： （1）安裝插件 `settings-sync`。 （2）使用快捷鍵 「Command + Shift + P」，在彈出的命令框中輸入 sync，并選擇「下載配置」 （3）在彈出的界面中，選擇「Download Public Gist」，然后輸入別人分享給你的 gist。注意，這一步不需要登錄 GitHub 賬號。 ## 最后一段 如果你還有什么推薦的 VS Code 插件，歡迎留言 公眾號：大前端全棧開發(fā)。 本文由[mdnice](https://mdnice.com/?platform=6)多平臺發(fā)布
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容