前端小白必备快捷键工具合集

工欲善其事，必先利其器。”

初入职场，深刻认识到作为一个程序员，掌握必备的快捷工具及快捷键是一堂必修课，也是提高开发工作效率的不二法门。本文从快捷开发工具及快捷键两方面为前端入门选手量身定做，打造属于你自己的快捷开发方式。

一开始选几个最为常用的命令适应使用，并逐渐记忆增加其他快捷键的使用。在工作中会对快捷键使用有新的需求，因此本文后续也会更新~~~

一、快捷开发工具

1. UTools

alt/ctrl + space快速打开搜索框，输入自己想找的工具/文件定位打开

2. SwitchHost

SwitchHosts开源地址: [https://github.com/oldj/SwitchHosts](https://github.com/oldj/SwitchHosts)
下载地址：[https://www.electronjs.org/apps/switchhosts](https://www.electronjs.org/apps/switchhosts)

工作原理：向浏览器输入网址https://www.baidu.com/,浏览器会查询本地计算机有没有存储域名baidu.com对应的服务器IP, 如果存储了,浏览器直接向目标服务器发起三次握手的连接请求;如果没有存储,则向DNS服务器发起"查询baidu.com对应服务器IP"的请求。本地计算机存储域名对应ip的文件就是hosts文件如果我们更改了hosts文件,就可以改变浏览器请求特定域名的资源时对应的服务器。

3. Xmind
超棒的思维导图工具，大家应该都知道啦。

4. 有道云 or 坚果云 or 语雀
记笔记

二、VS Code常用快捷键
我自己常用的前端开发工具是VS Code，当然也有很多小伙伴喜欢用WebStorm。
以下主要介绍VS Code中常用的一些快捷键。
1. 主命令框---F1或Ctrl+Shift+P
2. 编辑器与窗口管理

新建文件---Ctrl+N

文件之间切换---Ctrl+Tab

打开一个新的VS Code编辑器---Ctrl+Shift+N

关闭当前窗口---Ctrl+W

关闭当前的VS Code编辑器---Ctrl+Shift+W

切出一个新的编辑器窗口---Ctrl+\

切换左中右3个编辑器窗口的快捷键---Ctrl+1/-Ctrl+2/-Ctrl+3

3. 代码编辑
代码行向左或向右缩进---ctrl+[ / ctrl+]

复制或剪切当前行/当前选中内容---Ctrl+C 、 Ctrl+V

代码格式化---Shift+Alt+F

向上或向下移动一行--- Alt+Up 或 Alt+Down

向上或向下复制一行---Shift+Alt+Up 或 Shift+Alt+Down

在当前行下方插入一行---Ctrl+Enter

在当前行上方插入一行---Ctrl+Shift+Enter

4. 修改默认快捷键

参考：[https://lzw.me/a/vscode-visual-studio-code-shortcut.html](https://lzw.me/a/vscode-visual-studio-code-shortcut.html)

官方快捷键大全：[https://code.visualstudio.com/docs/getstarted/keybindings](https://code.visualstudio.com/docs/getstarted/keybindings)

三、浏览器常用快捷键(chrome)

1. Ctrl+n --- 打开一个新的浏览器窗口
2. Ctrl+t --- 打开一个新的标签页
3. Alt+home --- 打开当前标签页的主页
4. Ctrl+h --- 打开历史记录
5. Ctrl+j --- 打开浏览器中下载的内容
6. Ctrl+u --- 打开当前网页的源代码
7. Ctrl+ +/- --- 放大或缩小网页内容
8. **Ctrl+Shift+n --- 在隐身模式下打开新窗口**
9. **Ctrl+Shift+t --- 重新打开最后关闭的标签页**
10. Ctrl+Shift+Tab / Ctrl+Pgup --- 跳转上一个标签页
11. Ctrl+Tab / Ctrl+Pgdn --- 跳转下一个标签页
12. Alt+<- --- 打开历史记录中的上一页
13. Alt+-> --- 打开历史记录中的下一页
14. Ctrl+1-8 --- 跳转到指定索引号的标签页
15. Ctrl+9 --- 跳转到最后一个标签页
16. Ctrl+w / Ctrl+F4 --- 关闭当前标签页
17. Ctrl+Shift+w --- 关闭所有已打开的标签页并关闭当前chrome浏览器
18. Shift+Esc --- 打开Chrome任务管理器 // 无效
19. Ctrl+f / F3 --- 打开关键字搜索框
20. Ctrl+g --- 跳转到与关键字搜索框中的文本相匹配的下一条内容
21. Ctrl+Shift+g --- 跳转到与关键字搜索框中的文本相匹配的上一条内容
22. Alt+f/e /F10 --- 打开右上角菜单栏
23. Ctrl+Shift+b --- 显示或隐藏书签栏
24. Ctrl+Shift+o --- 打开书签管理栏
25. Shift+Alt+t --- 把焦点放在chrome工具栏的第一项
26. F6 --- 在地址栏与书签栏之间向前切换焦点
27. Shift+F6 --- 在地址栏与书签栏之间向后切换焦点
28. F12 / Ctrl+Shift+j --- 打开开发者工具
29. Ctrl+Shift+Delete --- 打开清除浏览数据选项
30. F1 --- 打开Chrome帮助中心
31. Ctrl+Shift+m --- 打开Chrome账户登录对话框
32. 最小化当前窗口 --- Alt + 空格键 + n
33. 最大化当前窗口 --- Alt + 空格键 + x
34. 退出 Google Chrome --- Ctrl + Shift + q 或 Alt + F4
35. 使用其他搜索引擎进行搜索 输入搜索字词并按 Tab 键