本篇文章給大家介紹一下vscode中有用的插件。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

Python

提供了代碼分析，高亮，規(guī)范化等很多基本功能

vscode-icons

各種漂亮圖標(biāo)

點(diǎn)擊這里設(shè)置圖標(biāo)

然后選vscode-icons

filesize

左下角顯示文件大小的插件

Bracket Pair Colorizer

成對(duì)的彩色括號(hào)

Settings Sync

可以同步 VS Code設(shè)置同步到 GitHub 賬號(hào)，包括 setting 文件和插件設(shè)置等等，重新配置VS Code的時(shí)候只需同步一下即可。安裝完成后，只需要新增一個(gè)Github token，添加后，剩下的根據(jù)個(gè)人喜好進(jìn)行配置，其他的插件自動(dòng)幫你完成。

這里需要說(shuō)一下的是很多不負(fù)責(zé)任的博文在選擇 token權(quán)限的時(shí)候說(shuō)讓全選，其實(shí)是很危險(xiǎn)的行為。我一開(kāi)始也感覺(jué)哪里怪怪的，因?yàn)橐惭b的插件很多，也沒(méi)有太細(xì)究，直到我需要在另一臺(tái)電腦上同步VS Code 設(shè)置的時(shí)候，點(diǎn)開(kāi)了 Setting Sync 的官網(wǎng)看了看才發(fā)現(xiàn)，哪里需要那么多權(quán)限，只需要一個(gè)權(quán)限就好。如下圖

Atom-Material
一款安卓風(fēng)的顏色主題，推薦使用推薦的字體設(shè)置。

"editor.fontSize": 16, "editor.fontWeight": "400", "editor.lineHeight": 24, "editor.letterSpacing": 0.5

推薦設(shè)置的顯示效果

Path Autocomplete

自動(dòng)感知目錄下的文件，自己選擇就好。

注意： VSCode本身也支持路徑的感知，需要配置好用系統(tǒng)自帶的還是用這個(gè)插件，否則，每個(gè)路徑下的條目都會(huì)有兩份。

8. Import Cost

在行尾顯示導(dǎo)入的包的大小

這個(gè)好像只支持JavaScript。

Indent-Rainbow

帶顏色的縮進(jìn)

縮進(jìn)效果

GitLens

能顯示每一行代碼的作者以及提交時(shí)間。

效果

Git history

Git 歷史

Color Highlight

直觀(guān)顯示在 css/web 中定義的顏色

Quokka.js

實(shí)時(shí)執(zhí)行 JavaScript 代碼(做快速的 demo 很有用)

Code Runner

立刻運(yùn)行代碼

Vetur

Vue 工具插件

Live server

實(shí)時(shí)顯示網(wǎng)頁(yè)情況

Python indent

自動(dòng)糾正 Python 縮進(jìn)

vscode-fileheader

頭部注釋添加/更新插件

TODO Highlight

高亮顯示備注中的 TODO 事項(xiàng)，推薦配合 第19個(gè)插件， Todo Tree 使用

Todo Tree

點(diǎn)擊左側(cè)欄“樹(shù)”的logo，顯示 TODOList 條目，點(diǎn)擊相應(yīng)的條目，可以打開(kāi)文件并定位到 TODO 行。

Auto Close Tag

自動(dòng)寫(xiě)關(guān)閉標(biāo)簽的插件

Auto Rename Tag

自動(dòng)重命名關(guān)閉標(biāo)簽

Polacode

代碼段生成圖片

Guides

比 VS Code自帶的更好的參考線(xiàn)，可自定義

Color Info

顯示css中的顏色屬性信息

Regex Previewer

正則結(jié)果預(yù)覽插件

Mithril Emmet

注意：其實(shí)vscode 內(nèi)置了Emmet插件
高效編寫(xiě) HTML、CSS 代碼的插件，能快速輸入大部分內(nèi)容

比如，在編輯 HTML 文件時(shí)，輸入tr*2>td*3，然后回車(chē)，就能快速生成一個(gè)兩行三列的表格標(biāo)簽。

推薦學(xué)習(xí)：《vscode教程》