Visual Studio Code 是由微軟開發(fā)的一款免費(fèi)的，跨平臺文本編輯器。由于其出色的性能表現(xiàn)和豐富的功能，它很快成為了開發(fā)者的最愛。

與大多數(shù) IDE 一樣，VSCode 也有一個(gè)擴(kuò)展市場，包含數(shù)千個(gè)具有不同功能的插件。為了幫助您挑選值得下載的東西，我們收集了這些最有用和最有趣的擴(kuò)展。

在瀏覽器中打開或預(yù)覽 – Open-In-Browser

VSCode 不能通過內(nèi)置界面來直接在瀏覽器中打開文件。此擴(kuò)展將添加一個(gè) [Open With Default Browser] 選項(xiàng)到右鍵菜單，使您在客戶端(Firefox，Chrome，IE)中打開命令面板選項(xiàng)。

代碼調(diào)試 – Quokka

Quokka 是一個(gè)調(diào)試工具，可以為您正在編寫的代碼提供實(shí)時(shí)反饋。它能夠預(yù)覽變量的函數(shù)和計(jì)算值結(jié)果。該擴(kuò)展易于配置，對于使用 JSX 或 TypeScript 的項(xiàng)目可直接使用。

Faker

使用流行的 Faker JavaScript 庫快速插入占位符數(shù)據(jù)。您可以生成隨機(jī)的名稱，地址，圖像，電話號碼或經(jīng)典的亂數(shù)假文段落。每個(gè)類別都有各種子類別，因此您可以隨心所欲的使用這些數(shù)據(jù)。

項(xiàng)目地址：Faker

跳轉(zhuǎn)到 CSS 定義行 – CSS Peek

通過此擴(kuò)展，您可以跟蹤樣式表中 CSS 類和 id 的樣式。當(dāng)您右鍵單擊 HTML 文件中的選擇器時(shí)，選擇“Go to Definition”和“Peek”將會(huì)直接帶您跳轉(zhuǎn)到相對應(yīng)的 CSS 代碼。

HTML 模板 – HTML Boilerplate

HTML 模板擴(kuò)展將不必手動(dòng)寫入新的 HTML 文檔的 head 和 body 標(biāo)簽。只需在空文件中輸入 html ，按 Tab 鍵即可生成干凈的文檔結(jié)構(gòu)。

格式化代碼 代碼美化 – Prettier

Prettier 是現(xiàn)在 Web 開發(fā)中最流行的代碼格式化程序。它允許您的團(tuán)隊(duì)保持整齊統(tǒng)一的代碼結(jié)構(gòu)。此擴(kuò)展可以自動(dòng)應(yīng)用 Prettier 并快速格式化整個(gè) JS 和 CSS 文檔。

顏色信息及轉(zhuǎn)換 – Color Info

一個(gè)輕量級的小插件，將為你提供有關(guān) CSS 中使用的顏色的各種信息。通過將鼠標(biāo)懸停在顏色代碼處，就可以看到顏色的預(yù)覽，以及有關(guān)其轉(zhuǎn)換為所有格式(hex，rgb，hsl和cmyk)的信息。

SVG 預(yù)覽 – SVG Viewer

此插件是一款可以在 Visual Studio Code 中查看 SVG 的實(shí)用程序。它可以渲染 SVG 文件，查看預(yù)覽而無需離開編輯器。同時(shí)，它還包含了用于轉(zhuǎn)換為 PNG 格式和生成數(shù)據(jù) URI 模式的選項(xiàng)。

TODO 高亮 – TODO Highlight

此工具可以在你的代碼中的標(biāo)記出所有的 TODO 注釋，以便在推送到生產(chǎn)環(huán)境之前輕松跟蹤任何未完成的業(yè)務(wù)。默認(rèn)情況下，它會(huì)查找 TODO 和 FIXME 關(guān)鍵字，當(dāng)然，您也可以添加自定義表達(dá)式。

圖標(biāo)字體 – Icon Fonts

這是一個(gè)能夠在您的項(xiàng)目(或從CDN)中添加圖標(biāo)字體的插件，并且自動(dòng)對圖標(biāo)本身的類名進(jìn)行提示。該擴(kuò)展支持超過20個(gè)流行的圖標(biāo)集，包括 Font Awesome ，Ionicons ， Glyphicons 和 Material Design Icons 。

代碼壓縮 – Minify

用于壓縮代碼的擴(kuò)展。它提供了大量的自定義設(shè)置和自動(dòng)壓縮保存并導(dǎo)出到 .min 文件的選項(xiàng)。 Minify 分別通過 uglify-js ，clean-css 和 html-minifier 對 JavaScript ，CSS 和 HTML 進(jìn)行壓縮。

命名格式轉(zhuǎn)換 – Change Case

此插件用來轉(zhuǎn)換文本。可直接使用，只能進(jìn)行小寫和大寫轉(zhuǎn)換。此插件添加了更多用于修改字符串的命令，包括 camelCase(駱駝拼命名)，kebab-case(中劃線命名)，snake_case(下劃線命名)， CONST_CASE(大寫命名)等。

正則表達(dá)式預(yù)覽 – Regex Previewer

用于實(shí)時(shí)測試正則表達(dá)式的實(shí)用工具。它通過將正則表達(dá)式模式應(yīng)用于任何打開的文本文件，突出顯示所有匹配項(xiàng)。

語言和框架 – Language and Framework Packs

VSCode 支持大量語言。如果您使用的編程語言不包括在內(nèi)，那么您可以下載這個(gè)擴(kuò)展包，它將添加自動(dòng)填充，適當(dāng)?shù)目s進(jìn)和其他實(shí)用功能。還有對 Web 前端框架，如 react native 和 vue 的語言包支持。

主題及配色方案 – Themes

當(dāng)然，所有擴(kuò)展中最重要的是主題。你每天都在看你的 VSCode 編輯器，為什么不讓它變得更漂亮呢？有許多定制插件可以改變顏色方案和側(cè)邊欄中的圖標(biāo)。以下是我們的一些最愛：

Visual Studio Code 相關(guān)熱文

總結(jié)

以上是生活随笔為你收集整理的vscode智能提示css的插件_Visual Studio Code 必备插件，主题及语法提示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。