使用
- 找个地方新建一个目录(目录名不要中文),假设目录名为 vs-demo
- 右键点击该目录,open with code
- 使用 Ctrl+Shift+E 打开资源管理器,在 vs-demo 目录里新建 HTML 文件,文件名为 index.html
- 在 index.html 依次输入:英文感叹号、<kbd>回车</kbd> 键,即可看到一个完整的 HTML 页面
- 由于 vscode 时常更新,如果 <kbd>回车</kbd> 键不行,就试试 <kbd>Tab</kbd> 键
这种快捷写法叫做 Emmet,目前所有的前端编辑器都支持 Emmet。换句话说,如果一个编辑器没有默认支持 Emmet,你就可以卸载这款编辑器了(比如 Sublime Text 括弧笑)。
关于 Emmet 的更多快捷写法,见:
- 官网的视频介绍
- Emmet 作弊表
配置
VSCode 的配置方式是打开「文件 - 首选项 - 设置」,对应快捷键为 Ctrl + ,
然后在搜索框搜索你想要配置的东西,比如搜索 font size 或者字体大小。
根据描述修改输入框中的值即可,不需要点击保存(没有保存按钮)。
设置字体与字号
搜索 font size
将 Editor: Font Size 的值改为 14 或 16 或 18 等。
字号就变大了。
设置字体也是类似,搜索 font family 或者字体
将 Editor: Font Family 改为 Fira Code, Consolas, 'Courier New', monospace
这里非常推荐大家下载 Fira Code 编程字体。
插件安装
VSCode 自带 Emmet、Git 继承和 JS 调试功能(后续会讲到),已经十分完善了,但是还是有一些特殊的需求,这个时候我们就可以安装第三方插件了。由于第三方插件不是微软生产的,所以质量良莠不齐,请注意甄别。
推荐安装的插件有:中文语言包(搜 Chinense)、Code Spell Checker(检查你的单词拼写)。
如果你发现 VSCode 没有 Git 功能:
那么你只需要在项目目录运行 git init 来激活 git 功能即可。
安装 open in browser
按 Ctrl + Shift + X 打开扩展面板,然后输入 open in browser,点击第一个结果的「安装」按钮,稍等片刻就安装好了(相比之下 Sublime 的插件安装体验就差很多)。
然后你在任意 HTML 文件右键,就可以看到 Open In Default Browser 这个按钮了,点击试试看。