vscode 相关设置
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,适合初学者的入门课程。
本文作者:tkzzzzzz6
本文链接:https://www.cnblogs.com/tan-ke/p/18522566
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步