Visual Studio Code（VS code）介紹

一.日常安利　VS code

　　VS vode特點：

• 開源，免費；
• 自定義配置
• 集成git
• 智能提示強大
• 支持各種文件格式（html/jade/css/less/sass/xml）
• 調試功能強大
• 各種方便的快捷鍵
• 強大的插件擴展

 　　對前端這么友好，沒理由不用。

  Visual Studio Code（VScode ）官網　：https://code.visualstudio.com/

Visual Studio Code（VScode ）github地址 ：https://github.com/Microsoft/vscode

二.怎么安裝插件？

方法一：

• 按F1或Ctrl+Shift+p，輸入extensions，點擊第一個就可以
• 

方法二：

• ctrl + P 然后輸入 >ext install
• 

方法三：

• 點擊圖中位置
• 

三.插件合集

插件官網：https://marketplace.visualstudio.com/ 

a.配置類插件：

Settings Sync，一台電腦配置好之后，其它的幾台電腦都不用配置。新機器登錄一下就搞定了。再也不用折騰環境了，使用GitHub Gist同步多台計算機上的設置，代碼段，主題，文件圖標，啟動，鍵綁定，工作區和擴展。

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

beautify格式化代碼工具，美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代碼。

Auto Close Tag，自動閉合HTML/XML標簽

Auto Rename Tag，自動完成另一側標簽的同步修改

 

Chinese (Simplified) Language Pack for Visual Studio Code，中文（簡體）語言包，將界面轉換為中文，使用快捷鍵【Ctrl+Shift+P】來實現，在彈出的搜索框中輸入【configure language】，然后選擇搜索出來的【Configure Display Language】,然后就打開了locale.json文件，locale然后重新輸入冒號會自動出現代碼提示。

Code Spell Checker，識別單詞拼寫是否有誤，並給出提示

vscode-icons，顯示Visual Studio代碼的圖標，目前該插件已被vscode內部支持："文件" -> "首選項" -> "文件圖標主題"

guides，顯示代碼對齊輔助線，很好用

Rainbow Brackets，為圓括號，方括號和大括號提供彩虹色。這對於Lisp或Clojure程序員，當然還有JavaScript和其他程序員特別有用。

Bracket Pair Colorizer，給括號加上不同的顏色，便於區分不同的區塊，使用者可以定義不同括號類型和不同顏色

 

Indent-Rainbow，用四種不同顏色交替着色文本前面的縮進

filesize，在狀態欄中顯示當前文件大小，點擊后還可以看到詳細創建、修改時間

Import Cost，對引入的計算大小

 

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

Path Autocomplete：路徑完成提示

 

 

WakaTime，從您的編程活動自動生成的度量標准，見解和時間跟蹤。

GitLens，git日志查看插件

GitLens 增強了 Visual Studio Code 中內置的 Git 功能。例如 commits 搜索，歷史記錄和和查看代碼作者身份，還能通過強大的比較命令獲得有價值的見解等等

REST Client，允許直接發送HTTP請求並在Visual Studio Code中查看響應。

Npm Intellisense ，用於在 import 語句中自動填充 npm 模塊，require 時的包提示（最新版的vscode已經集成此功能）

Azure Storage，VS Code的Azure存儲擴展允許您部署靜態網站並瀏覽Azure Blob容器，文件共享，表和隊列。按照本教程從VS Code部署Web應用程序到Azure存儲。

Project Manager，在多個項目之前快速切換的工具

可以定義自己的收藏項目，或選擇自動檢測VSCode項目，Git，Mercurial和SVN存儲庫或任何文件夾。

以下是Project Manager提供的一些功能：

• 將任何項目保存為收藏夾
• 自動檢測VSCode，GIT中，水銀或SVN存放區
• 在相同或新窗口中打開項目
• 識別已刪除/重命名的項目
• 一個狀態欄標識當前項目
• 專門的活動欄

Language Support for Java(TM) by Red Hatredhat，java開發環境

Todo Tree，此擴展可以快速搜索（使用ripgrep）您的工作區以獲取TODO和FIXME等注釋標記，並在資源管理器窗格的樹視圖中顯示它們。單擊樹中的TODO將打開文件並將光標放在包含TODO的行上。

找到的TODO也可以在打開的文件中突出顯示。

fileheader，頂部注釋模板，可定義作者、時間等信息，並會自動更新最后修改時間，快捷鍵ctrl+alt+i在文件開頭自動輸入作者信息和修改信息等內容

b.VS code 主題集合

1.Night Owl  ，一個非常適合夜貓子的 VS Code 主題。像是為喜歡深夜編碼的人精心設計的。

2.Atom One Dark Theme，一個基於Atom的黑暗主題

3.Dracula Official，官方吸血鬼主題，博主用的就是這款，很漂亮

4.One Dark Pro，Atom標志性的One Dark主題，也是VS Code下載次數最多的主題之一！

5.Bimbo，簡約而現代的神奇海洋主題

 c.代碼提示提示類

HTML Snippets，智能提示HTML標簽，以及標簽含義，完整的HTML代碼提示，包括HTML5

HTML CSS Support，智能提示CSS類名以及id，在 html 標簽上寫class 智能提示css樣式

jQuery Code Snippets，jQuery代碼智能提示

超過130個用於JavaScript代碼的jQuery代碼片段。

只需鍵入字母'jq'即可獲得所有可用jQuery代碼片段的列表。

HTMLHint，html代碼檢測支持html5

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

Can I Use：HTML5、CSS3、SVG的瀏覽器兼容性檢查

TypeScript Hero：用於編寫 TypeScript

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

Reactjs code snippets，一個 React 自動補工具

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

VueHelper，主要增強了編寫vue和擴展元素ui、vux、iview的能力

Vue 2 Snippets、Vue VSCode Snippets，VUE代碼自動補全插件

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

CSS Peek，可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼。

HTML Boilerplate，通過使用 HTML 模版插件，你就擺脫了為 HTML 新文件重新編寫頭部和正文標簽的苦惱。你只需在空文件中輸入 html，並按 Tab 鍵，即可生成干凈的文檔結構。

Prettier，能夠將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。如果你還想使用 ESLint，那么還有個 Prettier – Eslint 插件。

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

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

Minify，用於壓縮合並 JavaScript 和 CSS 文件的應用程序。提供了大量自定義的設置，和自動壓縮保存並導出為.min文件的選項。能夠通過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工作。使用F1 運行文件縮小器Minify。

Git History，git提交歷史

Window Colors，每個VSCode窗口都可以獨特地自動着色。

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 啟動

d.語言相關

C＃

• 適用於.NET Core的輕量級開發工具。
• 偉大的C＃編輯支持，包括語法突出顯示，智能感知，轉到定義，查找所有引用等。
• 調試支持.NET Core（CoreCLR）。注意：不支持單聲道調試。桌面CLR調試支持有限。
• 支持Windows，macOS和Linux上的project.json和csproj項目。

CodeMetrics

計算TypeScript / JavaScript文件的復雜性。

Java Extension Pack

它是一組流行的擴展，可以幫助在Visual Studio Code中編寫，測試和調試Java應用程序。查看VS Code中的Java以開始使用。

其他

萬能語言運行環境 Code Runner

• 插件名稱：Code Runner
• 插件地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

如果你需要學習或者接觸各種各樣的開發語言，那么 Code Runner 插件可以讓你不用搭建各種語言的開發環境，直接通過此插件就可以直接運行對應語言的代碼，非常適合學習或測試各種開發語言。

支持的語言有：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定義的命令。

快速注釋 Document This

• 插件名稱：Document This
• 插件地址：https://marketplace.visualstudio.com/items?itemName=joelday.docthis

優秀的代碼除了優秀的性能、規范的格式，注釋也是不可或缺的，而且注釋也應該有一套標准的注釋方法，特別對於 JavaScript 這種語言。

Document This 可以快速地幫你生成注釋，如一些函數的注釋還能幫你抽取出參數的定義等，是你編寫規范代碼必備的工具。

CSS 類名智能提示

• 插件名稱：IntelliSense for CSS class names in HTML
• 插件地址：https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

在 HTML 中調用定義好的樣式名時，有時需要經常在 HTML 與 CSS 文件之間切換，來回地查看你已定義好的 CSS 類名。

而有了 IntelliSense for CSS class names in HTML 插件后，你可以在 HTML 中需要調用 CSS 類名的地方，此插件會智能地給你已定義 CSS 類名的提示。

Live Server插件可以開啟本地服務器

Markdown Preview Enhanced md增強展示

 Autoprefixer，css自動添加瀏覽器廠商前綴

 

 只需兼容主流瀏覽器

正常情況使用：（在書寫完的CSS樣式文件中，按F1，選擇Autoprefixer CSS）

這時候會添加最新需要兼容的css頭（PS：現在基本上只考慮Safari和Chrome了）

兼容其他瀏覽器

但是，這往往不是我們需要的，有時候還需要兼容Firefox、Opera和IE，那么可以自定義VSCode的配置項：

// autoprefixer配置
    "autoprefixer.browsers": [ "ie >= 6", "firefox >= 8", "chrome >= 24", "Opera>=10" ]

效果演示：

Courier New，一款好看字體

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

markdownlint，markdown語法糾錯

Color Highlight：顏色值在代碼中高亮顯示

 

Highlight Matching Tag：高亮匹配的標簽

Image preview：鼠標移到路徑里顯示圖像預覽

 

 IntelliSense for CSS class names in HTML：CSS 類名智能提示，把項目中 css 文件里的名稱智能提示在 html 中

 

lit-html：提供語法高亮和相應的補全支持

 

React Native Tools：為 React Native 開發提供的專門的插件

 

SVG Viewer：查看SVG 文件

 

Open-In-Browser：此插件在快捷菜單中添加了在默認瀏覽器查看文件選項

 

Regex Previewer：用於實時測試正則表達式的實用工具

 

TODO Highlight：寫到某一部分的代碼時，其中部分的功能需要稍后再來實現，這是就可以在對應的代碼處添加一個 TODO 類型的注釋，那么后期就可以快速地跳轉到這部分繼續寫

Document This：快速注釋

File Peek：根據路徑字符串，快速定位到文件

Color Picker：拾色器