Vue.js

Appearance

On this page

专家级配置模板与最佳实践 ​

经过前面章节的学习，你已经掌握了 VSCode Vim 的各项技能：从基础的移动命令到高级的条件映射，从文件管理到 Git 工作流，从效率优化到跨平台同步。现在，是时候将这些知识整合起来，构建一套专家级的配置模板。

本章将提供一个完整、可用、经过实战检验的配置模板，涵盖 settings.json、keybindings.json 以及常用插件的推荐配置。你可以直接使用这套模板，也可以在此基础上进行定制。

配置哲学：简约、高效、可维护 ​

在开始之前，先明确我们的配置哲学：

  1. 简约优先：只保留真正有用的配置，避免过度配置
  2. 效率导向：每个配置都应该能够量化地提升效率
  3. 可维护性：配置应该有清晰的结构和注释，便于未来调整
  4. 渐进增强：从最小可用配置开始，逐步添加高级功能
  5. 跨平台兼容：尽可能在 Windows、macOS、Linux 上保持一致

专家级 settings.json 模板 ​

下面是一个完整的 settings.json 模板，分为几个部分：基础配置、Vim 配置、编辑器配置、终端配置、插件配置。

json
{
  // ===== 基础配置 =====
  // 自动保存
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  
  // 文件编码
  "files.encoding": "utf8",
  "files.eol": "\n",
  
  // 排除文件
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true
  },

  // ===== Vim 核心配置 =====
  "vim.easymotion": true,
  "vim.sneak": true,
  "vim.incsearch": true,
  "vim.useSystemClipboard": true,
  "vim.useCtrlKeys": true,
  "vim.hlsearch": true,
  "vim.leader": "<space>",
  "vim.timeout": 300,
  
  // Vim 模式切换优化
  "vim.statusBarColorControl": true,
  "vim.statusBarColors.normal": ["#005f5f", "#ffffff"],
  "vim.statusBarColors.insert": ["#5f0000", "#ffffff"],
  "vim.statusBarColors.visual": ["#5f00af", "#ffffff"],
  "vim.statusBarColors.visualline": ["#5f00af", "#ffffff"],
  "vim.statusBarColors.visualblock": ["#5f00af", "#ffffff"],
  "vim.statusBarColors.replace": ["#ff0000", "#ffffff"],

  // 处理输入法切换
  "vim.autoSwitchInputMethod.enable": true,
  "vim.autoSwitchInputMethod.defaultIM": "1033",
  "vim.autoSwitchInputMethod.obtainIMCmd": "im-select.exe",
  "vim.autoSwitchInputMethod.switchIMCmd": "im-select.exe {im}",

  // Vim 快捷键映射
  "vim.normalModeKeyBindingsNonRecursive": [
    // Leader 键映射
    // 文件操作
    {
      "before": ["<leader>", "f", "f"],
      "commands": ["workbench.action.quickOpen"]
    },
    {
      "before": ["<leader>", "f", "r"],
      "commands": ["workbench.action.openRecent"]
    },
    {
      "before": ["<leader>", "f", "s"],
      "commands": ["workbench.action.files.save"]
    },
    {
      "before": ["<leader>", "f", "a"],
      "commands": ["workbench.action.files.saveAll"]
    },
    
    // 窗口管理
    {
      "before": ["<leader>", "w", "v"],
      "commands": ["workbench.action.splitEditorRight"]
    },
    {
      "before": ["<leader>", "w", "s"],
      "commands": ["workbench.action.splitEditorDown"]
    },
    {
      "before": ["<leader>", "w", "q"],
      "commands": ["workbench.action.closeActiveEditor"]
    },
    {
      "before": ["<leader>", "w", "o"],
      "commands": ["workbench.action.closeOtherEditors"]
    },
    
    // Git 操作
    {
      "before": ["<leader>", "g", "s"],
      "commands": ["workbench.view.scm"]
    },
    {
      "before": ["<leader>", "g", "c"],
      "commands": ["git.commit"]
    },
    {
      "before": ["<leader>", "g", "p"],
      "commands": ["git.push"]
    },
    {
      "before": ["<leader>", "g", "d"],
      "commands": ["git.openChange"]
    },
    
    // 搜索
    {
      "before": ["<leader>", "s", "s"],
      "commands": ["workbench.action.findInFiles"]
    },
    {
      "before": ["<leader>", "s", "r"],
      "commands": ["workbench.action.replaceInFiles"]
    },
    
    // 代码操作
    {
      "before": ["<leader>", "c", "a"],
      "commands": ["editor.action.quickFix"]
    },
    {
      "before": ["<leader>", "c", "r"],
      "commands": ["editor.action.rename"]
    },
    {
      "before": ["<leader>", "c", "f"],
      "commands": ["editor.action.formatDocument"]
    },
    
    // 快速跳转
    {
      "before": ["g", "d"],
      "commands": ["editor.action.revealDefinition"]
    },
    {
      "before": ["g", "r"],
      "commands": ["references-view.findReferences"]
    },
    {
      "before": ["g", "i"],
      "commands": ["editor.action.goToImplementation"]
    },
    
    // 窗口导航
    {
      "before": ["<C-h>"],
      "commands": ["workbench.action.navigateLeft"]
    },
    {
      "before": ["<C-l>"],
      "commands": ["workbench.action.navigateRight"]
    },
    {
      "before": ["<C-k>"],
      "commands": ["workbench.action.navigateUp"]
    },
    {
      "before": ["<C-j>"],
      "commands": ["workbench.action.navigateDown"]
    }
  ],

  "vim.visualModeKeyBindingsNonRecursive": [
    // Visual 模式快捷键
    {
      "before": ["<leader>", "c"],
      "commands": ["editor.action.commentLine"]
    },
    {
      "before": [">"],
      "commands": ["editor.action.indentLines"]
    },
    {
      "before": ["<"],
      "commands": ["editor.action.outdentLines"]
    }
  ],

  // ===== 编辑器配置 =====
  "editor.fontSize": 14,
  "editor.fontFamily": "'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.6,
  "editor.cursorBlinking": "solid",
  "editor.cursorStyle": "line",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.smoothScrolling": true,
  
  // 行号与缩进
  "editor.lineNumbers": "relative",
  "editor.rulers": [80, 120],
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": true,
  
  // 代码提示与补全
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  },
  "editor.suggestSelection": "first",
  "editor.acceptSuggestionOnCommitCharacter": true,
  "editor.acceptSuggestionOnEnter": "on",
  "editor.tabCompletion": "on",
  
  // 格式化
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
  
  // 代码操作
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  
  // 括号配对与高亮
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  
  // 小地图
  "editor.minimap.enabled": false,
  
  // 空白字符
  "editor.renderWhitespace": "selection",
  
  // 折叠
  "editor.folding": true,
  "editor.foldingStrategy": "indentation",

  // ===== 工作台配置 =====
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "none",
  "workbench.editor.enablePreview": false,
  "workbench.editor.limit.enabled": true,
  "workbench.editor.limit.value": 10,
  
  // 侧边栏
  "workbench.sideBar.location": "left",
  "workbench.activityBar.visible": true,
  
  // 面包屑
  "breadcrumbs.enabled": true,

  // ===== 终端配置 =====
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "'Cascadia Code', Consolas, monospace",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.scrollback": 10000,
  
  // Windows 终端
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.profiles.windows": {
    "PowerShell": {
      "source": "PowerShell",
      "icon": "terminal-powershell"
    },
    "Git Bash": {
      "path": "C:\\Program Files\\Git\\bin\\bash.exe",
      "icon": "terminal-bash"
    }
  },

  // ===== 插件配置 =====
  // GitLens
  "gitlens.currentLine.enabled": true,
  "gitlens.hovers.enabled": true,
  "gitlens.codeLens.enabled": false,
  
  // Prettier
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5",
  "prettier.semi": true,
  "prettier.printWidth": 100,
  
  // ESLint
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  
  // Auto Rename Tag
  "auto-rename-tag.activationOnLanguage": [
    "html",
    "xml",
    "php",
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  
  // Path Intellisense
  "path-intellisense.autoSlashAfterDirectory": true,
  "path-intellisense.extensionOnImport": true,

  // ===== 语言特定配置 =====
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.formatOnSave": false,
    "editor.wordWrap": "on"
  }
}

专家级 keybindings.json 模板 ​

keybindings.json 用于配置全局快捷键，补充 Vim 插件的键位映射。

json
[
  // ===== 解决快捷键冲突 =====
  // 禁用 Ctrl+K Ctrl+K 的默认行为
  {
    "key": "ctrl+k ctrl+k",
    "command": "-editor.action.deleteFromCursorToEnd"
  },
  
  // 禁用 Ctrl+D 的默认多光标行为（在 Vim 中我们不需要）
  {
    "key": "ctrl+d",
    "command": "-editor.action.addSelectionToNextFindMatch",
    "when": "editorFocus && vim.active"
  },

  // ===== 文件树导航（Vim 风格）=====
  {
    "key": "j",
    "command": "list.focusDown",
    "when": "explorerViewletFocus && !inputFocus"
  },
  {
    "key": "k",
    "command": "list.focusUp",
    "when": "explorerViewletFocus && !inputFocus"
  },
  {
    "key": "h",
    "command": "list.collapse",
    "when": "explorerViewletFocus && !inputFocus"
  },
  {
    "key": "l",
    "command": "list.expand",
    "when": "explorerViewletFocus && !inputFocus"
  },
  {
    "key": "o",
    "command": "list.select",
    "when": "explorerViewletFocus && !inputFocus"
  },

  // ===== 终端快捷键 =====
  {
    "key": "ctrl+`",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "ctrl+shift+`",
    "command": "workbench.action.terminal.new"
  },

  // ===== 跨平台快捷键 =====
  // Windows/Linux: Ctrl
  {
    "key": "ctrl+p",
    "command": "workbench.action.quickOpen",
    "when": "!isMac"
  },
  {
    "key": "ctrl+shift+p",
    "command": "workbench.action.showCommands",
    "when": "!isMac"
  },
  
  // macOS: Cmd
  {
    "key": "cmd+p",
    "command": "workbench.action.quickOpen",
    "when": "isMac"
  },
  {
    "key": "cmd+shift+p",
    "command": "workbench.action.showCommands",
    "when": "isMac"
  },

  // ===== 快速修复与重构 =====
  {
    "key": "ctrl+.",
    "command": "editor.action.quickFix",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "f2",
    "command": "editor.action.rename",
    "when": "editorTextFocus && !editorReadonly"
  },

  // ===== 导航快捷键 =====
  {
    "key": "alt+left",
    "command": "workbench.action.navigateBack"
  },
  {
    "key": "alt+right",
    "command": "workbench.action.navigateForward"
  },

  // ===== 搜索与替换 =====
  {
    "key": "ctrl+shift+f",
    "command": "workbench.action.findInFiles"
  },
  {
    "key": "ctrl+shift+h",
    "command": "workbench.action.replaceInFiles"
  },

  // ===== 面板管理 =====
  {
    "key": "ctrl+b",
    "command": "workbench.action.toggleSidebarVisibility",
    "when": "!editorTextFocus"
  },
  {
    "key": "ctrl+j",
    "command": "workbench.action.togglePanel"
  }
]

推荐插件列表 ​

以下是专家级配置推荐安装的插件，按类别分组：

核心插件（必装） ​

  1. Vim (vscodevim.vim)

    • VSCode Vim 模拟器，本书的核心

  2. GitLens (eamodio.gitlens)

    • Git 增强工具，显示代码作者、提交历史

  3. Prettier (esbenp.prettier-vscode)

    • 代码格式化工具

  4. ESLint (dbaeumer.vscode-eslint)

    • JavaScript/TypeScript 代码检查

效率插件 ​

  1. Path Intellisense (christian-kohler.path-intellisense)

    • 路径自动补全

  2. Auto Rename Tag (formulahendry.auto-rename-tag)

    • 自动重命名 HTML/JSX 标签

  3. Bracket Pair Colorizer 2 (CoenraadS.bracket-pair-colorizer-2)

    • 括号配对高亮（VSCode 1.60+ 内置，可不装）

  4. indent-rainbow (oderwat.indent-rainbow)

    • 缩进彩虹高亮

主题与图标 ​

  1. One Dark Pro (zhuangtongfa.Material-theme)

    • 流行的暗色主题

  2. Material Icon Theme (PKief.material-icon-theme)

    • 文件图标主题

语言支持 ​

  1. Volar (Vue.volar)

    • Vue 3 支持

  2. ES7+ React/Redux/React-Native snippets (dsznajder.es7-react-js-snippets)

    • React 代码片段

可选插件 ​

  1. vscode-icons (vscode-icons-team.vscode-icons)

    • 另一个文件图标主题

  2. CodeSnap (adpyke.codesnap)

    • 代码截图工具

  3. Todo Tree (Gruntfuggly.todo-tree)

    • TODO 注释高亮

安装命令 ​

在终端中执行以下命令，一键安装所有推荐插件：

bash
code --install-extension vscodevim.vim
code --install-extension eamodio.gitlens
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension christian-kohler.path-intellisense
code --install-extension formulahendry.auto-rename-tag
code --install-extension oderwat.indent-rainbow
code --install-extension zhuangtongfa.Material-theme
code --install-extension PKief.material-icon-theme
code --install-extension Vue.volar
code --install-extension dsznajder.es7-react-js-snippets

最佳实践与使用建议 ​

1. 配置文件管理 ​

  • 版本控制：将配置文件纳入 Git，便于追踪和回滚
  • 定期备份：每周备份一次配置到云端或外部存储
  • 注释说明：为每个配置项添加注释，说明其作用和调整理由
  • 模块化：将配置按功能分组，便于查找和维护

2. 渐进式学习 ​

不要一次性使用所有配置。推荐的学习路径：

第 1 周：基础配置

  • 安装 Vim 插件
  • 配置基础移动命令（h j k l）
  • 解决快捷键冲突

第 2 周：文件管理

  • 配置文件树 Vim 导航
  • 学习 Tab 管理快捷键
  • 使用 Leader 键进行文件操作

第 3 周：代码编辑

  • 学习文本对象和操作符
  • 配置代码跳转快捷键
  • 使用快速修复和重命名

第 4 周：高级功能

  • 配置 Git 工作流
  • 使用宏和寄存器
  • 优化搜索和替换

3. 性能优化 ​

如果 VSCode Vim 响应变慢，尝试以下优化：

json
{
  // 减少历史记录
  "vim.history": 50,
  
  // 禁用不必要的功能
  "vim.highlightedyank.enable": false,
  
  // 减少状态栏刷新
  "vim.statusBarColorControl": false,
  
  // 禁用搜索高亮
  "vim.hlsearch": false
}

4. 常见问题自检清单 ​

如果遇到问题，按以下顺序排查：

  • [ ] 检查 JSON 语法是否正确（逗号、括号是否匹配）
  • [ ] 检查快捷键是否冲突（使用 Ctrl+K Ctrl+S 查看）
  • [ ] 检查 Vim 插件是否启用（状态栏应显示 Vim 模式）
  • [ ] 重启 VSCode（某些配置需要重启才能生效）
  • [ ] 查看 VSCode 开发者工具（Help > Toggle Developer Tools）检查错误日志

5. 定制化建议 ​

这套配置模板是通用的，但你应该根据自己的需求进行调整：

  • 前端开发者：增加 JSX/TSX 相关的快捷键和代码片段
  • 后端开发者：配置调试快捷键，集成数据库工具
  • 写作者：启用 Markdown 预览，配置拼写检查
  • 数据科学家：安装 Jupyter 插件，配置 Python 环境

效率提升量化 ​

使用这套专家级配置模板，你可以实现：

配置效率：

  • 从零配置到可用环境：10-15 分钟（vs 手动配置的 2-3 小时）
  • 配置调整时间减少：70-80%（清晰的结构和注释）

开发效率：

  • 文件导航速度提升：3-5 倍（Vim 风格键位 + Leader 键）
  • 代码编辑速度提升：2-3 倍（文本对象 + 操作符组合）
  • Git 操作速度提升：4-6 倍（键盘化 Git 工作流）

学习成本：

  • 理解配置文件结构：20-30 分钟
  • 熟悉核心快捷键：1-2 周
  • 掌握所有功能：1-2 个月

长期收益：

  • 每天节省：30-60 分钟
  • 每周节省：3.5-7 小时
  • 每年节省：182-364 小时（相当于 23-46 个工作日）

总结 ​

这套专家级配置模板整合了本书所有的最佳实践，涵盖了从基础设置到高级功能的方方面面。它的设计原则是：简约、高效、可维护、跨平台兼容。

核心特性：

  1. 完整的 Vim 配置：EasyMotion、Sneak、Leader 键、状态栏提示
  2. 优化的快捷键系统：解决冲突、跨平台兼容、语义化命名
  3. 精选的插件列表：只保留最有用的插件，避免臃肿
  4. 详细的注释说明：每个配置项都有清晰的说明，便于理解和调整
  5. 渐进式学习路径：从基础到高级，循序渐进

你可以：

  1. 直接使用这套模板作为起点
  2. 根据自己的需求进行定制
  3. 定期回顾和优化配置
  4. 与团队分享你的最佳实践

下一步，我们将通过几个完整的实战案例，演示如何将这套配置应用到真实的开发工作流中。

在 GitHub 上编辑此页