1. 插件推荐
常用插件：
- GitHub Copilot：由 GitHub 提供的 AI 编码助手，能够根据上下文自动生成代码片段或建议。支持多种编程语言，极大地提高编码效率和创新能力。
类似的 AI 代码补全插件:
Tabnine、TONGYI Lingma、Fidden Code
- Jupyter：支持在 VS Code 中直接运行和编辑 Jupyter Notebooks，适合数据科学和机器学习开发者。
- GitLens：强大的 Git 扩展工具，提供代码注释、历史记录、变更比较等功能，方便追踪代码改动。
- Prettier - Code Formatter：代码格式化工具，支持多种编程语言，帮助保持代码风格一致。
- ESLint：JavaScript 和 TypeScript 项目的静态分析工具，可以自动检测和修复代码中的问题。
- Bracket Pair Colorizer：为代码中的括号自动配色，方便匹配和阅读嵌套结构。
- Path Intellisense：提供文件路径的自动补全，提升开发效率。
- Live Server：用于实时预览 HTML/CSS/JS 项目的插件，启动后会在浏览器中自动刷新页面。
- Debugger for Chrome：允许在 VS Code 中直接调试 Chrome 浏览器中的 JavaScript 代码。
- Remote - SSH：帮助开发者通过 SSH 连接到远程服务器进行开发。
- Docker：方便在 VS Code 中管理 Docker 容器和镜像，适合容器化开发环境。
- Markdown Preview Enhanced：提供增强的 Markdown 预览功能，包括公式、图表等的支持。
- Auto Rename Tag：在编辑 HTML 或 XML 时自动重命名匹配的标签。修改起始标签时，结束标签会同步更改，减少手动操作。
2. 常用快捷键
2.1 文件操作快捷键
- 新建文件：
Ctrl + N - 打开文件：
Ctrl + O - 保存文件：
Ctrl + S - 全部保存：
Ctrl + K, S:同时保存所有打开的文件，非常适用于多文件编辑后的一键保存。 - 关闭文件：
Ctrl + W - 关闭所有文件：
Ctrl + K, Ctrl + W - 重新打开最近关闭的文件：
Ctrl + Shift + T - 文件切换：
Ctrl + Tab和Ctrl + Tab + Shift
2.2 编辑操作快捷键
-
复制行/块：
Alt + Shift + ↑/↓- 复制当前行或选中的代码块，上下移动复制的内容，适合快速生成重复代码。
-
删除行：
Ctrl + Shift + K- 一键删除光标所在的整行代码，无需选中行内容。
-
上下移动行/块：
Alt + ↑/↓- 将当前行或选中的代码块向上或向下移动，不打乱代码结构的同时重新排列内容。
-
插入/替换模式切换：
Insert- 在插入模式和替换模式之间切换，插入模式为默认模式。
-
智能选择扩展：
Ctrl + Shift + ↑/↓- 逐步扩展或收缩选择范围，适用于精确选取代码块或语句。
-
多光标选择：
Alt + 鼠标点击或Ctrl + Alt + ↑/↓- 在多处同时添加光标，适合在多个位置同时输入相同内容。
-
代码折叠/展开：
Ctrl + Shift + [ / ]- 折叠或展开当前代码块，用于简化代码视图，提升代码可读性。
-
格式化代码：
Shift + Alt + F- 自动格式化当前文件的代码，保持代码风格一致。可配置不同语言的格式化工具。
-
快速修复：
Ctrl + .- 弹出修复建议菜单，快速修复代码问题，适合处理 ESLint、TypeScript 等提示的代码问题。
2.3 代码导航快捷键
-
跳转到定义：
F12- 跳转到光标所在符号（函数、变量、类等）的定义位置，适合快速查看代码实现。
-
查看定义（悬停）：
Alt + F12- 在当前页面以悬停方式查看定义内容，无需跳转到其他文件或位置。
-
查找引用：
Shift + F12- 查找当前符号在整个项目中的所有引用位置，方便代码的追踪和理解。
-
快速打开文件：
Ctrl + P- 通过输入文件名快速打开文件，支持模糊搜索和路径补全。
-
查找文本：
Ctrl + F- 在当前文件中查找文本，支持正则表达式、区分大小写、全词匹配等高级选项。
-
替换文本：
Ctrl + H- 在当前文件中查找并替换文本，同样支持高级选项。
-
全局查找文本：
Ctrl + Shift + F- 在整个工作区内查找文本，适用于大范围的代码搜索。
-
跳转到行：
Ctrl + G- 通过行号跳转到指定位置，适用于快速定位错误或编辑内容。
-
显示大纲：
Ctrl + Shift + O- 查看当前文件的大纲结构，支持快速导航到某个函数或类。
-
打开符号搜索：
Ctrl + T- 在整个工作区内搜索符号（函数、变量、类名等），适合跨文件查找和导航。
2.4 调试操作快捷键
-
开始调试/继续执行：
F5 -
单步执行（跳过函数调用）：
F10- 执行到下一个断点或下一行代码，适合逐步排查代码问题。
-
步入（进入函数内部）：
F11- 进入函数内部，详细查看函数内的执行情况。
-
步出（退出函数）：
Shift + F11- 执行完当前函数，返回到函数调用的外部代码。
-
切换断点：
F9- 在当前行设置或移除断点，控制程序的执行流。
-
条件断点：
Alt + 鼠标左键点击行号- 设置只有在特定条件下触发的断点，适合调试复杂逻辑。
-
查看变量/表达式值：
Ctrl + K, Ctrl + I- 在调试模式下查看光标所在变量或表达式的当前值。
2.5 Git 操作快捷键
-
查看源代码管理面板：
Ctrl + Shift + G- 打开 Git 源代码管理面板，查看更改、提交历史、分支等信息。
-
提交更改：
Ctrl + Enter- 在源代码管理面板中提交所有已暂存的更改。
-
暂存/撤销暂存文件：
Ctrl + Shift + Alt + A- 暂存或撤销暂存选中的文件，适用于逐步提交更改。
-
查看文件历史：
Alt + Shift + H- 在源代码管理面板中查看当前文件的提交历史，适合回溯和对比更改。
-
拉取代码：
Ctrl + Shift + P后选择Git: Pull- 从远程仓库拉取代码到本地，保持代码同步。
-
推送代码：
Ctrl + Shift + P后选择Git: Push- 将本地更改推送到远程仓库，提交团队开发或备份。
2.6 终端操作快捷键
- 打开集成终端：
Ctrl +` - 新建终端：
Ctrl + Shift +` - 切换终端：
Ctrl + PgUp/PgDn - 终止终端任务：
Ctrl + C:在终端中中断当前运行的任务或命令。
2.7 常用其他快捷键
-
命令面板：
Ctrl + Shift + P(最常用)- 打开命令面板，可以通过输入命令名称快速访问 VS Code 的所有功能。
-
显示/隐藏侧边栏：
Ctrl + B- 控制侧边栏的显示与隐藏，适合在需要更大编辑空间时使用。
-
全屏模式：
F11- 切换编辑器的全屏模式，提供专注的编辑环境。
-
Zen 模式：
Ctrl + K, Z- 进入 Zen 模式，隐藏所有工具栏和侧边栏，专注于代码本身。
-
快速打开设置：
Ctrl + ,- 快速打开设置页面，进行配置和调整。
3. 配置文件与同步
配置文件：
-
settings.json：用于存储用户级别和工作区级别的配置。常用配置项包括：
"editor.fontSize"：设置编辑器的字体大小。"editor.tabSize"：设置制表符宽度。"files.autoSave"：设置文件自动保存选项（如"afterDelay"）。
-
keybindings.json：用于自定义快捷键。你可以为特定命令设置快捷键，比如：
{
"key": "ctrl+k ctrl+d",
"command": "editor.action.deleteLines",
"when": "editorTextFocus"
}
设置同步：
- Settings Sync：VS Code 内置的设置同步功能，可以同步你的设置、键绑定、扩展、主题等。你可以通过 GitHub 账户登录并同步配置，保证在不同设备上的开发环境一致。
- 开启同步：通过命令面板
Ctrl + Shift + P，输入Settings Sync: Turn On，按照提示操作。 - 管理同步：你可以选择要同步的内容，如扩展、设置、键绑定等。
- 开启同步：通过命令面板
4. 远程开发
-
Remote - SSH：允许你通过 SSH 连接到远程服务器并在该服务器上进行开发。适用于服务器端开发、云计算等场景。
- 设置连接：配置 SSH 连接，在 VS Code 中打开远程文件夹。
- 工作流程：在远程环境中调试和运行代码，安装依赖，并使用本地与远程终端的集成功能。
-
Remote - Containers：在 Docker 容器中进行开发，有助于保持开发环境的一致性。
- 启动容器：使用 VS Code 打开容器化的工作区，配置开发环境。
- 开发与调试：在容器中开发并使用 VS Code 提供的调试工具。
-
Remote - WSL：允许在 Windows 上使用 Windows Subsystem for Linux (WSL) 开发，支持运行 Linux 发行版的开发环境。
- 环境配置：安装 WSL 并配置 VS Code 进行集成开发。
- 使用场景：适合需要在 Linux 环境中开发的项目。
5. 效率工具
-
任务系统：使用
tasks.json定义自动化任务，如编译代码、运行测试。- 创建任务：
Ctrl + Shift + P，选择Tasks: Configure Task并选择你需要的任务类型。 - 任务示例：编译 TypeScript、运行 npm 脚本、自动化测试等。
- 创建任务：
-
命令面板：
Ctrl + Shift + P打开命令面板，可以快速访问和执行 VS Code 的各种命令。- 使用技巧：通过命令面板可以执行任何命令、切换设置、安装扩展等。
-
快捷键调试：使用
Ctrl + K Ctrl + S打开快捷键设置，方便查找和修改 VS Code 的默认快捷键。 -
Emmet：前端开发者的高效工具，支持快速编写 HTML/CSS 代码。可以使用缩写生成完整的代码块，比如
div.container>ul>li*5。
6. 学习资源
-
官方文档与教程：
- VS Code 官方文档：全面的官方指南，涵盖所有 VS Code 功能。
- VS Code 官方博客：发布新功能、插件推荐和使用技巧。
-
社区资源：
- YouTube 频道 - Visual Studio Code：官方的 YouTube 频道，有丰富的教程和介绍。
- DEV Community - VS Code：开发者社区，有很多关于 VS Code 的技巧和分享文章。
-
在线课程：
- Udemy：Visual Studio Code Masterclass，涵盖基础到进阶的 VS Code 教程。
- Coursera：Introduction to Visual Studio Code，适合初学者的入门课程。
扫一扫
1213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
