VSCode前端必備插件2022版（持續(xù)更新）

VSCode作為我們前端主流的開發(fā)工具，優(yōu)勢(shì)自然在于它的擴(kuò)展插件，可以有效地提高開發(fā)效率和團(tuán)隊(duì)協(xié)作，本文提高的都是UP主親測(cè)，最底下貼入我的vscode設(shè)置，如果有發(fā)現(xiàn)不錯(cuò)的插件，小伙伴們也可以私信UP主，覺得UP主推薦的不錯(cuò)的小伙伴們，請(qǐng)多多支持！話不多說直接上。

1.Chinese (Simplified) (簡(jiǎn)體中文) Language Pack for Visual Studio Code（必備）

? VSCode漢化版必備，對(duì)于我這種只認(rèn)識(shí)21個(gè)英文字母的渣渣來說，是很需要，安裝后重啟即可。

2.GitLens — Git supercharged（必備）

? 這個(gè)就不多說了吧，git 功能增強(qiáng)插件，鼠標(biāo)放到代碼行上，每一行代碼的變動(dòng)都一清二楚~上班必備Git。安裝后左邊的側(cè)邊欄會(huì)出現(xiàn)Gitlens的小標(biāo)標(biāo)，點(diǎn)擊就可以使用啦，還是很方便的。

3.Path Intellisense (必備)

? 自動(dòng)提示文件路徑，支持各種快速引入文件，就引入圖片和文件的時(shí)候，還要看路徑和文件名，是非常耗時(shí)的，這個(gè)至少省掉你大部分時(shí)間，珍愛生命遠(yuǎn)離浪費(fèi)。安裝即用。

4.Import Cost 和 filesize（必備）

? Import Cost 是編譯的時(shí)候就能看到引入的文件大小，filesize是查看當(dāng)前文件的大小，這東西還有個(gè)好處就是，如果沒有顯示大小，說明你可能沒引入成功。安裝即可。

5.Markdown Preview Enhanced （必備）

? 實(shí)時(shí)預(yù)覽markdown，markdown使用者必備，沒辦法，對(duì)吧。安裝即可。

6.Live Server（必備）

? 在線部署調(diào)試的工具，相當(dāng)于模擬了一個(gè)服務(wù)器啟動(dòng)，對(duì)于不太懂服務(wù)器部署的童鞋來說，初期還是比較方便的。

7.Auto Import、Auto Close Tag、Auto Rename Tag（必備）

? 標(biāo)簽自動(dòng)化三劍客，Auto Import可以根據(jù)你引入的組件，自動(dòng)導(dǎo)入提示；Auto Rename Tag當(dāng)你修改標(biāo)簽的時(shí)候，自動(dòng)完成另一側(cè)標(biāo)簽的同步修改；Auto Close Tag 自動(dòng)閉合HTML/XML標(biāo)簽，誰用誰知道。安裝即可。

8.Code Spell Checker （必備）

? 英語跟我一樣水平不太行的童鞋，可一定要有這個(gè)呀，可以檢驗(yàn)?zāi)愕挠⒄Z命名，并且給你推薦你可能需要的英語命名，不錯(cuò)不錯(cuò)。安裝即可。

9.Color Highlight 和 Color Picker（必備）

? 雖然我只記得#000和#fff是什么顏色，但是Color Highlight 可以讓我直接看到#ffffff是什么顏色，而Color Picker可以讓我通過顏色版去選擇顏色，好用實(shí)在。安裝即可。

10.koroFileHeader（推薦）

? 作為一名開發(fā)人員，我們喜歡在自己的代碼上加入一些作者的標(biāo)簽，而這東西就很不錯(cuò)，童鞋們可以試試，內(nèi)置提供了很多模板，比如佛主啊之類的。安裝后需要一些配置。

11.EditorConfig for VS Code（推薦）

? 代碼格式化，可以讓我們的代碼看起來更整潔，可讀性會(huì)更高點(diǎn)，支持引入。需要一定的配置。

12.CSS Peek（必備）

? 呵，我想你經(jīng)常寫著寫著，忘記自己命名的css定義了什么樣式吧，這東西，ctrl+鼠標(biāo)移入上去，就可以看到自己寫了什么css代碼，是不是很方便！安裝即可。

13.Prettier - Code formatter（必備）

? 2千多萬的下載量，證明了這東西的需求，格式化代碼，一個(gè)團(tuán)隊(duì)就要有一個(gè)整齊的步伐。需要一定的配置。

14.Eslint （必備）

? 這東西一開始差點(diǎn)弄死我，但是配置好了是真香，校驗(yàn)我們的代碼規(guī)范，是一件很重要的事情，減少我們的測(cè)試工作量！需要一定的配置。

15.HTML CSS Support、HTML Snippets、JavaScript (ES6) code snippets （必備）

? 前端三劍客，HTML CSS Support 智能提示CSS類名以及id；HTML Snippets 智能提示HTML標(biāo)簽，以及標(biāo)簽含義；JavaScript (ES6) code snippets ES6語法智能提示，以及快速輸入，不僅僅支持.js，還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各種包含js代碼文件的時(shí)間。你不要也得給我裝！安裝即可。

16.UnoCSS、WindiCSS IntelliSense、Tailwind CSS IntelliSense（推薦）

17.Stylelint、TSLint（推薦）

? 顧名思義，跟eslint差不多，Stylelint是css規(guī)范，TSLint是TypeScript規(guī)范。有需求再用，需要一定配置。

18.Material Icon Theme、vscode-icons（推薦）

? 比較出名的2個(gè)文件圖標(biāo)主題，沒錯(cuò)，就是這么低俗，連文件圖標(biāo)都要有個(gè)性！安裝即可，可自行選擇類型。

19.Ayu（推薦）

? 編譯器主題很多，但是我喜歡這個(gè)白的，由于主題太多，就只推薦個(gè)人喜歡的。安裝即可，可選擇主題類型。

20.px to rem & rpx & vw (cssrem)（必備）

? 一個(gè)可以告訴你1px等于多少rem的工具，所以你懂的。安裝即可。

21.IntelliSense for CSS class names in HTML（必備）

? 我們有時(shí)候經(jīng)常會(huì)忘記取的class名字是啥，但是他可以解決你的問題。安裝即可。

22.IntelliCode（必備）

? 微軟推出的一款代碼智能提示插件，和別的插件不同的是，采用的是 AI 技術(shù)，吸收了 github 上成千上萬的優(yōu)秀代碼，還會(huì)結(jié)合你日常的編碼習(xí)慣不斷學(xué)習(xí)進(jìn)化。

23.CodeMaid（推薦）

? 一個(gè)很有趣的東西，最近才發(fā)現(xiàn)，可以很方便地去整理我們的代碼結(jié)構(gòu)。

23.Vite、Vue Language Features (Volar)、TypeScript Vue Plugin (Volar)、Vue VSCode Snippets（Vue必備）

? vue3的高亮和提示插件，和vue的vetur會(huì)沖突

24.React/Redux/react-router Snippets (React必備)

react的高亮和提示插件文章來源地址http://www.zghlxwxcb.cn/news/detail-425379.html

感謝大家看完整篇，整理不易，有什么不對(duì)的歡迎指點(diǎn)，不定時(shí)更新，盡量節(jié)省大家到處找好插件的時(shí)間。

到了這里，關(guān)于VSCode前端必備插件2022版（持續(xù)更新）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！