安装

从官网下载安装包

安装时把以下选项选中：

使用

• (1)找个地方新建一个目录（目录名不要中文），假设目录名为 vs-demo
• (2)右键点击该目录，open with code
• (3)使用 Ctrl+Shift+E 打开资源管理器，在 vs-demo 目录里新建 HTML 文件，文件名为 index.html
• (4)在 index.html 依次输入：英文感叹号、<kbd>回车</kbd> 键，即可看到一个完整的 HTML 页面
  • 由于 vscode 时常更新，如果 <kbd>回车</kbd> 键不行，就试试 <kbd>Tab</kbd> 键

这种快捷写法叫做 Emmet，目前所有的前端编辑器都支持 Emmet。换句话说，如果一个编辑器没有默认支持 Emmet，你就可以卸载这款编辑器了（比如 Sublime Text 括弧笑）。

关于 Emmet 的更多快捷写法，见：
1.官网的视频介绍
2.Emmet作弊表

配置

VSCode 的配置方式就写编辑一个配置文件，打开「文件 - 首选项 - 设置」，对应快捷键为 Ctrl + ,

左侧为系统默认配置项，右侧为你要覆盖的配置项。把你要修改的项从左边拷贝到右边，然后保存，即可生效。

设置字体与字号

在右侧文件中添加一行（注意末尾要有英文逗号）
"editor.fontSize": 18,
保存，字号就变大了。
设置字体也是类似，添加
"editor.fontFamily": "Consolas, 'Courier New', monospace",
即可将字体设置为你想要的。这里推荐10大最适合编程的字体推荐下载，够你玩一上午了。我用的编程字体一般是 Source Code Pro 和 M Plus 这两款。

其实 VSCode 默认的配置就挺好的。

插件安装

VSCode 自带 Emmet、Git 继承和 JS 调试功能（后续会讲到），已经十分完善了，但是还是有一些特殊的需求，这个时候我们就可以安装第三方插件了。由于第三方插件不是微软生产的，所以质量良莠不齐，请注意甄别。

安装 open in browser

按 Ctrl + Shift + X 打开扩展面板，然后输入 open in browser，点击第一个结果的「安装」按钮，稍等片刻就安装好了（相比之下 Sublime 的插件安装体验就差很多）。

然后你在任意 HTML 文件右键，就可以看到 Open In Default Browser 这个按钮了，点就试试看。

Git 操作

要在 VSCode 里面操作 Git，前提是你已经配置好了 Git，如果你没有配置过，那么就在 Git Bash 里输入以下命令：

• git config –global user.name 你的英文名
• git config –global user.email 你的邮箱
• git config –global push.default matching
• git config –global core.quotepath false
• git config –global core.editor “vim”

然后你就可以像视频里面一样，愉快地使用 VSCode 的 Git 功能了。

如果你还希望用 VSCode 将代码推送到 GitHub，那么……待续