給在座各位“打工人”分享33款提高工作效率的vscode“實(shí)用插件”

• 本文已獲得原作者的獨(dú)家授權(quán)，有想轉(zhuǎn)載的朋友們可以在后臺聯(lián)系我申請開白哦！
• PS：歡迎掘友們向我投稿哦，被采用的文章還可以送你掘金精美周邊！

海闊憑魚躍，天高任鳥飛。Hey 你好！我是秦愛德。?

平平無奇上班摸魚，甚至想著如何帶薪拉屎？不不不，今天我們來聊聊 vscode 中那些提高工作效率的實(shí)用插件吧。

在之前的給在座各位 “老劃水員” 分享 10 款提高幸福指數(shù)的 vscode“摸魚神器” 這篇文章發(fā)布之后，也收獲了很多小伙伴的點(diǎn)贊，咱們也不能一天天光摸魚，還是得干點(diǎn)正事。特此，我整理了一些好用的 vscode 插件，如果覺得不錯，歡迎一鍵三連，你們的點(diǎn)贊，就是我持續(xù)寫文最大的動力???

本文從基礎(chǔ)必備、代碼規(guī)范、開發(fā)神器三個方面來推薦，方方面面都有涉及，有了這些神器就讓我們一起愉悅的擼代碼吧！

???前方高能，多圖警告???

基礎(chǔ)通用插件

Chinese

vscode編輯器漢化包，安裝后，在 locale.json 中添加 "locale": "zh-cn"，即可載入中文（簡體）語言包。

Auto Rename Tag

自動重命名成對的HTML標(biāo)記，修改開始標(biāo)簽，結(jié)束標(biāo)簽會同步修改

HTML Snippets

HTML 代碼片段，該插件可為你提供 html 標(biāo)簽的代碼提示，不用鍵入尖括號了

Bracket Pair Colorizer

該插件可以為你把成對的括號做顏色區(qū)分，并且提供一根連接線。方便我們審閱代碼結(jié)構(gòu)。 通過修改配置文件，使得結(jié)構(gòu)線高亮，食用更佳

"workbench.colorCustomizations":?{
??"editorIndentGuide.activeBackground":?"#00ffea"
},

CSS Peek

css 樣式查看器，可快速查看我們的 css 樣式，非常方便快捷

Npm Intellisense

可自動完成導(dǎo)入語句中的 npm 模塊

open in browser

快速打開html文件到瀏覽器預(yù)覽

vscode-icons

提供了非常漂亮的目錄樹圖標(biāo)主題

Auto Close Tag

自動閉合HTML/XML標(biāo)簽

Path Intellisense

自動提示文件路徑，支持各種快速引入文件

Image preview

鼠標(biāo)懸浮在鏈接上可及時預(yù)覽圖片

Beautify

在代碼文件右鍵鼠標(biāo)一鍵格式化 html,js,css

JavaScript (ES6) code snippets

ES6 語法智能提示，以及快速輸入

Vetur

VScode官方欽定 Vue 插件，Vue開發(fā)者必備。內(nèi)含語法高亮，智能提示，emmet，錯誤提示，格式化，自動補(bǔ)全，debugger等實(shí)用功能

代碼風(fēng)格規(guī)范類插件

ESlint

規(guī)范 js 代碼書寫規(guī)則，如果覺得太過嚴(yán)謹(jǐn)，可自定義規(guī)則

TSLint

ts 的書寫規(guī)范，這個插件是一個系列，同時還提供了TSLint (deprecated)，TSLint Vue，TSLint Vue-TSX

Code Spell Checker

是拼寫檢查程序，檢查不常見的單詞，如果單詞拼寫錯誤，會給出警告提示

koroFileHeader

在vscode中用于生成文件頭部注釋和函數(shù)注釋的插件，經(jīng)過多版迭代后，插件：支持所有主流語言, 功能強(qiáng)大，靈活方便，文檔齊全，食用簡單！

不光如此，還能生成一些特別有意思的注釋，比如這一條噴火龍...

Better Align

代碼書寫的整潔，工整往往是衡量一個程序員素養(yǎng)的標(biāo)準(zhǔn)，這款插件可以讓你的代碼更排版優(yōu)雅

選中代碼配合組合鍵[Ctrl+Shift+p]，輸入Align即可 、

change-case

通常我們對一個變量的命名可能是駝峰，可能是全大寫，又或是下劃線，這里可通過這個插件解決變量命名規(guī)范的問題

選中變量配合組合鍵[Ctrl+Shift+p]，輸入對應(yīng)格式即可

extension.changeCase.commands：列出所有“更改案例”命令，如果僅選擇一個單詞，則帶有預(yù)覽
extension.changeCase.camel：更改大小寫'camel'：轉(zhuǎn)換為字符串，并用下一個字母大寫表示分隔符
extension.changeCase.constant：更改大小寫“常量”：轉(zhuǎn)換為大寫字母，下劃線分隔字符串
extension.changeCase.dot：更改大小寫的“點(diǎn)”：轉(zhuǎn)換為小寫，句點(diǎn)分隔的字符串
extension.changeCase.kebab：更改大小寫“ kebab”：轉(zhuǎn)換為小寫字母，用破折號分隔的字符串（參數(shù)名的別名）
extension.changeCase.lower：更改大小寫為“小寫”：轉(zhuǎn)換為小寫的字符串
extension.changeCase.lowerFirst：更改大小寫“ lowerFirst”：轉(zhuǎn)換為首字母小寫的字符串
extension.changeCase.no：轉(zhuǎn)換沒有任何大小寫的字符串（小寫字母，空格分隔）
extension.changeCase.param：更改大小寫為'param'：轉(zhuǎn)換為小寫字母，用破折號分隔的字符串
extension.changeCase.pascal：更改大小寫“ pascal”：轉(zhuǎn)換為以與camelCase相同的方式表示的字符串，但首字母也大寫
extension.changeCase.path：更改大小寫的“路徑”：轉(zhuǎn)換為小寫，用斜杠分隔的字符串
extension.changeCase.sentence：更改大小寫的“句子”：轉(zhuǎn)換為小寫的空格分隔的字符串
extension.changeCase.snake：更改大小寫“ snake”：轉(zhuǎn)換為小寫字母，下劃線分隔字符串
extension.changeCase.swap：更改大小寫“交換”：轉(zhuǎn)換為每個大小寫相反的字符串
extension.changeCase.title：更改大小寫“標(biāo)題”：轉(zhuǎn)換為以空格分隔的字符串，每個單詞的第一個字符均大寫
extension.changeCase.upper：更改大小寫為大寫：轉(zhuǎn)換為大寫字符串
extension.changeCase.upperFirst：更改大小寫為“ upperFirst”：轉(zhuǎn)換為首字母大寫的字符串

Better Comments

這款插件可以豐富注釋顏色，讓注釋也具有生命力，如需自定義樣式，需要寫入配置代碼

配置代碼
"better-comments.tags":?[
??{
????"tag":?"*",
????"color":?"#98C379",
????"strikethrough":?false,
????"backgroundColor":?"transparent"
??}
]
使用
//?*?綠色的高亮注釋

TODO Tree

我們經(jīng)常會在代碼中使用TODO來標(biāo)記我們的代碼，提高可讀性，TODO Tree這款插件提供了可視化窗口來查看和管理我們的TODO Tree

GitLens

GitLens可以幫助您更好地理解代碼。快速查看更改行或代碼塊的對象，功能強(qiáng)大，功能豐富且高度可定制，可以滿足您的需求

GitHistory

GitHistory可查看和搜索 git 日志以及圖形和詳細(xì)信息，同時還支持分支比較，分支管理等操作，非常方便

其他插件（神器）

Partial Diff

文件比較是一個很常見的場景，如果光憑我們?nèi)庋鄯謩e的話，累人不說還容易出錯。Partial Diff的出現(xiàn)就正好解決了這個問題

Markdown All in One

這款神器可以讓我們在vscode里面快樂的書寫Markdown，功能強(qiáng)大。提供了豐富的快捷鍵，可邊寫邊看，輕松轉(zhuǎn)化為html或pdf文件，十分好用，強(qiáng)烈推薦

vscode-drawio

這款神器可以讓我們在vscode里面快樂的畫流程圖。新建 .drawio 后綴文件并拖入 vscode 中, 即可得到如下界面?

Polacode-2020

這款神器可以將我們的代碼轉(zhuǎn)化成一張逼格滿滿的圖片，在寫文章或者代碼分享的時候。拋出一張這樣的圖片，可比隨手截圖體面多了

REST Client

這款神器可以讓我們在vscode里面進(jìn)行接口調(diào)試，提供豐富的 api 配置方式，讓我們不用離開編輯器也可以隨時調(diào)用接口調(diào)試

新建一個.http文件，寫下基本的測試代碼，點(diǎn)擊 Send Request即可在右邊窗口查看接口返回結(jié)果，非常 nice，強(qiáng)烈推薦

更多的使用配置，可查看官方文檔[](https://marketplace.visualstudio.com/items?item>傳送門

[

Browser Preview

這款神器可以讓我們在vscode里面打開瀏覽器，一邊編碼一邊查看，偶爾也可以用來摸魚，非常人性，強(qiáng)烈推薦

JavaScript Booster

這款神器可以在我們代碼寫的不規(guī)范或者有待調(diào)整的地方，在光標(biāo)聚焦后，會有一個小燈泡。會提示對應(yīng)的不合理原因和改進(jìn)方案。極大的提高了我們的代碼優(yōu)雅度，強(qiáng)烈推薦

讓您的生活更輕松，使用代碼操作為您執(zhí)行重復(fù)性任務(wù)！他們可以提供很多幫助，只需跟隨燈泡?！

當(dāng)在JavaScript（或TypeScript / Flow）中編輯代碼時，此VS Code擴(kuò)展提供了各種代碼操作（快速修復(fù)）。只需注意左側(cè)的燈泡，然后按一下它即可了解如何在光標(biāo)下轉(zhuǎn)換代碼。

Settings Sync

這款神器可以讓我們的vscode配置同步到云端，當(dāng)我們跟換電腦或者再次安裝vscode的時候，只需要登錄賬號即可同步配置了，而不用再次從頭開始。簡直不要太香了，強(qiáng)烈推薦

Live Share

這款神器可以使您能夠與他人實(shí)時進(jìn)行協(xié)作式編輯和調(diào)試，無論您使用的是哪種編程語言或正在構(gòu)建的應(yīng)用程序類型。什么意思呢？就是可以多人同時編輯一份代碼，差不多有點(diǎn)代碼共享的意思。不得不說，這款神器就太了不起了，強(qiáng)烈強(qiáng)烈強(qiáng)烈推薦，

搬用官網(wǎng)上的描述

Visual Studio Live Share使您能夠與他人實(shí)時進(jìn)行協(xié)作式編輯和調(diào)試，無論您使用的是哪種編程語言或正在構(gòu)建的應(yīng)用程序類型。它使您可以立即（安全地）共享當(dāng)前項(xiàng)目，然后根據(jù)需要共享調(diào)試會話，終端實(shí)例，localhost Web應(yīng)用程序，語音呼叫等！加入您的會話的開發(fā)人員會從您的環(huán)境（例如語言服務(wù)，調(diào)試）中獲得所有編輯器上下文，從而確保他們可以立即開始進(jìn)行高效的協(xié)作，而無需克隆任何存儲庫或安裝任何SDK。

另外，與傳統(tǒng)的成對編程不同，Visual Studio Live Share使開發(fā)人員可以一起工作，同時保留其個人編輯器的首選項(xiàng)（例如主題，鍵綁定）以及自己的光標(biāo)。這樣，您就可以在彼此之間無縫過渡，并能夠自己探索想法 / 任務(wù)。在實(shí)踐中，這種能力一起工作，并獨(dú)立地提供了一個合作的經(jīng)驗(yàn)，是可能有更多的自然常見的用例。

好了，這就是我為大家推薦的 33 款vscode插件了，希望大家喜歡。另外就是最近疫情又嚴(yán)重起來了，望各位小伙伴健健康康，帶好口罩，我們一起順順利利的度過這個艱難的 2020，加油！加油！

撒花、撒花 ????????

點(diǎn)贊?再看，已成習(xí)慣！該系列持續(xù)更新，你們的一鍵三連就是我持續(xù)寫作的最大動力，如果對本篇博客有任何意見和建議，歡迎師兄們留言！歡迎來擾！??

關(guān)注數(shù)：10億+?文章數(shù)：10億+
粉絲量：10億+?點(diǎn)擊量：10億+
?

---

懸賞博主專區(qū)請掃描這里

喜愛數(shù)：?1億+?發(fā)帖數(shù)：?1億+
回帖數(shù)：?1億+?結(jié)貼率：?99.9%

—————END—————

喜歡本文的朋友，歡迎關(guān)注公眾號?程序員哆啦A夢，收看更多精彩內(nèi)容

點(diǎn)個[在看]，是對小達(dá)最大的支持！

如果覺得這篇文章還不錯，來個【分享、點(diǎn)贊、在看】三連吧，讓更多的人也看到~