Loading

Visual Studio Code初探

作者:Grey

原文地址:Visual Studio Code初探

本文的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/

posted @ 2015-07-23 10:14  Grey Zeng  阅读(19868)  评论(8编辑  收藏  举报