Vue.js

Appearance

On this page

序言 ​

为什么写这本书 ​

作为一名前端开发者，你可能已经听说过 Vim 的传说：那些"Vim 大神"在键盘上飞速操作，完全不需要鼠标，编码效率惊人。你也许尝试过学习 Vim，掌握了基本的 hjkl 移动和 i、a 插入，甚至能够熟练使用 dd、yy、p 进行简单的编辑操作。

但是，当你回到日常的前端开发工作中，面对 React 组件、TypeScript 类型定义、复杂的 CSS 布局时，你发现：

  • 基础的 Vim 操作不够用，很多场景下还是要用鼠标
  • VSCode 的强大功能（如 IntelliSense、多光标、命令面板）似乎与 Vim 模式格格不入
  • 配置 VSCode Vim 插件遇到各种问题，不知道如何调优
  • 想要进阶，但不知道从哪里入手

这本书就是为你而写。

我深知前端开发者的痛点：我们需要的不是纯粹的 Vim 哲学，而是 在 VSCode 这个现代编辑器中，如何用 Vim 的方式高效完成真实的前端开发任务。

这本书能带给你什么 ​

🎯 10 倍效率提升，不是空谈 ​

本书不会告诉你"Vim 很强大"这样的空话，而是通过：

  • 48 个章节的系统化训练，覆盖从基础到专家的完整路径
  • 真实的前端开发场景：React 组件重构、批量 API 修改、复杂表单构建...
  • 可量化的效率对比：用数据说话，展示键盘驱动开发的真实收益

⚡ 专为前端开发者设计 ​

  • HTML/JSX 快速编辑：处理嵌套标签、属性修改的最佳实践
  • CSS/SCSS 高效操作：选择器、属性、响应式代码的快速编写
  • TypeScript 重构技巧：类型定义、接口修改、导入语句调整
  • Vue/React 工作流：单文件组件、JSX、Hooks 的专项优化

🚀 VSCode Vim 特有功能深度讲解 ​

不同于传统 Vim，VSCode Vim 插件有许多独特的功能：

  • EasyMotion：两次击键跳转到屏幕任意位置
  • Vim Surround：快速修改括号、引号、标签
  • 多光标与 Vim 结合：批量编辑的终极方案
  • VSCode 命令面板集成：Vim 模式下的无缝调用

🔧 从配置困难到配置自如 ​

本书将彻底解决你的配置难题：

  • settings.json 配置详解：每个选项的含义和最佳实践
  • keybindings.json 自定义：打造个性化的快捷键系统
  • 故障排查指南：常见问题的诊断与解决方案
  • 专家级配置模板：拿来即用的完整配置方案

这本书的特色 ​

📚 系统化学习路径 ​

全书分为 10 个部分，从基础到专家，循序渐进：

  1. 基础强化：重新认识 Vim 的思维模式
  2. 配置入门：快速搭建你的 VSCode Vim 环境
  3. 特有功能：掌握 VSCode Vim 的独特优势
  4. 多光标进阶：批量编辑的强大武器
  5. 高级技巧：搜索、替换、导航的深度应用
  6. 前端场景：真实开发任务的实战演练
  7. 工具整合：Git、调试、代码片段的协同
  8. 效率优化：从量化角度提升编码速度
  9. 专家配置：Neovim 集成、性能调优
  10. 实战案例：完整的工作日演示

💡 实用主义 + 理解优先 ​

本书采用"平衡型"写作风格：

  • 关键概念深入讲解：理解 Vim 的"动词-文本对象"模型，建立正确的思维方式
  • 具体操作实用为主：快捷键、配置、命令直接给出，拿来即用
  • 最佳实践贯穿全书：每个技巧都经过实战检验，避免"纸上谈兵"

🎬 真实案例 + 工作流演示 ​

第十部分提供 5 个完整的实战案例：

  • 案例 1：重构一个 React 组件（涉及 JSX、Props、Hooks）
  • 案例 2：批量修改 API 调用（正则表达式 + 多光标）
  • 案例 3：复杂表单快速构建（Snippets + Vim 命令组合）
  • 案例 4：代码审查快速导航（标记、跳转、分屏）
  • 完整工作日演示：从早上打开编辑器到晚上提交代码的全流程

📖 丰富的附录资源 ​

  • Vim 命令速查表：按类别整理，方便查阅
  • 配置模板：拿来即用的 settings.json 和 keybindings.json
  • 推荐插件：与 VSCode Vim 完美配合的扩展
  • 学习资源：社区、文档、视频教程推荐
  • 故障排查指南：快速定位和解决问题

如何阅读这本书 ​

适合你吗？ ​

这本书适合：

  • ✅ 掌握基础 Vim 操作（hjkl、i/a/o、d/y/p），想要进阶
  • ✅ 前端开发者（React/Vue/Angular/纯 JavaScript 均可）
  • ✅ 感觉当前编码效率遇到瓶颈，想要突破
  • ✅ 使用或计划使用 VSCode 作为主力编辑器
  • ✅ 希望摆脱鼠标依赖，形成键盘驱动工作流

不适合：

  • ❌ 完全不了解 Vim 的读者（建议先学习 Vim 基础教程，如 vimtutor）
  • ❌ 不使用 VSCode 的读者（本书专注于 VSCode Vim 插件）
  • ❌ 只想快速了解几个技巧的读者（本书是系统化教程，需要完整学习）

阅读建议 ​

初学者路径（建议按顺序阅读）：

  1. 第一部分：强化 Vim 基础，建立正确的思维模型
  2. 第二部分：完成 VSCode Vim 的配置
  3. 第三部分：学习 VSCode Vim 的特有功能
  4. 第六部分：在真实的前端开发场景中实践
  5. 第十部分：通过案例巩固所学

进阶者路径（可跳读）：

  • 如果基础扎实：跳过第一部分，从第二部分开始
  • 如果只想优化配置：重点阅读第二部分 + 第九部分
  • 如果想提升某个场景的效率：直接阅读第六部分对应章节
  • 如果想学习高级技巧：重点阅读第四、五、九部分

专家路径（查阅式阅读）：

  • 直接查阅第九部分的专家级配置
  • 参考第十部分的实战案例
  • 使用附录作为速查手册

配套资源 ​

  • 配置文件仓库：本书所有配置文件均可在 GitHub 仓库中找到
  • 视频演示：部分复杂操作提供视频演示链接
  • 练习项目：提供示例项目供你实践

开始你的进阶之旅 ​

现在，让我们一起开启这段旅程。

记住：Vim 不是目的，高效的开发才是。 我们学习 Vim，是为了把更多精力放在思考和创造上，而不是被繁琐的编辑操作束缚。

当你读完这本书，你将：

  • ⚡ 编码速度提升 10 倍
  • ⌨️ 完全不依赖鼠标
  • 🧠 形成"思考即实现"的流畅体验
  • 🚀 成为团队中的效率标杆

让我们开始吧！

作者
2025 年 12 月

在 GitHub 上编辑此页