一篇搞定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)容