跳到主要内容

代码编辑器选择与配置

掌握VS Code，提升编程效率

编辑器概述​

为什么编辑器很重要​

代码编辑器是程序员每天使用最多的工具，一个好的编辑器能：

  • 提高编码效率
  • 减少低级错误
  • 提供智能提示
  • 集成开发工具

主流编辑器对比​

编辑器特点适合人群
VS Code免费、轻量、插件丰富所有人（推荐）
Sublime Text极速、轻量追求速度
Atom开源、可定制已停止维护
Vim/Neovim终端编辑器、效率极高高级用户
PyCharmPython专用IDEPython专业开发
WebStormWeb开发专用IDE前端专业开发

本章重点：VS Code​

为什么选择VS Code：

  1. 完全免费
  2. 跨平台（Windows/Mac/Linux）
  3. 插件生态丰富
  4. 更新活跃
  5. 社区庞大

VS Code 基础​

界面介绍​

┌─────────────────────────────────────────────────────┐
│  菜单栏                                              │
├────────┬────────────────────────────────────────────┤
│        │                                            │
│ 活动栏 │              编辑器区域                     │
│        │                                            │
│ ┌────┐ │  ┌─────────────────────────────────────┐  │
│ │资源│ │  │                                     │  │
│ │管理│ │  │         代码编辑区                   │  │
│ │器  │ │  │                                     │  │
│ ├────┤ │  └─────────────────────────────────────┘  │
│ │搜索│ │                                            │
│ ├────┤ │  ┌─────────────────────────────────────┐  │
│ │Git │ │  │         终端/输出面板                 │  │
│ ├────┤ │  └─────────────────────────────────────┘  │
│ │调试│ │                                            │
│ ├────┤ │                                            │
│ │插件│ │                                            │
│ └────┘ │                                            │
├────────┴────────────────────────────────────────────┤
│  状态栏                                              │
└─────────────────────────────────────────────────────┘

核心区域功能​

区域功能快捷键
资源管理器文件和文件夹Ctrl/Cmd + Shift + E
搜索全局搜索替换Ctrl/Cmd + Shift + F
源代码管理Git操作Ctrl/Cmd + Shift + G
调试运行和调试Ctrl/Cmd + Shift + D
插件安装管理插件Ctrl/Cmd + Shift + X
终端集成终端`Ctrl/Cmd + ``

必备快捷键​

文件操作​

操作WindowsMac
新建文件Ctrl + NCmd + N
打开文件Ctrl + OCmd + O
保存文件Ctrl + SCmd + S
关闭文件Ctrl + WCmd + W
打开文件夹Ctrl + K, Ctrl + OCmd + K, Cmd + O

编辑操作​

操作WindowsMac
复制行Ctrl + C (无选中时)Cmd + C
剪切行Ctrl + X (无选中时)Cmd + X
删除行Ctrl + Shift + KCmd + Shift + K
移动行Alt + ↑/↓Option + ↑/↓
复制行到上/下Shift + Alt + ↑/↓Shift + Option + ↑/↓
缩进TabTab
取消缩进Shift + TabShift + Tab
注释/取消注释Ctrl + /Cmd + /
块注释Shift + Alt + AShift + Option + A

光标操作​

操作WindowsMac
多光标Alt + ClickOption + Click
选中下一个相同词Ctrl + DCmd + D
选中所有相同词Ctrl + Shift + LCmd + Shift + L
回到上一个位置Alt + ←Ctrl + -
前进到下一个位置Alt + →Ctrl + Shift + -

搜索替换​

操作WindowsMac
当前文件搜索Ctrl + FCmd + F
当前文件替换Ctrl + HCmd + Option + F
全局搜索Ctrl + Shift + FCmd + Shift + F
全局替换Ctrl + Shift + HCmd + Shift + H

导航​

操作WindowsMac
跳转到文件Ctrl + PCmd + P
跳转到行Ctrl + GCmd + G
跳转到符号Ctrl + Shift + OCmd + Shift + O
打开命令面板Ctrl + Shift + PCmd + Shift + P

必装插件​

Python开发​

插件名作用
Python微软官方Python支持
Pylance智能提示和类型检查
Python Indent自动缩进
autoDocstring自动生成文档字符串

JavaScript开发​

插件名作用
ESLint代码规范检查
Prettier代码格式化
JavaScript (ES6) code snippets代码片段
Auto Rename Tag自动重命名HTML标签

通用插件​

插件名作用
Chinese (Simplified)中文界面
GitLensGit增强，显示代码作者
Material Icon Theme文件图标美化
Bracket Pair Colorizer括号颜色配对（新版已内置）
Path Intellisense路径自动补全
Error Lens行内显示错误
Code Spell Checker拼写检查
Todo TreeTODO标记管理

安装插件​

  1. 点击左侧活动栏的插件图标（或 Ctrl/Cmd + Shift + X）
  2. 搜索插件名
  3. 点击"安装"

配置优化​

打开设置​

  • 图形界面：Ctrl/Cmd + ,
  • JSON文件：Ctrl/Cmd + Shift + P → "Open Settings (JSON)"

推荐配置​

{
    // 编辑器
    "editor.fontSize": 14,
    "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": false,
    "editor.renderWhitespace": "selection",
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": true,
    "editor.cursorBlinking": "smooth",
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.smoothScrolling": true,

    // 自动保存
    "files.autoSave": "afterDelay",
    "files.autoSaveDelay": 1000,

    // 格式化
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",

    // 终端
    "terminal.integrated.fontSize": 14,

    // 文件
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,

    // Python专用
    "[python]": {
        "editor.defaultFormatter": "ms-python.python",
        "editor.tabSize": 4
    },

    // JavaScript/TypeScript专用
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

主题配置​

推荐主题：

  • One Dark Pro
  • Dracula Official
  • GitHub Theme
  • Solarized

安装主题：

  1. Ctrl/Cmd + Shift + X 打开插件
  2. 搜索主题名
  3. 安装后 Ctrl/Cmd + K, Ctrl/Cmd + T 选择主题

工作区设置​

什么是工作区​

工作区是VS Code管理项目的方式，可以：

  • 为不同项目设置不同配置
  • 保存打开的文件和布局
  • 管理多文件夹项目

创建工作区​

  1. 打开项目文件夹
  2. 文件 → 将工作区另存为
  3. 保存 .code-workspace 文件

项目级配置​

在项目根目录创建 .vscode/settings.json：

{
    "python.defaultInterpreterPath": "./venv/bin/python",
    "editor.tabSize": 2,
    "files.exclude": {
        "**/__pycache__": true,
        "**/.pytest_cache": true
    }
}

调试功能​

Python调试配置​

  1. 点击左侧调试图标
  2. 点击"创建 launch.json"
  3. 选择 Python
// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python: 当前文件",
            "type": "debugpy",
            "request": "launch",
            "program": "${file}",
            "console": "integratedTerminal"
        }
    ]
}

调试快捷键​

操作快捷键
开始调试F5
停止调试Shift + F5
单步跳过F10
单步进入F11
单步跳出Shift + F11
继续执行F5
添加断点F9

使用调试​

  1. 在代码行号左侧点击设置断点（红点）
  2. 按 F5 开始调试
  3. 程序会在断点处暂停
  4. 查看变量、调用堆栈
  5. 使用调试工具栏控制执行

集成终端​

打开终端​

  • 快捷键：Ctrl/Cmd + `
  • 菜单：终端 → 新建终端

终端配置​

{
    // 默认终端
    "terminal.integrated.defaultProfile.windows": "PowerShell",
    "terminal.integrated.defaultProfile.osx": "zsh",

    // 终端字体
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "JetBrains Mono"
}

多终端​

  • 点击 + 新建终端
  • 点击终端名称切换
  • 拖拽分割终端

代码片段​

使用内置代码片段​

输入缩写后按 Tab 展开：

  • Python: def → 函数模板
  • JavaScript: log → console.log()

自定义代码片段​

  1. Ctrl/Cmd + Shift + P
  2. 输入 "Snippets: Configure User Snippets"
  3. 选择语言（如 python.json）
{
    "Print Debug": {
        "prefix": "pd",
        "body": [
            "print(f\"DEBUG: $1 = {$1}\")"
        ],
        "description": "打印调试信息"
    },
    "Main Function": {
        "prefix": "main",
        "body": [
            "def main():",
            "    $0",
            "",
            "if __name__ == \"__main__\":",
            "    main()"
        ],
        "description": "主函数模板"
    }
}

Git集成​

基本操作​

  1. 点击左侧源代码管理图标
  2. 查看更改的文件
  3. 点击 + 暂存更改
  4. 输入提交信息
  5. 点击 ✓ 提交

GitLens插件​

安装后可以：

  • 行内显示最后修改者和时间
  • 文件历史记录
  • 分支对比
  • 代码作者追溯

效率技巧​

1. 快速打开文件​

Ctrl/Cmd + P 然后：
- 直接输入文件名
- : + 行号  跳转到行
- @ + 符号  跳转到符号
- # + 关键词  全局符号搜索

2. 命令面板​

Ctrl/Cmd + Shift + P
几乎所有功能都可以通过命令面板访问

3. 多光标编辑​

1. Alt/Option + Click  添加光标
2. Ctrl/Cmd + D  选中下一个相同词
3. Ctrl/Cmd + Shift + L  选中所有相同词

4. 快速重构​

F2  重命名符号
Ctrl/Cmd + .  快速修复建议

5. Emmet快速编写HTML​

输入 div.container>ul>li*3
按Tab展开为：
<div class="container">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

本章小结​

  1. VS Code是最佳选择：免费、强大、插件丰富
  2. 掌握快捷键：大幅提升效率
  3. 安装必要插件：Python、GitLens、Prettier
  4. 合理配置：根据个人习惯调整
  5. 使用调试功能：不要只靠print

下一步​

编辑器配置好了，接下来学习命令行基础。

→ 继续阅读：11-命令行基础教程