チーム開発で VSCodeの拡張機能や設定を統一 するテンプレートを作ると、
全員の開発環境で ESLint/Prettier のルールや警告が同じになり、コードスタイルの不一致やバグを減らせます。
目的
- 全員が同じルールで自動整形・警告を受け取れる
finally 内 return/throwなど危険な構文も統一的に検出- チームで共有可能な
.vscode設定と拡張推奨リスト
1️⃣ VSCode拡張の推奨リスト（.vscode/extensions.json）
{
"recommendations": [
"dbaeumer.vscode-eslint", // ESLint
"esbenp.prettier-vscode", // Prettier
"eamodio.gitlens" // GitLens（任意）
],
"unwantedRecommendations": []
}
- プロジェクトを開くと VSCode が「この拡張を推奨します」と表示
- チーム全員が同じ拡張を使える
2️⃣ VSCodeワークスペース設定（.vscode/settings.json）
{
// 保存時に ESLint と Prettier を自動で適用
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// ESLintの対象ファイル
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"eslint.alwaysShowStatus": true,
// デフォルトの整形ツールをPrettierに統一
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
// 保存時にPrettierで自動整形
"prettier.requireConfig": true
}
✅ ポイント：
prettier.requireConfig: trueでプロジェクトに Prettier 設定がある場合のみ適用editor.codeActionsOnSaveで ESLint の修正も同時に適用- 保存時にコードが自動で整形され、チーム全員のスタイルが統一
3️⃣ ESLint + Prettier 設定例（.eslintrc.json と prettier.config.js）
.eslintrc.json
{
"env": { "browser": true, "es2021": true },
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"parserOptions": { "ecmaVersion": "latest", "sourceType": "module" },
"rules": {
"no-unsafe-finally": "error",
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
prettier.config.js
module.exports = {
semi: true,
singleQuote: false,
trailingComma: "es5",
bracketSpacing: true,
arrowParens: "always"
};
💡 これで ESLint と Prettier が競合せず、全員同じ整形・警告ルールで開発可能
4️⃣ チームでの使い方
- この
.vscodeと ESLint/Prettier 設定ファイルを Git にコミット - メンバーが VSCode でプロジェクトを開くと、推奨拡張が通知される
- 保存すると自動整形と ESLint チェックが実行され、コードスタイルが統一される
5️⃣ メリット
| メリット | 説明 |
|---|---|
| コード品質の向上 | finally 内の危険な return/throw も自動警告 |
| チームのスタイル統一 | インデント、セミコロン、クォーテーションが全員同じ |
| 開発効率アップ | 保存時に自動修正 → PR前の手作業チェック不要 |
| 新人でも安心 | 推奨拡張を入れるだけで環境が整う |
💡 補足：
- TypeScript が混在する場合は
@typescript-eslint/eslint-pluginを追加して、.eslintrc.jsonを拡張 - Prettier のルールもチームで合意の上、必要なら
.prettierrcやprettier.config.jsを調整
