Visual Studio Code（VS code）介紹

時間 2019-11-11

標籤 visual studio code 介紹欄目 Visual Studio 简体版

原文原文鏈接

一.平常安利　VS code

　　VS vode特色：javascript

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

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

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

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

二.怎麼安裝插件？

方法一：vue

按F1或Ctrl+Shift+p，輸入extensions，點擊第一個就能夠

方法二：html5

ctrl + P 而後輸入 >ext install

方法三：java

點擊圖中位置

三.插件合集

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

a.配置類插件：

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

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：HTML五、CSS三、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：拾色器

相關標籤/搜索