33 個(gè)提高前端工作效率的 VSCode 實(shí)用插件

轉(zhuǎn)自：秦愛德

juejin.cn/post/6908497610311467021

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

咱們也不能一天天光摸魚，還是得干點(diǎn)正事。

特此，我整理了一些好用的vscode插件，如果覺得不錯(cuò)，歡迎一鍵三連，你們的點(diǎn)贊，就是我持續(xù)寫文最大的動(dòng)力??????

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

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

基礎(chǔ)通用插件

Chinese

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

Auto Rename Tag

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

HTML Snippets

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

Bracket Pair Colorizer

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

"workbench.colorCustomizations": {
  "editorIndentGuide.activeBackground": "#00ffea"
},
復(fù)制代碼

CSS Peek

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

Npm Intellisense

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

open in browser

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

vscode-icons

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

Auto Close Tag

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

Path Intellisense

自動(dòng)提示文件路徑，支持各種快速引入文件

Image preview

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

Beautify

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

JavaScript (ES6) code snippets

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

Vetur

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

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

ESlint

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

TSLint

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

Code Spell Checker

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

koroFileHeader

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

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

Better Align

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

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

change-case

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

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

extension.changeCase.commands：列出所有“更改案例”命令，如果僅選擇一個(gè)單詞，則帶有預(yù)覽
extension.changeCase.camel：更改大小寫'camel'：轉(zhuǎn)換為字符串，并用下一個(gè)字母大寫表示分隔符
extension.changeCase.constant：更改大小寫“常量”：轉(zhuǎn)換為大寫字母，下劃線分隔字符串
extension.changeCase.dot：更改大小寫的“點(diǎn)”：轉(zhuǎn)換為小寫，句點(diǎn)分隔的字符串
extension.changeCase.kebab：更改大小寫“ kebab”：轉(zhuǎn)換為小寫字母，用破折號(hào)分隔的字符串（參數(shù)名的別名）
extension.changeCase.lower：更改大小寫為“小寫”：轉(zhuǎn)換為小寫的字符串
extension.changeCase.lowerFirst：更改大小寫“ lowerFirst”：轉(zhuǎn)換為首字母小寫的字符串
extension.changeCase.no：轉(zhuǎn)換沒有任何大小寫的字符串（小寫字母，空格分隔）
extension.changeCase.param：更改大小寫為'param'：轉(zhuǎn)換為小寫字母，用破折號(hào)分隔的字符串
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)換為每個(gè)大小寫相反的字符串
extension.changeCase.title：更改大小寫“標(biāo)題”：轉(zhuǎn)換為以空格分隔的字符串，每個(gè)單詞的第一個(gè)字符均大寫
extension.changeCase.upper：更改大小寫為大寫：轉(zhuǎn)換為大寫字符串
extension.changeCase.upperFirst：更改大小寫為“ upperFirst”：轉(zhuǎn)換為首字母大寫的字符串
復(fù)制代碼

Better Comments

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

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

TODO Tree

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

GitLens

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

GitHistory

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

其他插件（神器）

Partial Diff

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

這款神器可以讓我們?cè)?code style="margin: 0px 2px;padding: 2px 4px;max-width: 100%;box-sizing: border-box !important;overflow-wrap: break-word;font-size: 14px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;border-radius: 4px;color: rgb(233, 105, 0);background: rgb(248, 248, 248);">vscode里面快樂的書寫Markdown，功能強(qiáng)大。提供了豐富的快捷鍵，可邊寫邊看，輕松轉(zhuǎn)化為html或pdf文件，十分好用，強(qiáng)烈推薦

vscode-drawio

這款神器可以讓我們?cè)?code style="margin: 0px 2px;padding: 2px 4px;max-width: 100%;box-sizing: border-box !important;overflow-wrap: break-word;font-size: 14px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;border-radius: 4px;color: rgb(233, 105, 0);background: rgb(248, 248, 248);">vscode里面快樂的畫流程圖。新建 .drawio 后綴文件并拖入vscode中, 即可得到如下界面??

Polacode-2020

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

REST Client

這款神器可以讓我們?cè)?code style="margin: 0px 2px;padding: 2px 4px;max-width: 100%;box-sizing: border-box !important;overflow-wrap: break-word;font-size: 14px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;border-radius: 4px;color: rgb(233, 105, 0);background: rgb(248, 248, 248);">vscode里面進(jìn)行接口調(diào)試，提供豐富的api配置方式，讓我們不用離開編輯器也可以隨時(shí)調(diào)用接口調(diào)試

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

更多的使用配置，可查看官方文檔傳送門

Browser Preview

這款神器可以讓我們?cè)?code style="margin: 0px 2px;padding: 2px 4px;max-width: 100%;box-sizing: border-box !important;overflow-wrap: break-word;font-size: 14px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;border-radius: 4px;color: rgb(233, 105, 0);background: rgb(248, 248, 248);">vscode里面打開瀏覽器，一邊編碼一邊查看，偶爾也可以用來摸魚，非常人性，強(qiáng)烈推薦

JavaScript Booster

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

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

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

Settings Sync

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

Live Share

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

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

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

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

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

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