Visual Studio Code初探

时间:2023-03-09 17:12:04
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即可切换到预览视图

Visual Studio Code初探

进一步,你可以在编辑状态下同时预览样式,点击右上角的Split Editor,可切分窗口,在右边窗口按Ctrl+Shift+V

这样,在左边编辑,右边就会显示对应的预览视图了:

Visual Studio Code初探

无插件diff

对比文本的差异,无需任何插件

Visual Studio Code初探

git集成

Visual Studio Code可以和Github集成,不过需要先在自己的机器上安装Github

Ctrl+Shift+E打开EXPlORE视图,点击Open Folder,打开在本地Clone的Github Repo,之后你就可以编辑文件,

对比,提交文件:

Submit

Visual Studio Code初探

Sync

Visual Studio Code初探

在这个过程中,你可能需要输入用户名和密码作为权限验证:

Visual Studio Code初探

html标签快速输入

一般的标签,如:

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

Visual Studio Code中输入p>并按Tab键即可, <div>标签类似:

Visual Studio Code初探

稍微复杂一些的标签,如:

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

Visual Studio Code初探

新建HTML页面的时候,在Visual Studio Code中输入<!并按Tab键,可以快速生成一个HTML5格式的默认页面:

Visual Studio Code初探

格式化代码

快捷键shift+alt+F可以格式化代码

Visual Studio Code初探

批量选中文本编辑

快捷键shift+alt可以批量选中文本并编辑

Visual Studio Code初探


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

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