前端学习(0)~vscode工具使用

VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。这里只讲在前端开发中的使用。

VS Code 的安装

• VS Code 官网：https://code.visualstudio.com

VS Code快捷键

移动光标

Mac快捷键	Win快捷键	作用	备注
Cmd + ←	Fn + ←	将光标定位到当前行的最左侧	很常用
Cmd + →	Fn + →	将光标定位到当前行的最右侧	很常用
Cmd + ↑	Ctrl + Home	将光标定位到文章的第一行
Cmd + ↓	Ctrl + End	将光标定位到文章的最后一行

根据上面的快捷键，我们可以举一反三。补充如下：

• 「方向键」：在单个字符之间移动光标

• 「option + 左右方向键」：在单词之间移动光标（很常用）。注：Win 快捷键是「Ctrl + 左右方向键」。

• 「Cmd + 左右方向键」：在整行之间移动光标（很常用）。注：Win 的快捷键是「Fn + 左右方向键」

• 「Cmd + Shift + 」：在代码块之间移动光标。

 删除操作

Mac快捷键	Win快捷键	作用	备注
option + Backspace	Ctrl + Backspace	删除光标之前的一个单词	英文有效，很常用
option + delete	Ctrl + delete	删除光标之后的一个单词
Cmd + delete		删除光标之前的整行内容	很常用
Cmd + delete		删除光标之后的整行内容
Cmd + shift + K	Ctrl + Shift + K	删除整行	「Cmd + X」的作用是剪切，但也可以删除整行

编辑操作

Mac快捷键	Win快捷键	作用	备注
Cmd + Enter	Ctrl + Enter	在当前行下面新增一行，然后跳至该行	即使光标不在行尾，也能快速向下插入一行
Option + ↑	Alt + ↑	将代码向上移动	很常用
Option + ↓	Alt + ↓	将代码向下移动	很常用
Option + Shift + ↑	Alt + Shift + ↑	将代码向上复制	很常用
Option + Shift + ↓	Alt + Shift + ↓	将代码向下复制	很常用

js语言相关

Mac快捷键	Win快捷键	作用	备注
Cmd + /	Ctrl + /	添加单行注释	很常用
Option + Shift + F	Alt + shift + F	代码格式化	很常用
Ctrl + J		将多行代码合并为一行	Win 用户可在命令面板搜索”合并行“
Cmd +
Cmd + U	Ctrl + U	将光标的移动回退到上一个位置	撤销光标的移动和选择

跳转操作

Mac快捷键	Win快捷键	作用	备注
Ctrl + Tab	Ctrl + Tab	在已经打开的文件之间进行跳转
Cmd + P	Ctrl + P	在当前的项目工程里，全局搜索文件	很常用
Ctrl + G	Ctrl + G	跳转到指定行
Cmd + Shift + O	Ctrl + shift + O	在当前文件的各种方法之间进行跳转

搜索

Mac快捷键	Win快捷键	作用	备注
Cmd + F	Ctrl + F	在当前文件中搜索，光标在搜索框里
Cmd + G	F3	在当前文件中搜索，光标仍停留在编辑器里	很巧妙
Cmd + Shift + F	Ctrl + Shift +F	全局搜索

工作区快捷键

Mac快捷键	Win快捷键	作用	备注
cmd +/-	ctrl +/-	将工作区放大/缩小（包括代码字体、左侧导航栏）	在投影仪场景经常用到
Cmd + B	Ctrl + B	显示/隐藏侧边栏	很实用
Cmd +	Ctrl +	创建多个编辑器	比较实用
Cmd + Option + 左右方向键	Ctrl + Pagedown/Pageup	在已经打开的文件之间进行切换	非常实用
Ctrl + Tab	Ctrl + Tab	在已经打开的文件之间进行跳转	不如上面的快捷键实用
Cmd + J	Ctrl + J	显示/隐藏控制台

VS Code插件推荐

VS Code 有一个很强大的功能就是支持插件扩展。

open in browser

安装open in browser插件后，在 HTML 文件中「右键选择 --> Open in Default Browser」，即可在浏览器中预览网页。

参考地址