Visual Studio Code初探

作者：Grey

本文的GIF動畫均使用ScreenToGif進行錄制。

摘要

微軟今年發布了一款運行於 OS X，Windows 和 Linux 之上的免費跨平台編輯器: Visual Studio Code

官方說明:

Build and debug modern web and cloud applications.
Code is free and available on your favorite platform - Linux, Mac OSX, and Windows.

在此主要想分享幾個實用功能：

• Markdown Preview
• 無插件diff
• git集成
• html標簽快速輸入
• 批量選中文本編輯 update 2016-04-15

歡迎拍磚補充 : )

Markdown Preview

用Markdown排版文章的時候，通常需要預覽，
用Visual Studio Code打開你要編輯的md文件，按Ctrl+Shift+V即可切換到預覽視圖

進一步，你可以在編輯狀態下同時預覽樣式，點擊右上角的Split Editor,可切分窗口，在右邊窗口按Ctrl+Shift+V
這樣，在左邊編輯，右邊就會顯示對應的預覽視圖了：

無插件diff

對比文本的差異，無需任何插件

git集成

Visual Studio Code可以和Github集成，不過需要先在自己的機器上安裝Github
按Ctrl+Shift+E打開EXPlORE視圖，點擊Open Folder,打開在本地Clone的Github Repo,之后你就可以編輯文件,
對比,提交文件：

Submit

Sync

在這個過程中，你可能需要輸入用戶名和密碼作為權限驗證：

html標簽快速輸入

一般的標簽，如：

<p></p>
<div></div>

在Visual Studio Code中輸入p>並按Tab鍵即可， <div>標簽類似:

稍微復雜一些的標簽，如：

<ul class="list-item">
    <li class="item-class"></li>
    <li class="item-class"></li>
    <li class="item-class"></li>
    <li class="item-class"></li>
</ul>

在Visual Studio Code中輸入ul.item-list>li.item-class*4>並按Tab鍵即可:

新建HTML頁面的時候，在Visual Studio Code中輸入<!並按Tab鍵,可以快速生成一個HTML5格式的默認頁面:

格式化代碼

快捷鍵shift+alt+F可以格式化代碼

批量選中文本編輯

快捷鍵shift+alt可以批量選中文本並編輯

---

更多：https://code.visualstudio.com/Docs

下載地址：https://code.visualstudio.com/