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/