一、使用vscode插件干什么？

vscode插件是為了更高效的代碼開發(fā)，為了美觀的代碼格式。

下面推薦一些好用的插件

1.簡(jiǎn)體中文語(yǔ)言包

插件名稱：Chinese (Simplified) (簡(jiǎn)體中文) Language Pack for Visual Studio Code
作用：將VSCode操作界面轉(zhuǎn)換為中文，安裝完成，重啟VScode即可

2.顯示文件圖標(biāo)

插件名稱：vscode-icons
作用：vscode中的文件管理的樹目錄顯示圖標(biāo)

3.Live Server 開啟本地服務(wù)器

插件名稱：Live Server
作用：開啟一個(gè)具有實(shí)時(shí)重新加載功能的小型開發(fā)服務(wù)器，可以一邊編寫代碼一邊保存，即實(shí)時(shí)刷新預(yù)覽

4.自動(dòng)修改標(biāo)簽對(duì)名稱

插件名稱：Auto Rename Tag
作用：修改標(biāo)簽，自動(dòng)幫你完成頭部和尾部閉合標(biāo)簽的同步修改

5.將代碼生成一張圖片

插件名稱：carbon-now-sh
作用：在實(shí)際開發(fā)中遇到技術(shù)問(wèn)題或者做部分代碼片段分享，可以使用該插件將代碼生成一張圖片
1.在VSCode中，先選中需要生成圖片的代碼
2.打開命令托盤：Windows：Ctrl + Shift + P，Mac：Cmd + Shift + P
輸入Carbon，回車
3.再打開的網(wǎng)頁(yè)中，復(fù)制粘貼即可

6.prettier 格式化代碼

插件名稱：prettier
作用：格式化美化代碼 ，按Ctrl + s 保存會(huì)自動(dòng)格式化

7.自動(dòng)補(bǔ)全標(biāo)簽

插件名稱：Auto Close Tag
作用：自動(dòng)補(bǔ)全結(jié)束標(biāo)簽

8.Beautify 格式化

插件名稱：Beautify
作用： 可格式化css,js,less代碼

9.Code Spell Checker 拼寫檢測(cè)

插件名稱：Code Spell Checker
作用：幫助我們發(fā)現(xiàn)代碼中拼寫錯(cuò)誤的單詞

10.HTML Snippets

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

11.Path Intellisense 路徑提示

插件名稱：Path Intellisense
作用：自動(dòng)提示文件路徑，支持各種快速引入文件

12.Image preview 圖片預(yù)覽

插件名稱：Image preview
作用：鼠標(biāo)懸浮在鏈接上可及時(shí)預(yù)覽圖片

13.JavaScript (ES6) code snippets

插件名稱：JavaScript (ES6) code snippets
作用：ES6語(yǔ)法智能提示，以及快速輸入

14.TSLint

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

15.koroFileHeader

插件名稱：koroFileHeader
作用：用于生成文件頭部注釋和函數(shù)注釋的插件

16.GitLens

插件名稱：GitLens
作用：能顯示每一行代碼的作者以及提交時(shí)間。

17.GitHistory

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

18.Partial Diff 文件比較

插件名稱：Partial Diff
作用：將文件進(jìn)行對(duì)比

19.Polacode-2020(類似第五個(gè)插件)

插件名稱：Polacode-2020
作用：代碼轉(zhuǎn)化成圖片
1.在VSCode中，先選中需要生成圖片的代碼
2.打開命令托盤：Windows：Ctrl + Shift + P 輸入polacode

20.browser preview 內(nèi)置瀏覽器

插件名稱：browser preview
作用：可以讓我們?cè)趘scode里面打開瀏覽器，一邊編碼一邊查看

21.Settings Sync

插件名稱：Settings Sync
作用：可以讓我們的vscode配置同步到云端，當(dāng)我們跟換電腦或者再次安裝vscode的時(shí)候，只需要登錄賬號(hào)即可同步配置了

22.Vetur

插件名稱：Vetur
作用：Vetur是一款Vue代碼高亮顯示的一款插件

23.Vue 3 Snippets

插件名稱：Vue 3 Snippets
作用：這是一款在 Vue 2 或者 Vue 3 開發(fā)中提供代碼片段，語(yǔ)法高亮和格式化的 VS Code 插件，能極大提高你的開發(fā)效率。

24.Rainbow Brackets

插件名稱：Rainbow Brackets
作用：不同顏色的括號(hào)插件

25.HTML CSS Support

插件名稱：HTML CSS Support
作用：在編寫樣式表的時(shí)候，自動(dòng)補(bǔ)全功能大大縮減了編寫時(shí)間

26.Highlight Matching Tag

插件名稱：Highlight Matching Tag
作用：html標(biāo)簽對(duì)齊高亮

27.px to rem & rpx (cssrem)

插件名稱：px to rem & rpx (cssrem)
作用：px轉(zhuǎn)rem插件
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-435197.html

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