mcpField
V
vscode-workspace-setup

vscode-workspace-setup

github.com/patricio0312rev開発63297 回インストール41 週間前に更新
リポジトリ

vscode-workspace-setup について

開発チーム向けに、統一された VS Code ワークスペースを設定するスキルです。エディター設定、拡張機能、タスク、デバッグ、スニペット、任意の開発コンテナーを扱います。

主な機能

  1. 01ワークスペース設定ファイルの作成
  2. 02フォーマットと lint の設定
  3. 03チーム向け拡張機能の推奨
  4. 04ビルド・テストタスクの設定
  5. 05デバッグ設定とスニペットの追加
  6. 06開発コンテナーと EditorConfig の設定

活用シーン

  1. 01チーム内でエディター設定を統一
  2. 02共通のビルド・テストコマンドを設定
  3. 03プロジェクトにデバッグ環境とコンテナーを追加

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/patricio0312rev/skills --skill vscode-workspace-setup

インストール後、Claude Code で/vscode-workspace-setupを入力して読み込まれたか確認します。

詳細

VS Code ワークスペースのセットアップ

チームの生産性と一貫性を最大限に高められるよう、VS Code を設定します。

基本的なワークフロー

  1. ワークスペース設定を作成する：.vscode フォルダー
  2. エディターを設定する：フォーマット、Lint
  3. 拡張機能を追加する：チームで推奨する拡張機能
  4. タスクを設定する：ビルド、テスト、Lint
  5. デバッグを設定する：起動構成
  6. devcontainer を作成する：一貫した環境

ワークスペースの構成

.vscode/
├── settings.json        # Workspace settings
├── extensions.json      # Recommended extensions
├── tasks.json          # Build tasks
├── launch.json         # Debug configurations
└── snippets/           # Custom snippets
    └── typescript.json

ワークスペースの設定

// .vscode/settings.json
{
  // Editor settings
  "editor.formatOnSave": true,
  "editor.formatOnPaste": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.rulers": [100],
  "editor.wordWrap": "off",
  "editor.minimap.enabled": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "editor.inlineSuggest.enabled": true,
  "editor.quickSuggestions": {
    "strings": true
  },

  // Files
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.exclude": {
    "**/node_modules": true,
    "**/.git": true,
    "**/.DS_Store": true,
    "**/dist": true,
    "**/.next": true,
    "**/coverage": true
  },
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/.git/objects/**": true,
    "**/dist/**": true,
    "**/.next/**": true
  },
  "files.associations": {
    "*.css": "tailwindcss"
  },

  // Search
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.next": true,
    "**/coverage": true,
    "pnpm-lock.yaml": true,
    "package-lock.json": true
  },

  // TypeScript
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.quoteStyle": "single",
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.inlayHints.parameterNames.enabled": "literals",
  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
  "typescript.tsdk": "node_modules/typescript/lib",

  // JavaScript
  "javascript.preferences.importModuleSpecifier": "relative",
  "javascript.preferences.quoteStyle": "single",
  "javascript.updateImportsOnFileMove.enabled": "always",

  // ESLint
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "eslint.workingDirectories": [{ "mode": "auto" }],
  "eslint.codeActionsOnSave.mode": "problems",

  // Prettier
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.wordWrap": "on"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // Tailwind CSS
  "tailwindCSS.experimental.classRegex": [
    ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ],
  "tailwindCSS.includeLanguages": {
    "typescript": "javascript",
    "typescriptreact": "javascript"
  },

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

  // Terminal
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.scrollback": 10000,

  // Explorer
  "explorer.compactFolders": false,
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, .npmrc",
    "tsconfig.json": "tsconfig.*.json",
    ".eslintrc*": ".eslintignore, .prettierrc*, .prettierignore",
    "*.ts": "${capture}.test.ts, ${capture}.spec.ts",
    "*.tsx": "${capture}.test.tsx, ${capture}.spec.tsx"
  },

  // Debug
  "debug.javascript.autoAttachFilter": "smart",

  // Testing
  "testing.automaticallyOpenPeekView": "never"
}

推奨する拡張機能

// .vscode/extensions.json
{
  "recommendations": [
    // Essential
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",

    // TypeScript
    "ms-vscode.vscode-typescript-next",
    "yoavbls.pretty-ts-errors",

    // React
    "dsznajder.es7-react-js-snippets",
    "burkeholland.simple-react-snippets",

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

    // Testing
    "vitest.explorer",
    "orta.vscode-jest",

    // Utilities
    "streetsidesoftware.code-spell-checker",
    "christian-kohler.path-intellisense",
    "christian-kohler.npm-intellisense",
    "mikestead.dotenv",
    "EditorConfig.EditorConfig",

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

    // Debugging
    "ms-vscode.js-debug-nightly",

    // Docker
    "ms-azuretools.vscode-docker",
    "ms-vscode-remote.remote-containers"
  ],
  "unwantedRecommendations": [
    "hookyqr.beautify"
  ]
}

ビルドタスク

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "dev",
      "type": "npm",
      "script": "dev",
      "problemMatcher": [],
      "isBackground": true,
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      },
      "group": {
        "kind": "build",
        "isDefault": true
      }
    },
    {
      "label": "build",
      "type": "npm",
      "script": "build",
      "problemMatcher": ["$tsc"],
      "presentation": {
        "reveal": "always"
      },
      "group": "build"
    },
    {
      "label": "test",
      "type": "npm",
      "script": "test",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always"
      },
      "group": "test"
    },
    {
      "label": "test:watch",
      "type": "npm",
      "script": "test:watch",
      "problemMatcher": [],
      "isBackground": true,
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      },
      "group": "test"
    },
    {
      "label": "lint",
      "type": "npm",
      "script": "lint",
      "problemMatcher": ["$eslint-stylish"],
      "presentation": {
        "reveal": "never"
      }
    },
    {
      "label": "lint:fix",
      "type": "npm",
      "script": "lint:fix",
      "problemMatcher": ["$eslint-stylish"],
      "presentation": {
        "reveal": "never"
      }
    },
    {
      "label": "typecheck",
      "type": "npm",
      "script": "typecheck",
      "problemMatcher": ["$tsc-watch"],
      "presentation": {
        "reveal": "silent"
      }
    },
    {
      "label": "typecheck:watch",
      "type": "shell",
      "command": "npx tsc --noEmit --watch",
      "problemMatcher": ["$tsc-watch"],
      "isBackground": true,
      "presentation": {
        "reveal": "always",
        "panel": "dedicated"
      }
    }
  ]
}

デバッグ構成

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: Debug Server",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    },
    {
      "name": "Next.js: Debug Full Stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "- Local:.+(https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    },
    {
      "name": "Chrome: Debug Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack://_N_E/*": "${webRoot}/*"
      }
    },
    {
      "name": "Vite: Debug",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src",
      "sourceMaps": true
    },
    {
      "name": "Jest: Current File",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": [
        "${relativeFile}",
        "--config",
        "jest.config.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "name": "Vitest: Current File",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/vitest",
      "args": ["run", "${relativeFile}"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "name": "Node: Attach",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true
    },
    {
      "name": "Node: Current File",
      "type": "node",
      "request": "launch",
      "program": "${file}",
      "runtimeArgs": ["-r", "ts-node/register"],
      "console": "integratedTerminal"
    }
  ],
  "compounds": [
    {
      "name": "Full Stack Debug",
      "configurations": ["Next.js: Debug Server", "Chrome: Debug Client"]
    }
  ]
}

カスタムスニペット

// .vscode/snippets/typescript.json
{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:Component}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:Component}({ $3 }: ${1:Component}Props) {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "}"
    ],
    "description": "React Functional Component with TypeScript"
  },
  "React useState": {
    "prefix": "us",
    "body": [
      "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState<${2:type}>($3);"
    ],
    "description": "React useState hook"
  },
  "React useEffect": {
    "prefix": "ue",
    "body": [
      "useEffect(() => {",
      "  $1",
      "  return () => {",
      "    $2",
      "  };",
      "}, [$3]);"
    ],
    "description": "React useEffect hook"
  },
  "Console Log": {
    "prefix": "cl",
    "body": ["console.log('${1:label}:', $2);"],
    "description": "Console log with label"
  },
  "Async Function": {
    "prefix": "af",
    "body": [
      "async function ${1:name}(${2:params}): Promise<${3:void}> {",
      "  $0",
      "}"
    ],
    "description": "Async function"
  },
  "Try Catch": {
    "prefix": "tc",
    "body": [
      "try {",
      "  $1",
      "} catch (error) {",
      "  if (error instanceof Error) {",
      "    console.error(error.message);",
      "  }",
      "  throw error;",
      "}"
    ],
    "description": "Try catch with proper error handling"
  },
  "Zod Schema": {
    "prefix": "zod",
    "body": [
      "const ${1:Schema} = z.object({",
      "  ${2:field}: z.${3:string}(),",
      "});",
      "",
      "type ${1:Schema} = z.infer<typeof ${1:Schema}>;"
    ],
    "description": "Zod schema with type inference"
  }
}

Dev Container

// .devcontainer/devcontainer.json
{
  "name": "Node.js Development",
  "image": "mcr.microsoft.com/devcontainers/typescript-node:20",

  // Features to install
  "features": {
    "ghcr.io/devcontainers/features/github-cli:1": {},
    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
  },

  // Forward ports
  "forwardPorts": [3000, 5173],

  // Environment variables
  "containerEnv": {
    "NODE_ENV": "development"
  },

  // Run commands after container is created
  "postCreateCommand": "npm install",

  // VS Code settings for container
  "customizations": {
    "vscode": {
      "settings": {
        "terminal.integrated.defaultProfile.linux": "zsh"
      },
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "bradlc.vscode-tailwindcss",
        "github.copilot"
      ]
    }
  },

  // Mount volumes
  "mounts": [
    "source=${localWorkspaceFolder}/.git,target=/workspaces/${localWorkspaceFolderBasename}/.git,type=bind"
  ],

  // User configuration
  "remoteUser": "node"
}

EditorConfig

# .editorconfig
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

[*.{yml,yaml}]
indent_size = 2

[Makefile]
indent_style = tab

ベストプラクティス

  1. 設定をコミットする：.vscode をバージョン管理します
  2. ワークスペース設定を使用する：ユーザー設定ではなく、ワークスペース設定を使用します
  3. 拡張機能を推奨する：extensions.json を使用します
  4. タスクを設定する：共通の操作を設定します
  5. デバッグを設定する：起動構成を設定します
  6. スニペットを追加する：チームの規約に合わせます
  7. devcontainer を使用する：一貫した環境を実現します
  8. ファイルをネストする：エクスプローラーをすっきり保ちます

出力チェックリスト

すべての VS Code ワークスペースには、次の項目を含める必要があります。

  • ワークスペースの settings.json
  • 推奨する拡張機能の extensions.json
  • ビルド用の tasks.json
  • デバッグ用の launch.json
  • カスタムスニペット
  • EditorConfig
  • 保存時のフォーマットを有効化
  • ESLint との連携
  • デフォルトのフォーマッターとして Prettier を設定
  • DevContainer の設定（任意）

コメント

Markdown 対応