vscode使用技巧

Posted 2020-08-10 梁乾顺

前言

vscode是一款跨平台的代码编辑器，她轻量、美观、一致、功能完整，自带完美git支持，非常适合前端同学使用。下面总结下我对于这个软件的使用技巧，希望对大家有帮助。

快捷键

注意：当下列快捷键不起作用时，请考虑是否是其他软件已经占用了快捷键，如输入法、聊天软件等

vscode内置了emmet，使用tab键可快速编写html/css等，具体请查询emmet语法说明

快捷键	备注
Ctrl + N	新建文件
Ctrl + S	保存文件
Ctrl + F	在当前文件内查找
Ctrl + H	在当前文件内替换
Ctrl + Shift + F	在文件内查找
Ctrl + Shift + H	在文件内替换
Ctrl + Tab	切换文档
Ctrl + PgUp/PgDn	向前/向后切换文档
Ctrl + 1/2/3	切换分栏
Ctrl + P	转到文件
Ctrl + P	转到文件
Ctrl + G	转到行，输入行号，转到该行号处
Ctrl + =/- Ctrl + 鼠标滚轮	缩放编辑器显示比例
Ctrl + F1	在浏览器中打开当前正在编辑的html文件，这个功能需要插件支持，安装插件：View In Browser
F12	转到定义，可跳转到变量定义处，定义较为复杂时，会找不到
F1	打开命令输入框
Shift + Alt + F	格式化代码
Ctrl + Alt + Up/Down/Left/Right	按区域选中代码，并编辑
Alt + Up/Down	移动光标所在行或者光标选中代码的位置
Alt + Left/Right	前进或后退操作历史，这个历史不是编辑历史（Ctrl + Z/Y操作的是编辑历史），它包含如：第一步，光标在12行6列处；第二步，光标在20行10列处；第三步，打开另外一个文件。
Shift + Alt + Up/Down	复制光标所在行至上一行或下一行
Alt + 光标选中	光标多选，同时编辑

扩展/插件

vscode支持扩展，官方商店里有很多扩展，网址：https://marketplace.visualstu...
安装方式：点击编辑器左侧的【扩展】按钮，在搜索框中输入你想要安装的插件，点击安装即可。

推荐插件

链接	名称	备注
查看	Path Intellisense	在编辑器中输入路径时，自动补全
查看	Auto Close Tag	自动补全html标签，如输入<a>将自动补全</a>
查看	Auto Rename Tag	自动重命名html标签，如修改<a>为<b>，将自动修改结尾标签</a>为</b>
查看	REST Client	在编辑器中发送http请求，可直接得到结果，测试接口时很有用处，用法请看插件详情
查看	Easy LESS	自动编译less文件（文件保存后自动变为为同名.css文件），如果你只是想用less，而又不想配置grunt等工具来使用它时，请使用这个插件，他绝对是更效率的
查看	View In Browser	按Ctrl + F1在浏览器中打开正在编辑的html文件
查看	vscode-icons	为文件添加炫酷的图标，图标种类很全，包括各种配置文件、常见语言、常见js框架等，你值得拥有；安装后，需要使用管理员权限启动vscode，并打开命令输入框(F1或者Ctrl+Shift+P)执行Icons Enable