文章出處

作者: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即可切換到預覽視圖

md1

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

md2

無插件diff

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

diffNoPlugin

git集成

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

Submit

gitintgr

Sync

gitSync

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

html標簽快速輸入

一般的標簽,如:

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

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

simplehtmltag

稍微復雜一些的標簽,如:

<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鍵即可:

list-item

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

格式化代碼

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

批量選中文本編輯

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

shift_alt_to_select_block_text


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

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


文章列表




Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()