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ù)和計算值結(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ù)制代碼