VSCode 前端經常使用插件

1.Auto Close Tag
　　自動閉合HTML/XML標籤

 

2.Auto Rename Tag
　　自動完成另外一側標籤的同步修改

 

 

3.Beautify
　　格式化代碼，值得注意的是，beautify插件支持自定義格式化代碼規則

 

4.Bracket Pair Colorizer
　　給括號加上不一樣的顏色，便於區分不一樣的區塊，使用者能夠定義不一樣括號類型和不一樣顏色

 

 

5.Debugger for Chrome
　　映射vscode上的斷點到chrome上，方便調試

 

6.Courier New
　　一款好看字體

 

7.GitLens
　　方便查看git日誌，git重度使用者必備

 

 

8.HTML CSS Support
　　智能提示CSS類名以及id

 

 

9.HTML Snippets
　　智能提示HTML標籤，以及標籤含義

 

 

10.JavaScript(ES6) code snippets
　　ES6語法智能提示，以及快速輸入，不單單支持.js，還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各類包含js代碼文件的時間

 

11.jQuery Code Snippets
　　jQuery代碼智能提示

 

 

12.Markdown Preview Enhanced
　　實時預覽markdown，markdown使用者必備

 

13.markdownlint
　　markdown語法糾錯

 

14.Material Icon Theme
　　我的認爲最好的vscode圖標主題，支持更換不一樣色系的圖標，值得點出的是，該插件更新極其頻繁，基本和vscode更新頻率保持一致

 

15.open in browser
　　vscode不像IDE同樣可以直接在瀏覽器中打開html，而該插件支持快捷鍵與鼠標右鍵快速在瀏覽器中打開html文件，支持自定義打開指定的瀏覽器，包括：Firefox，Chrome，Opera，IE以及Safari

 

16.Path Intellisense
　　自動提示文件路徑，支持各類快速引入文件

 

 

17.React/Redux/react-router Snippets
　　React/Redux/react-router語法智能提示

 

18.Vetur
　　Vue多功能集成插件，包括：語法高亮，智能提示，emmet，錯誤提示，格式化，自動補全，debugger。vscode官方欽定Vue插件，Vue開發者必備。

 

 

19.vscode-icon
　　讓 vscode 資源樹目錄加

 

20.HTMLHint
　　html代碼檢測

 

21.Project Manager
　　在多個項目以前快速切換的工具
22.fileheader
　　頂部註釋模板，可定義做者、時間等信息，並會自動更新最後修改時間，快捷鍵ctrl+alt+i在文件開頭自動輸入做者信息和修改信息等內容

 

23.filesize
　　在底部狀態欄顯示當前文件大小，點擊後還能夠看到詳細建立、修改時間

 

24.quokka
　　一個調試工具插件，可以根據你正在編寫的代碼提供實時反饋。它易於配置，並可以預覽變量的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它可以開箱即用

 

25.CSS Peek
　　使用此插件，你能夠追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇「 Go to Definition 和 Peek definition 」選項，它便會給你發送樣式設置的 CSS 代碼。

 

26.HTML Boilerplate
　　經過使用 HTML 模版插件，你就擺脫了爲 HTML 新文件從新編寫頭部和正文標籤的苦惱。你只需在空文件中輸入 html，並按 Tab 鍵，便可生成乾淨的文檔結構。

 

27.Prettier
　　Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就可以自動應用Prettier，並將整個 JS 和 CSS 文檔快速格式化爲統一的代碼樣式。若是你還想使用 ESLint，那麼還有個 Prettier – Eslint 插件，你可不要錯過咯！

 

28.Color Info
　　提供你在 CSS中使用顏色的相關信息。你只需在顏色上懸停光標，就能夠預覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關信息了。

 

29.Icon Fonts
　　這是一個可以在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons

 

30.Minify
　　這是一款用於壓縮合並 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存並導出爲.min文件的選項。它可以分別經過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工做。使用F1 運行文件縮小器Minify

 

31.VueHelper
　　snippet代碼片斷

 

32.Vue 2 Snippets
33.Vue VSCode Snippets
　　VUE代碼自動補全插件
34.Git History
　　git提交歷史

35 Setting Sync
　　同步你得設置和插件

36.Reactjs code snippets

　　一個 React 自動補工具。

37.Terminal 

　　 vs code 內置的命令行插件，也比較實用。
38.npm Intellisense

　　用於在import語句中自動填充npm模塊。

39.npm

此擴展支持運行文件中定義的npm腳本，package.json並根據中定義的依賴項驗證已安裝的模塊package.json。

 40.Window Colors

每一個VSCode窗口均可以獨特意自動着色。

41.live server 插件

開啓本地服務器

 

 

配置Live Server  
{
  "liveServer.settings.port": 8080, //設置本地服務的端口號
      "liveServer.settings.root": "/", //設置根目錄，也就是打開的文件會在該目錄下找
      "liveServer.settings.CustomBrowser": "chrome", //設置默認打開的瀏覽器
      "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --incognito --remote-debugging-port=9222",
      "liveServer.settings.NoBrowser": false,
      "liveServer.settings.ignoredFiles": [//設置忽略的文件
          ".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": "使用本機chrom調試",
            "url": "http://localhost:8088",
            "webRoot": "${workspaceFolder}",
            "file":"${workspaceRoot}/html/recBug.html", //這個是在瀏覽器中要運行的文件的路徑，每次運行不一樣項目的時候須要修改裏面的運行路徑
        }
或者
npm install -g live-server
執行live-server 啓動