【工具】开发环境
Dandelion 5/5/2022 tool
# VSCode 基础教程
- 命令面板
Ctrl+Shift+P 或 F1 - 打开项目/文件
cmd: code 项目目录名
cmd: code -r 文件名 - 代码编辑快捷键
- 光标移动
移动到行首/行尾：Home/End
移动到文档的开头/末尾：Ctrl+Home/End - 文本选择
逐字选择：Shift+左/右
逐行选择：Shift+上/下
逐块/单词选择：Shift+Ctrl+左/右
选择整行：Ctrl+L - 代码删除：Ctrl+X 或 Ctrl+Shift+K
- 代码移动/缩进
向右移动：Tab 或 Ctrl+]
向左移动：Tab+Shift 或 Ctrl+[
上下移动：Alt+上/下
上下移动且复制：Shift+Alt+上/下 - 添加注释
单行注释：Ctrl+/
块注释：Shift+Alt+A - 代码格式化：Shift+Alt+F
- 命令面板的使用
调整字符的大小写：输入“转换为大写/小写”
行排序：输入“按升序/降序排列行” - 多光标
使用鼠标：按住 Alt，鼠标点哪，哪就会出现一个光标
选中同一单词：Ctrl+D，多次按下，逐一选择
多行末尾同时插入：选中，Shift+Alt+i
使用“Esc”或“Alt”取消多光标 - 快速跳转
打开文件：Ctrl+P，输入文件名，回车
行跳转：Ctrl+G，输入行号
跳转至某个文件的某行：Ctrl+P，输入“文件名:行号”
符号跳转：Ctrl+Shift+O，输入符号名，回车
跳转到函数定义处：F12
跳转到函数实现处：Ctrl+F12
引用跳转：Shift+F12 - 快速折叠：Ctrl+Shift+[]
- 标识符重构：选中标识符，按下 F2，这样标识符出现的地方都会被修改
- 选中下一个相同的单词：选中标识符，按下 Ctrl+D，可同时编辑
- 光标移动
# 浏览器调试
- 元素（ELements）
- 用于查看或修改 HTML 元素的属性、CSS 属性、监听事件、断点
- 控制台（Console）
- 一般用于执行一次性代码，查看 JavaScript 对象，查看调试日志信息或异常信息
- 源代码（Sources）
- 用于查看页面的 HTML 文件源代码、JavaScript 源代码、CSS 源代码，此外最重要的是可以调试 JavaScript 源代码，可以给 JS 代码添加断点等
- 网络（Network）
- 主要用于查看 header 等与网络连接相关的信息
# VSCode Debugger
# 推荐配置及插件
- CSS Peek
- ESLint
- Debugger for Chrome
- Prettier
- Beautify
- Vetur