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，點選第一個就可以
Visual Studio Code（VS code）介紹

方法二：

ctrl + P 然後輸入 >ext install
Visual Studio Code（VS code）介紹

方法三：

點選圖中位置
Visual Studio Code（VS code）介紹

三.插件合集

插件官網：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 插件，開啟本地伺服器

開啟本地開發時伺服器，為靜态和動态頁面提供實時重新整理功能

Visual Studio Code（VS code）介紹

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

Visual Studio Code（VS code）介紹

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：拾色器

F1

Autoprefixer CSS

Safari

Chrome

Firefox

Opera

IE

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

Visual Studio Code（VS code）介紹

一.日常安利 VS code

二.怎麼安裝插件？

三.插件合集

a.配置類插件：

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代碼智能提示

HTMLHint，html代碼檢測支援html5

d.語言相關

C＃

CodeMetrics

Java Extension Pack

其他

萬能語言運作環境 Code Runner

一.日常安利　VS code