VS Code 基础操作快速入门教程

昨天 8215阅读

一、安装与启动

VS Code 是一款轻量级但功能强大的代码编辑器。首先，你需要前往官方网站下载对应系统（Windows、macOS、Linux）的安装包。下载完成后，双击安装包进行安装。安装过程较为简单，按照提示操作即可。安装完成后，在开始菜单或应用程序列表中找到 VS Code 并点击启动。

二、界面介绍

启动 VS Code 后，你会看到一个简洁的界面。主要包括：

  • 菜单栏：位于顶部，包含了文件、编辑、视图等常见操作选项。
  • 侧边栏：默认在左侧，可通过点击图标切换显示资源管理器（用于管理文件和文件夹）、搜索（搜索项目中的文本）、源代码管理（如 Git 操作）等面板。
  • 编辑区域：占据界面大部分空间，是编写代码的地方。
  • 状态栏：位于底部，显示当前文件的编码、行号、列号等信息。

三、新建与打开文件

（一）新建文件

点击菜单栏的“文件” -> “新建文件”，或者使用快捷键 Ctrl + N（Windows/Linux）、Command + N（macOS）。此时会新建一个空白文件，默认文件名可能为“无标题 - 1”等。你可以直接在编辑区域输入代码。

（二）打开文件

  1. 打开单个文件：点击“文件” -> “打开文件”，在弹出的文件选择窗口中找到你要打开的文件（支持多种文件格式，如 .html、.js、.py 等），然后点击“打开”。
  2. 打开文件夹：点击“文件” -> “打开文件夹”，选择包含多个文件的文件夹。VS Code 会将该文件夹作为一个项目打开，在资源管理器面板中可以看到文件夹内的所有文件和子文件夹。

四、基本编辑操作

（一）文本输入与编辑

在编辑区域直接输入文本即可。VS Code 支持常见的文本编辑操作，如：

  • 撤销/重做：Ctrl + Z（撤销）、Ctrl + Y（重做）（Windows/Linux）；Command + Z（撤销）、Command + Shift + Z（重做）（macOS）。
  • 复制/粘贴：Ctrl + C（复制）、Ctrl + V（粘贴）（Windows/Linux）；Command + C（复制）、Command + V（粘贴）（macOS）。
  • 删除：使用 Backspace 键删除光标前的字符，Delete 键删除光标后的字符。

（二）代码高亮与语法检查

VS Code 会根据文件类型自动进行代码高亮显示。例如，对于 .html 文件，标签、属性等会以不同颜色显示；对于 .js 文件，关键字、变量等也有相应的颜色区分。同时，它还能进行基本的语法检查，当代码存在语法错误时，会在编辑区域左侧显示波浪线提示。

五、代码片段与智能提示

（一）代码片段

VS Code 内置了许多代码片段。以 .html 文件为例，输入 ! 然后按下 Tab 键，会自动生成一个基本的 HTML 模板：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>

对于 .js 文件，输入 if 然后按下 Tab 键，会生成一个 if 语句的代码片段：

if (condition) {
    // 代码块
}

（二）智能提示

当你输入代码时，VS Code 会根据上下文提供智能提示。例如，在 JavaScript 文件中输入 console. 时，会弹出提示框显示 console 对象的方法（如 log、error 等），按下 Tab 键或 Enter 键即可选择插入。

六、保存与版本控制（以 Git 为例）

（一）保存文件

点击菜单栏的“文件” -> “保存”，或者使用快捷键 Ctrl + S（Windows/Linux）、Command + S（macOS）。如果是新建文件且未保存过，会弹出文件保存路径选择窗口。

（二）Git 版本控制

  1. 初始化仓库：如果你的项目文件夹还未进行 Git 版本控制，在 VS Code 中打开该文件夹后，点击侧边栏的“源代码管理”图标（通常是一个源代码分支的图标），然后点击“初始化仓库”。按照提示完成初始化。
  2. 添加、提交与推送：
    • 添加文件：在“源代码管理”面板中，你会看到未暂存的更改文件列表。点击文件前的 + 号将其添加到暂存区。
    • 提交：在底部的输入框中输入提交信息（如“Initial commit”），然后点击“提交”按钮。
    • 推送：如果你的项目已关联远程仓库（如 GitHub），点击“同步更改”按钮（通常是一个向上和向下箭头的图标），按照提示输入远程仓库的用户名和密码（如果是首次推送），即可将本地提交推送到远程仓库。

七、扩展安装

VS Code 的强大之处还在于其丰富的扩展生态。点击侧边栏的“扩展”图标（通常是一个四方格子的图标），在搜索框中输入你需要的扩展名称（如用于 Python 开发的“Python”扩展，用于代码格式化的“Prettier - Code formatter”等），然后点击“安装”按钮进行安装。安装完成后，根据扩展的说明进行相应配置（有些扩展可能无需额外配置即可使用）。

八、总结与建议

通过以上介绍，你已经了解了 VS Code 的基础操作，包括安装启动、界面熟悉、文件操作、编辑技巧、代码片段与智能提示、保存和版本控制以及扩展安装等。建议你在实际项目中多多练习这些操作，随着使用的深入，你会发现 VS Code 还有更多高级功能（如调试功能等）可以提升你的开发效率。持续学习和探索 VS Code 的各种功能，将有助于你成为更高效的开发者。

文章版权声明：除非注明，否则均为Dark零点博客原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

目录[+]