VS Code 插件推荐与配置优化

用了五年 VS Code，踩过不少坑，也积累了一些配置经验。

必装插件

通用开发

插件	作用	推荐度
ESLint	代码检查	⭐⭐⭐⭐⭐
Prettier	代码格式化	⭐⭐⭐⭐⭐
GitLens	Git 增强	⭐⭐⭐⭐⭐
Error Lens	行内错误提示	⭐⭐⭐⭐
Code Spell Checker	拼写检查	⭐⭐⭐⭐
EditorConfig	统一编辑器配置	⭐⭐⭐⭐

前端开发

插件	作用	推荐度
Vue - Official	Vue 语法支持	⭐⭐⭐⭐⭐
ES7+ React Snippets	React 代码片段	⭐⭐⭐⭐
Tailwind CSS IntelliSense	Tailwind 智能提示	⭐⭐⭐⭐⭐
Auto Rename Tag	标签重命名	⭐⭐⭐⭐
Path Intellisense	路径提示	⭐⭐⭐

提效工具

插件	作用	推荐度
GitHub Copilot	AI 补全	⭐⭐⭐⭐⭐
Turbo Console Log	快速插入 console	⭐⭐⭐⭐
TODO Highlight	TODO 高亮	⭐⭐⭐⭐
Live Server	本地服务器	⭐⭐⭐
REST Client	HTTP 请求测试	⭐⭐⭐⭐

VS Code 界面

settings.json 配置

{
  // 字体
  "editor.fontFamily": "JetBrains Mono, Menlo, monospace",
  "editor.fontSize": 14,
  "editor.fontLigatures": true,

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

  // 性能优化
  "files.watcherExclude": {
    "**/.git/**": true,
    "**/node_modules/**": true,
    "**/dist/**": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true
  },

  // 界面
  "editor.minimap.enabled": false,
  "editor.lineNumbers": "relative",
  "editor.renderWhitespace": "boundary",
  "workbench.editor.enablePreview": false,

  // Git
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,

  // Emmet
  "emmet.includeLanguages": {
    "vue": "html",
    "javascript": "javascriptreact"
  }
}

快捷键

常用快捷键，背下来效率翻倍：

功能	Mac	Windows
命令面板	Cmd+Shift+P	Ctrl+Shift+P
快速打开文件	Cmd+P	Ctrl+P
全局搜索	Cmd+Shift+F	Ctrl+Shift+F
多光标	Alt+Click	Alt+Click
复制当前行	Cmd+Shift+K	Ctrl+Shift+K
移动当前行	Alt+Up/Down	Alt+Up/Down
格式化代码	Shift+Alt+F	Shift+Alt+F
终端	Ctrl+`	Ctrl+`

快捷键提示

性能优化

禁用不必要的插件

插件多了会卡。只在需要的项目启用：

// .vscode/settings.json
{
  "extensions.ignoreRecommendations": true
}

大文件处理

{
  "files.maxMemoryForLargeFilesMB": 4096,
  "editor.largeFileOptimizations": true
}

排除目录

{
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true
  }
}

代码片段

自定义 snippet 提效：

// .vscode/javascript.code-snippets
{
  "Console Log": {
    "prefix": "clg",
    "body": ["console.log('$1:', $1);"],
    "description": "Console log with variable name"
  },
  "React Component": {
    "prefix": "rfc",
    "body": [
      "function ${1:ComponentName}() {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  )",
      "}",
      "",
      "export default ${1:ComponentName}"
    ]
  }
}

工作区配置

团队协作时，项目根目录放 .vscode/settings.json：

{
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "typescript.tsdk": "node_modules/typescript/lib",
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue"
  ]
}

保证团队配置一致。

终端配置

内置终端很好用：

{
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "JetBrains Mono",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.defaultProfile.windows": "PowerShell"
}

远程开发

Remote - SSH 插件远程开发神器：

{
  "remote.SSH.remoteServerListenOnSocket": true,
  "remote.SSH.showLoginTerminal": true
}

配置 ~/.ssh/config：

Host myserver
  HostName 192.168.1.100
  User deploy
  IdentityFile ~/.ssh/id_rsa

总结

VS Code 的强大在于扩展生态。但插件不是越多越好，选对自己有用的。

我的原则：

功能重复的只留一个
不常用的禁用
团队统一配置

工具是为了提效，别花太多时间折腾配置。