1.Auto Close Tag
自動閉合HTML/XML標(biāo)簽
2.Auto Rename Tag
自動完成另一側(cè)標(biāo)簽的同步修改
3.Beautify
格式化代碼晴楔，值得注意的是赴恨，beautify插件支持自定義格式化代碼規(guī)則
4.Bracket Pair Colorizer
給括號加上不同的顏色拖叙，便于區(qū)分不同的區(qū)塊筷畦，使用者可以定義不同括號類型和不同顏色
5.Debugger for Chrome
映射vscode上的斷點(diǎn)到chrome上，方便調(diào)試
6.Courier New
一款好看字體
7.GitLens
方便查看git日志，git重度使用者必備
8.HTML CSS Support
智能提示CSS類名以及id
9.HTML Snippets
智能提示HTML標(biāo)簽廊驼，以及標(biāo)簽含義
10.JavaScript(ES6) code snippets
ES6語法智能提示郑临，以及快速輸入栖博，不僅僅支持.js，還支持.ts厢洞，.jsx仇让，.tsx，.html躺翻，.vue丧叽，省去了配置其支持各種包含js代碼文件的時間
11.jQuery Code Snippets
jQuery代碼智能提示
12.Markdown Preview Enhanced
實(shí)時預(yù)覽markdown，markdown使用者必備
13.markdownlint
markdown語法糾錯
14.Material Icon Theme
個人認(rèn)為最好的vscode圖標(biāo)主題公你，支持更換不同色系的圖標(biāo)踊淳，值得點(diǎn)出的是，該插件更新極其頻繁陕靠，基本和vscode更新頻率保持一致
15.open in browser
vscode不像IDE一樣能夠直接在瀏覽器中打開html迂尝，而該插件支持快捷鍵與鼠標(biāo)右鍵快速在瀏覽器中打開html文件，支持自定義打開指定的瀏覽器剪芥，包括：Firefox垄开，Chrome，Opera税肪，IE以及Safari
16.Path Intellisense
自動提示文件路徑溉躲，支持各種快速引入文件
17.React/Redux/react-router Snippets
React/Redux/react-router語法智能提示
18.Vetur
Vue多功能集成插件虚吟，包括：語法高亮，智能提示签财，emmet串慰，錯誤提示，格式化唱蒸，自動補(bǔ)全邦鲫，debugger。vscode官方欽定Vue插件神汹，Vue開發(fā)者必備庆捺。
19.vscode-icon
讓 vscode 資源樹目錄加
20.HTMLHint
html代碼檢測
21.Project Manager
在多個項(xiàng)目之前快速切換的工具
22.fileheader
頂部注釋模板，可定義作者屁魏、時間等信息滔以，并會自動更新最后修改時間，快捷鍵ctrl+alt+i在文件開頭自動輸入作者信息和修改信息等內(nèi)容
23.filesize
在底部狀態(tài)欄顯示當(dāng)前文件大小氓拼，點(diǎn)擊后還可以看到詳細(xì)創(chuàng)建你画、修改時間
24.quokka
一個調(diào)試工具插件，能夠根據(jù)你正在編寫的代碼提供實(shí)時反饋桃漾。它易于配置坏匪，并能夠預(yù)覽變量的函數(shù)和計(jì)算值結(jié)果。另外撬统，在使用 JSX 或 TypeScript 項(xiàng)目中适滓，它能夠開箱即用
25.CSS Peek
使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方恋追。當(dāng)你在 HTML 文件中右鍵單擊選擇器時凭迹，選擇“ Go to Definition 和 Peek definition ”選項(xiàng)，它便會給你發(fā)送樣式設(shè)置的 CSS 代碼苦囱。
26.HTML Boilerplate
通過使用 HTML 模版插件嗅绸，你就擺脫了為 HTML 新文件重新編寫頭部和正文標(biāo)簽的苦惱。你只需在空文件中輸入 html沿彭，并按 Tab 鍵朽砰，即可生成干凈的文檔結(jié)構(gòu)。
27.Prettier
Prettier 是目前 Web 開發(fā)中最受歡迎的代碼格式化程序喉刘。安裝了這個插件瞧柔，它就能夠自動應(yīng)用Prettier，并將整個 JS 和 CSS 文檔快速格式化為統(tǒng)一的代碼樣式睦裳。如果你還想使用 ESLint造锅，那么還有個 Prettier – Eslint 插件，你可不要錯過咯廉邑！
28.Color Info
提供你在 CSS中使用顏色的相關(guān)信息哥蔚。你只需在顏色上懸停光標(biāo)倒谷，就可以預(yù)覽色塊中色彩模型的（HEX、 RGB糙箍、HSL 和 CMYK）相關(guān)信息了渤愁。
29.Icon Fonts
這是一個能夠在項(xiàng)目中添加圖標(biāo)字體的插件。該插件支持超過 20 個熱門的圖標(biāo)集深夯，包括了 Font Awesome抖格、Ionicons、Glyphicons 和 Material Design Icons
30.Minify
這是一款用于壓縮合并 JavaScript 和 CSS 文件的應(yīng)用程序咕晋。它提供了大量自定義的設(shè)置雹拄，以及自動壓縮保存并導(dǎo)出為.min文件的選項(xiàng)。它能夠分別通過 uglify-js掌呜、clean-css 和 html-minifier滓玖，與 JavaScript、CSS 和 HTML 協(xié)同工作质蕉。使用F1 運(yùn)行文件縮小器Minify
31.VueHelper
snippet代碼片段
32.Vue 2 Snippets
33.Vue VSCode Snippets
VUE代碼自動補(bǔ)全插件
34.Git History
git提交歷史
35 Setting Sync
同步你得設(shè)置和插件
36.Reactjs code snippets
一個 React 自動補(bǔ)工具势篡。
37.Terminal
vs code 內(nèi)置的命令行插件，也比較實(shí)用饰剥。
38.npm Intellisense
用于在import語句中自動填充npm模塊殊霞。
39.npm
此擴(kuò)展支持運(yùn)行文件中定義的npm腳本摧阅，package.json并根據(jù)中定義的依賴項(xiàng)驗(yàn)證已安裝的模塊package.json汰蓉。
40.Window Colors
每個VSCode窗口都可以獨(dú)特地自動著色。
41.live server 插件
開啟本地服務(wù)器
復(fù)制代碼
配置Live Server
"liveServer.settings.port": 8080, //設(shè)置本地服務(wù)的端口號
"liveServer.settings.root": "/", //設(shè)置根目錄棒卷，也就是打開的文件會在該目錄下找
"liveServer.settings.CustomBrowser": "chrome", //設(shè)置默認(rèn)打開的瀏覽器
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
"liveServer.settings.NoBrowser": false,
"liveServer.settings.ignoredFiles": [//設(shè)置忽略的文件
".vscode/**",
"**/*.scss",
"**/*.sass"
]
}
或者
{
"workbench.colorTheme": "Default Light+",
"editor.renderWhitespace": "all",
"editor.fontSize": 18,
"editor.fontFamily": "'Courier New',Consolas, monospace",
"search.followSymlinks": false,
"workbench.iconTheme": "vscode-icons",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"liveServer.settings.NoBrowser": true,
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags": true,
"liveServer.settings.port": 5500,
}
launch.json
{
"type": "chrome",
"request": "launch",
"name": "使用本機(jī)chrom調(diào)試",
"url": "http://localhost:8088",
"webRoot": "${workspaceFolder}",
"file":"${workspaceRoot}/html/recBug.html", //這個是在瀏覽器中要運(yùn)行的文件的路徑顾孽，每次運(yùn)行不同項(xiàng)目的時候需要修改里面的運(yùn)行路徑
}
或者
npm install -g live-server
執(zhí)行l(wèi)ive-server 啟動
復(fù)制代碼