VS Code 生产力指南

必备扩展

// 必备扩展列表
{
  "recommendations": [
    // 语言支持
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "ms-python.python",
    "ms-python.pylance",
    "golang.go",

    // Git
    "eamodio.gitlens",
    "mhutchie.git-graph",

    // AI 辅助
    "github.copilot",
    "github.copilot-chat",

    // 导航
    "alefragnani.bookmarks",
    "yzhang.markdown-all-in-one",

    // 生产力
    "formulahendry.code-runner",
    "streetsidesoftware.code-spell-checker",
    "editorconfig.editorconfig",

    // Docker/K8s
    "ms-azuretools.vscode-docker",
    "ms-kubernetes-tools.vscode-kubernetes-tools",

    // REST
    "humao.rest-client",
    "rangav.vscode-thunder-client"
  ]
}

工作区设置

// .vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, Fira Code, Cascadia Code",
  "editor.fontLigatures": true,
  "editor.minimap.enabled": false,
  "editor.suggestSelection": "first",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.rulers": [80, 100, 120],
  
  "terminal.integrated.fontFamily": "JetBrains Mono",
  "terminal.integrated.fontSize": 13,

  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/__pycache__": true
  },

  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  }
}

键绑定

// keybindings.json
[
  // 多光标
  { "key": "cmd+d", "command": "editor.action.addSelectionToNextFindMatch" },
  { "key": "cmd+shift+l", "command": "editor.action.selectHighlights" },

  // 导航
  { "key": "ctrl+tab", "command": "workbench.action.quickOpenPreviousRecentlyUsedEditor" },
  { "key": "cmd+shift+e", "command": "workbench.view.explorer" },
  { "key": "cmd+shift+g", "command": "workbench.view.scm" },

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

  // 代码操作
  { "key": "cmd+.", "command": "editor.action.quickFix" },
  { "key": "f2", "command": "editor.action.rename" },
  { "key": "shift+alt+f", "command": "editor.action.formatDocument" },

  // 折叠
  { "key": "cmd+shift+[", "command": "editor.fold" },
  { "key": "cmd+shift+]", "command": "editor.unfold" },
  { "key": "cmd+k cmd+0", "command": "editor.foldAll" },
  { "key": "cmd+k cmd+j", "command": "editor.unfoldAll" }
]

自定义代码片段

// typescript.json 代码片段
{
  "React Function Component": {
    "prefix": "rfc",
    "body": [
      "import type { FC } from 'react'",
      "",
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "",
      "export const ${1:Component}: FC<${1:Component}Props> = ({ $3 }) => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  )",
      "}",
      ""
    ]
  },
  "Console log with label": {
    "prefix": "cll",
    "body": ["console.log('${1:label}:', $1)"]
  },
  "Try catch async": {
    "prefix": "tca",
    "body": [
      "try {",
      "  $1",
      "} catch (error) {",
      "  console.error('${2:Error}:', error)",
      "  throw error",
      "}"
    ]
  }
}

调试配置

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Node.js",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/server.ts",
      "runtimeArgs": ["--loader", "ts-node/esm"],
      "sourceMaps": true,
      "envFile": "${workspaceFolder}/.env",
      "console": "integratedTerminal"
    },
    {
      "name": "Debug Jest",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/jest",
      "args": ["--runInBand", "--no-coverage", "${fileBasenameNoExtension}"],
      "sourceMaps": true,
      "console": "integratedTerminal"
    },
    {
      "name": "Attach to Docker",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "address": "localhost",
      "sourceMaps": true,
      "remoteRoot": "/app",
      "localRoot": "${workspaceFolder}"
    }
  ]
}

必备快捷键