VSCode 插件与配置分享

工欲善其事，必先利其器。一个好的编辑器配置能大幅提升开发效率

必装插件#

1. 代码质量#

1
{
2
  "recommendations": [
3
    "dbaeumer.vscode-eslint",        // ESLint
4
    "esbenp.prettier-vscode",        // Prettier
5
    "ms-vscode.vscode-typescript-next", // TypeScript
6
    "bradlc.vscode-tailwindcss"     // Tailwind CSS
7
  ]
8
}

2. 主题美化#

1
{
2
  "recommendations": [
3
    "github.github-vscode-theme",   // GitHub 主题
4
    "sdras.night-owl",              // 夜间猫头鹰
5
    "vscode-icons-team.vscode-icons" // 文件图标
6
  ]
7
}

3. 开发效率#

1
{
2
  "recommendations": [
3
    "eamodio.gitlens",               // Git 增强
4
    "formulahendry.auto-rename-tag", // 自动重命名标签
5
    "christian-kohler.path-intellisense", // 路径提示
6
    "usernamehw.errorlens"           // 错误展示
7
  ]
8
}

用户配置#

1
{
2
  // 字体配置
3
  "editor.fontSize": 14,
4
  "editor.fontFamily": "'JetBrains Mono', Fira Code, Consolas",
5
  "editor.fontLigatures": true,
6

7
  // 自动保存
8
  "files.autoSave": "afterDelay",
9
  "files.autoSaveDelay": 1000,
10

11
  // 代码格式化
12
  "editor.defaultFormatter": "esbenp.prettier-vscode",
13
  "editor.formatOnSave": true,
14

15
  // 缩进
16
  "editor.tabSize": 2,
17
  "editor.insertSpaces": true,
18

19
  // 预览
20
  "editor.minimap.enabled": true,
21
  "editor.renderWhitespace": "boundary",
22

23
  // Git
24
  "git.autofetch": true,
25
  "git.enableSmartCommit": true
26
}

快捷键技巧#

快捷键	功能
`Ctrl + Shift + P`	命令面板
`Ctrl + D`	选中下一个相同词
`Alt + ↑/↓`	移动代码行
`Ctrl + Shift + L`	选中所有相同词
`Ctrl + Shift + K`	删除整行
`F2`	重命名符号

TIP
在 VSCode 中按 Ctrl + K Ctrl + S 打开快捷键设置，可以自定义所有快捷键。

常用代码片段#

1
{
2
  "React 函数组件": {
3
    "prefix": "rfc",
4
    "body": [
5
      "import React from 'react'",
6
      "",
7
      "export default function ${1:ComponentName}(props) {",
8
      "  return (",
9
      "    <div>",
10
      "      $0",
11
      "    </div>",
12
      "  )",
13
      "}"
14
    ]
15
  }
16
}

调试配置#

1
{
2
  "version": "0.2.0",
3
  "configurations": [
4
    {
5
      "type": "node",
6
      "request": "launch",
7
      "name": "调试当前文件",
8
      "program": "${file}",
9
      "console": "integratedTerminal"
10
    },
11
    {
12
      "type": "chrome",
13
      "request": "launch",
14
      "name": "调试 Chrome",
15
      "url": "http://localhost:3000"
16
    }
17
  ]
18
}

主题推荐#

浅色主题#

GitHub Light
Solarized Light

深色主题#

Night Owl (强烈推荐)
Tokyo Night
Dracula

效率技巧#

1. 多光标编辑#

1
// 按 Alt + Click 添加光标
2
const a = 1;
3
const b = 2;  // 可以同时编辑多行
4
const c = 3;

2. 命令面板#

1
Ctrl + Shift + P

可以快速执行任何 VSCode 命令

3. 终端集成#

1
Ctrl + `

内置终端，不用切换窗口

总结#

一个好的开发环境需要：

合适的插件 - 按需安装，不要太多
舒适的配色 - 长时间编程不伤眼
高效的快捷键 - 减少鼠标操作
自动化配置 - 格式化、ESLint 自动运行