- VSCode 简介
- 安装 VSCode
- VSCode 基本使用方法
- 代码调试
- 插件生态系统
- 自定义和扩展
1、简介
VSCode 是由微软开发的一款免费、开源的代码编辑器，它支持 Windows、macOS 和 Linux 操作系统。VSCode 轻量级、快速且功能强大，拥有丰富的插件生态系统，可以满足各种开发需求。
2、安装 VSCode
访问 VSCode 官网：https://code.visualstudio.com/，根据操作系统下载对应的安装包。
双击安装包，按照提示完成安装。安装过程中，可以选择将 VSCode 添加到系统 PATH，这样就可以在命令行中直接使用 VSCode 打开文件。
安装完成后，启动 VSCode，点击左侧边栏的“扩展”图标，搜索并安装所需的插件
3、VSCode 基本使用方法
VSCode（Visual Studio Code）提供了丰富的快捷键，以帮助开发者快速提高工作效率。以下是一些常用的 VSCode 快捷键，适用于 Windows 和 macOS 用户（请注意，Linux 用户的快捷键可能会有所不同）：
文件管理：
- 打开文件：
Ctrl+O - 打开文件夹：
Ctrl+K Ctrl+O - 保存文件：
Ctrl+S - 另存为：
Ctrl+Shift+S - 打开最近使用的文件：
Ctrl+R - 打开命令面板：
Ctrl+Shift+P或F1 - 打开终端：`Ctrl+`` （反引号）
编辑操作： - 撤销：
Ctrl+Z - 重做：
Ctrl+Y - 删除当前行：
Ctrl+Shift+K - 删除光标右侧的所有内容：
Ctrl+Delete - 选择从光标到行尾的内容：
Shift+End - 选择从光标到行首的内容：
Shift+Home - 向右缩进：
Ctrl+} - 向左缩进：
Ctrl+{ - 格式化代码：
Shift+Alt+F - 代码补全：
Ctrl+Space - 插入代码片段：
Ctrl+Space然后选择片段 - 上下移动一行：
Alt+Up/Alt+Down - 上下复制一行：
Shift+Alt+Up/Shift+Alt+Down - 在当前行下方插入一行：
Ctrl+Enter - 在当前行上方插入一行：
Ctrl+Shift+Enter
导航与搜索： - 跳转到声明：
Ctrl+F12 - 查找所有引用：
Shift+F12 - 在当前文件中查找：
Ctrl+F - 在当前文件中替换：
Ctrl+H - 全局查找：
Ctrl+Shift+F - 全局替换：
Ctrl+Shift+H - 跳转到父级目录：
Ctrl+Up - 跳转到子级目录：
Ctrl+Down
调试： - 启动调试会话：
F5 - 单步执行：
F10 - 单步跳过：
F11 - 单步返回：
Shift+F11 - 重启调试会话：
Ctrl+Shift+D - 停止调试会话：
Ctrl+Shift+F2
窗口管理： - 打开新窗口：
Ctrl+Shift+N - 关闭当前窗口：
Ctrl+Shift+W - 切换到已打开的窗口：
Ctrl+Tab - 切换到上一个窗口：
Ctrl+Shift+Tab - 打开文件资源管理器：
Ctrl+Shift+E - 打开集成终端：`Ctrl+``
其他： - 打开设置：
Ctrl+, - 打开快捷键设置：
Ctrl+K Ctrl+O - 打开扩展视图：
Ctrl+Shift+X - 打开命令面板：
Ctrl+Shift+P或F1 - 显示命令面板：
Ctrl+P - 显示参数提示：
Ctrl+Shift+P - 自动保存：
Ctrl+Shift+S - 手动保存：
Ctrl+S
4、代码调试
在前端开发中，Visual Studio Code（VSCode）是一个功能强大的代码编辑器，它提供了丰富的工具和插件来支持各种编程语言和框架的调试。对于前端开发者来说，VSCode 的调试功能尤其有用，因为它可以帮助你快速找到并解决代码中的问题。以下是使用 VSCode 进行前端代码调试的基本步骤：
安装必要的插件
对于前端开发，你可能需要安装一些额外的插件来支持特定的语言或框架。例如，对于 JavaScript/JSON，你可以安装 Debugger for Chrome 插件，它允许你使用 Chrome 的调试功能。
配置调试环境
- 创建或更新
launch.json文件：这个文件告诉 VSCode 如何启动和调试你的程序。当你第一次尝试调试时，VSCode 会自动创建这个文件。你可以通过点击左侧活动栏的调试图标（一个类似小甲虫的符号）来创建或更新这个文件。 - 配置调试设置：在
launch.json文件中，你可以配置各种调试选项，如程序路径、调试器类型、环境变量等。
开始调试
- 设置断点：在你想要暂停程序执行的代码行上设置断点。点击编辑器左侧的行号旁边的空白区域，可以添加或移除断点。
- 启动调试会话：点击左侧活动栏的调试图标，然后选择“开始调试”按钮（通常是一个绿色的三角形）。VSCode 将根据
launch.json文件中的配置启动调试会话。 - 程序执行：当程序执行到断点时，它会暂停。你可以在调试控制台中查看变量的值、单步执行代码、查看调用栈等。
调试控制台
- 变量：查看当前作用域内的变量值。
- 监视：添加监视表达式，以便在每次暂停时检查特定变量的值。
- 调用栈：查看当前的函数调用序列。
- 单步执行：使用箭头键或调试控制台中的按钮来单步执行代码。
- 继续执行：使用
F5或调试控制台中的按钮来继续执行程序，直到下一个断点或程序结束。 - 停止调试：使用
Ctrl+Shift+F2或调试控制台中的按钮来停止调试会话。
调试器
VSCode 支持多种调试器，包括内置的调试器和支持外部调试器（如 GDB、LLDB）的插件。对于前端开发，你可能会使用到 Debugger for Chrome，它是一个基于 Chrome DevTools 的调试器。
前端调试示例
以下是一个简单的 JavaScript 调试示例：
- 打开你的 JavaScript 文件。
- 在你想要暂停执行的代码行上设置断点（点击行号旁边的区域）。
- 按
F5或点击左侧活动栏的调试图标，然后选择“开始调试”。 - 程序将在断点处暂停。在调试控制台中查看变量值、单步执行代码等。
- 使用调试控制台中的按钮或快捷键来控制程序的执行。
结束调试
完成调试后，你可以通过点击调试控制台中的“停止”按钮或按下 Ctrl+Shift+F2 来结束调试会话。
通过这些步骤，你可以在 VSCode 中进行前端代码的调试。记住，调试是一个逐步的过程，可能需要多次尝试和调整才能找到问题的根源。此外，VSCode 的插件生态系统非常丰富，你可以根据需要安装更多的插件来增强调试功能，例如代码片段、代码质量检查、自动完成等。
5、插件
这里是引用Visual Studio Code（VSCode）的插件生态系统非常庞大，可以通过安装各种插件来扩展其功能，以适应不同的开发需求和偏好。以下是一些常用且受欢迎的 VSCode 插件：
代码格式化与美化
- Prettier - Code Formatter：自动格式化你的代码，支持多种语言和框架。
- Beautify：格式化 HTML、CSS 和 JavaScript/JSON。
- ESLint：JavaScript 代码质量检查，与 Prettier 结合使用效果更佳。
代码智能提示与补全
- AutoComplete：提供更智能的代码补全功能。
- IntelliSense：VSCode 内置的智能提示功能，但也可以通过插件进行扩展。
版本控制
- GitLens：增强 VSCode 的 Git 功能，方便查看代码作者和提交历史。
- Git History：查看和管理 Git 历史记录。
代码导航
- Code Navigation：快速导航到代码中的声明和引用。
- Outline：显示代码的层次结构。
调试工具
- Debugger for Chrome：使用 Chrome DevTools 进行调试。
- Node Debugger：Node.js 的调试工具。
代码片段
- JavaScript (ES6) code snippets：提供 ES6 语法的前端代码片段。
- jQuery Code Snippets：jQuery 代码片段。
主题与图标
- One Dark Pro：一个流行的深色主题。
- Material Icon Theme：提供 Material Design 风格的图标。
- vscode-icons：为你的项目文件提供图标。
其他
- Live Server：实时预览 HTML/CSS/JavaScript 文件。
- Open in Browser：右键菜单选项，快速在浏览器中打开文件。
- Path Intellisense：自动补全文件路径。
- CSS Peek：查看 CSS 类的样式。
- HTML Snippets：HTML 标签和代码片段。
- Vetur：Vue.js 的多功能集成插件。
开发者工具
- VSCodeVim：为 VSCode 添加 Vim 编辑器模式。
- Code Runner：运行代码片段或代码文件。
代码质量与分析
- SonarLint：集成 SonarQube 的代码质量检查。
- CheckStyle-IDEA：Java 代码风格检查。
这些插件只是 VSCode 插件库中的一小部分，你可以根据自己的开发需求和兴趣去探索更多的插件。安装插件非常简单，只需打开 VSCode 的扩展视图（Ctrl+Shift+X 或点击侧边栏的扩展图标），然后搜索并安装你感兴趣的插件即可。
6、自定义和扩展
这里是引用Visual Studio Code（VSCode）提供了丰富的自定义和扩展功能，以适应不同开发者的需求和偏好。以下是一些常见的自定义和扩展方法：
自定义快捷键
- 打开设置：
Ctrl+,或Cmd+,（macOS）。 - 搜索
键盘快捷方式。 - 找到
用户快捷键部分，点击在 "键盘快捷方式" 中进行自定义。 - 添加新的快捷键或修改现有快捷键。
自定义设置
- 打开设置：
Ctrl+,或Cmd+,（macOS）。 - 搜索你想要自定义的设置，例如主题、编辑器选项、版本控制等。
- 根据需要调整设置。
自定义主题
- 打开设置：
Ctrl+,或Cmd+,（macOS）。 - 搜索
主题。 - 选择一个主题，或点击
在 "主题" 中进行自定义来创建自己的主题。
自定义编辑器
- 打开设置：
Ctrl+,或Cmd+,（macOS）。 - 搜索
编辑器。 - 根据需要调整编辑器选项，如字体大小、行高、语法高亮等。
扩展功能
- 打开扩展视图：
Ctrl+Shift+X或点击侧边栏的扩展图标。 - 搜索并安装你感兴趣的扩展。
- 安装后，根据扩展的说明使用其功能。
自定义代码片段
- 打开设置：
Ctrl+,或Cmd+,（macOS）。 - 搜索
用户代码片段。 - 点击
在 "用户代码片段" 中进行自定义。 - 添加新的代码片段或修改现有代码片段。
自定义工作区
- 打开多个文件或文件夹。
- 使用
Ctrl+K Ctrl+O打开工作区设置。 - 根据需要调整工作区设置。
自定义集成终端
- 打开设置：
Ctrl+,或Cmd+,（macOS）。 - 搜索
终端。 - 根据需要调整终端设置，如默认 shell、终端样式等。
通过这些自定义和扩展方法，你可以根据个人喜好和开发需求来优化 VSCode 的使用体验。记住，自定义和扩展功能可能会随着 VSCode 的更新而发生变化，因此建议定期查看官方文档以获取最新信息。
![[NISACTF 2022]bingdundun~](https://img-blog.csdnimg.cn/direct/45bc196477274d4186347e5eabbb23d1.png#pic_center)
