余温Gueen 余温Gueen
余温Gueen
余温Gueen
-- : -- : --
-- : -- : --
余温Gueen 工具 VSCode 开发工具 效率 编辑器
675 字
4 分钟

为什么选择 VS Code？

Visual Studio Code 是目前最流行的代码编辑器之一：

  • 🆓 完全免费 - 开源免费
  • ⚡ 轻量快速 - 启动速度快
  • 🔌 丰富的扩展 - 海量插件生态
  • 🎨 高度可定制 - 灵活配置
  • 🐛 强大的调试 - 内置调试工具

必装扩展推荐

通用效率工具

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{
  "recommendations": [
    "esbenp.prettier-vscode",           // 代码格式化
    "dbaeumer.vscode-eslint",           // ESLint
    "eamodio.gitlens",                  // Git 增强
    "usernamehw.errorlens",             // 错误提示增强
    "christian-kohler.path-intellisense", // 路径自动补全
    "formulahendry.auto-rename-tag",    // 自动重命名标签
    "naumovs.color-highlight",          // 颜色高亮
    "streetsidesoftware.code-spell-checker" // 拼写检查
  ]
}

语言特定扩展

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// Go
"golang.go"

// Python
"ms-python.python"
"ms-python.vscode-pylance"

// JavaScript/TypeScript
"dbaeumer.vscode-eslint"
"esbenp.prettier-vscode"

// Vue
"Vue.volar"

// Markdown
"yzhang.markdown-all-in-one"
"shd101wyy.markdown-preview-enhanced"

核心配置

编辑器配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

{
  // 编辑器外观
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 24,
  "editor.letterSpacing": 0.5,

  // 编辑器行为
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": true,
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 光标和选择
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": true,
  "editor.smoothScrolling": true,

  // 括号配对
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",

  // 建议和自动完成
  "editor.suggestSelection": "first",
  "editor.quickSuggestions": {
    "strings": true
  }
}

工作区配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
  // 文件和搜索
  "files.autoSave": "onFocusChange",
  "files.encoding": "utf8",
  "files.eol": "\n",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  // 排除文件
  "files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/__pycache__": true,
    "**/*.pyc": true
  },

  // 搜索排除
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true
  }
}

终端配置

1
2
3
4
5
6
7
8

{
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.defaultProfile.linux": "bash"
}

快捷键配置

自定义快捷键

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

[
  // 快速打开文件
  {
    "key": "cmd+p",
    "command": "workbench.action.quickOpen"
  },

  // 多光标编辑
  {
    "key": "cmd+d",
    "command": "editor.action.addSelectionToNextFindMatch"
  },

  // 代码折叠
  {
    "key": "cmd+k cmd+0",
    "command": "editor.foldAll"
  },
  {
    "key": "cmd+k cmd+j",
    "command": "editor.unfoldAll"
  },

  // 终端切换
  {
    "key": "ctrl+`",
    "command": "workbench.action.terminal.toggleTerminal"
  }
]

常用快捷键

功能Windows/LinuxmacOS
命令面板Ctrl+Shift+PCmd+Shift+P
快速打开Ctrl+PCmd+P
全局搜索Ctrl+Shift+FCmd+Shift+F
切换侧边栏Ctrl+BCmd+B
多光标Alt+ClickOption+Click
复制行Shift+Alt+↓Shift+Option+↓
移动行Alt+↓Option+↓

代码片段

自定义代码片段

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

// JavaScript React Component
{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react'",
      "",
      "export default function ${1:ComponentName}() {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  )",
      "}"
    ]
  }
}

Go 代码片段

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "HTTP Handler": {
    "prefix": "httphandler",
    "body": [
      "func ${1:handlerName}(w http.ResponseWriter, r *http.Request) {",
      "\t$0",
      "}"
    ]
  }
}

主题和图标

推荐主题

  • One Dark Pro - 流行的暗色主题
  • Dracula - 经典紫色主题
  • GitHub Theme - 清新明亮
  • Material Theme - Material Design 风格

图标主题

1
2
3
4

{
  "workbench.iconTheme": "material-icon-theme",
  "material-icon-theme.folders.theme": "specific"
}

调试配置

launch.json 示例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    },
    {
      "name": "Go: Launch Package",
      "type": "go",
      "request": "launch",
      "mode": "auto",
      "program": "${fileDirname}"
    },
    {
      "name": "Node.js: Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

工作区管理

多项目工作区

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

{
  "folders": [
    {
      "name": "Frontend",
      "path": "./frontend"
    },
    {
      "name": "Backend",
      "path": "./backend"
    }
  ],
  "settings": {
    "editor.formatOnSave": true
  }
}

性能优化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{
  // 禁用不必要的功能
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "selection",

  // 限制扩展
  "extensions.autoUpdate": false,

  // 文件监控优化
  "files.watcherExclude": {
    "**/.git/objects/**": true,
    "**/node_modules/**": true
  }
}

同步设置

Settings Sync

  1. 点击左下角齿轮图标
  2. 选择 “Turn on Settings Sync”
  3. 选择要同步的内容
  4. 使用 GitHub/Microsoft 账号登录

总结

通过合理的配置和扩展，VS Code 可以成为一个强大的开发利器。根据自己的需求定制，才能发挥最大效率。

📡
👤 作者: 余温Gueen
🔗 链接: https://xxdevops.cn/tools/jtpig/
🌐 版权: 本站文章除特别声明外，均采用 CC BY-NC-SA 4.0 协议，转载请注明来自 余温Gueen Blog！
推荐使用微信支付
微信支付二维码
推荐使用支付宝
支付宝二维码
最新文章