Cursorでの自動コードフォーマット

ヒント

Cursorは、プロジェクト全体で一貫したコードスタイルを維持するための強力なコードフォーマット機能を提供しています。

フォーマッターの設定

組み込みフォーマッター

Cursorには複数の言語をサポートする組み込みフォーマッターが付属しています。使用方法：

1. コマンドパレットを開く（Ctrl/Cmd + Shift + P）
2. 「Format Document」と入力
3. Enterキーを押す

人気のフォーマッター

Prettier

# Prettierをインストール
npm install --save-dev prettier

# 設定ファイルを作成
echo {} > .prettierrc.json

ESLint

# ESLintをインストール
npm install --save-dev eslint

# ESLintを初期化
npx eslint --init

設定ファイル

Prettier設定

.prettierrc.json

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

ESLint設定

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

保存時のフォーマット

自動フォーマットを有効にする

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

言語固有の設定

{
  "[python]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "ms-python.python"
  },
  "[java]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "redhat.java"
  }
}

キーボードショートカット

デフォルトのフォーマットショートカット：

アクション	Windows/Linux	macOS
ドキュメントのフォーマット	Shift + Alt + F	Shift + Option + F
選択範囲のフォーマット	Ctrl + K Ctrl + F	Cmd + K Cmd + F

高度な設定

ファイルを無視する

.prettierignore

# ビルド出力
dist/
build/

# 依存関係
node_modules/

# 生成されたファイル
*.generated.*

ESLintとの統合

.eslintrc.json

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

カスタムフォーマットルール

スタイルガイドの適用

.prettierrc.json

{
  "overrides": [
    {
      "files": "*.component.ts",
      "options": {
        "printWidth": 120,
        "singleQuote": true
      }
    },
    {
      "files": "*.spec.ts",
      "options": {
        "printWidth": 80,
        "semi": true
      }
    }
  ]
}

プロジェクト固有のルール

.editorconfig

root = true

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

[*.{js,ts}]
quote_type = single

[*.py]
indent_size = 4

トラブルシューティング

一般的な問題

1. フォーマットが機能しない

   • フォーマッターのインストールを確認
   • 設定ファイルを確認
   • ファイルが無視リストに入っていないことを確認

2. ツール間の競合

   .vscode/settings.json

   {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
     },
     "eslint.format.enable": false
   }

3. パフォーマンスの問題

   {
     "editor.formatOnSaveTimeout": 5000,
     "editor.formatOnPaste": false
   }

ベストプラクティス

1. バージョン管理

.gitignore

# フォーマット設定ファイルは無視しない
!.prettierrc
!.eslintrc
!.editorconfig

# キャッシュファイルは無視する
.prettier-cache
.eslintcache

2. チームの一貫性

共有設定を作成する：

.vscode/extensions.json

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}

3. プリコミットフック

package.json

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}

IDE統合

カスタムキーバインディング

keybindings.json

[
  {
    "key": "ctrl+shift+i",
    "command": "editor.action.formatDocument",
    "when": "editorHasDocumentFormattingProvider"
  }
]

ワークスペース設定

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true
}

ヒント

チーム全体で一貫したフォーマットを確保するために、フォーマット設定ファイルをコミットすることを忘れないでください！

関連リソース

• Cursorフォーマットガイド
• Prettierドキュメント
• ESLint設定