VS Codeの自動整形を無効にする方法

VS Codeでファイルを保存するたびに自動的にコードが整形されてしまい、意図しない変更が加わる問題に悩まされたことはありませんか？特に他の開発者のコードを編集している場合、ほんの1行だけ変更したいのに、ファイル全体が整形されてしまうと、コードレビューが困難になります。この記事では、VS Codeの自動整形を完全に無効にする方法を詳しく解説します。

問題の根本原因

VS Codeでは、以下のような複数の要因によって自動整形が行われる可能性があります：

エディタの設定: editor.formatOnSave 設定
拡張機能: Prettier、ESLint、その他フォーマッタ拡張
言語固有の設定: 特定のファイルタイプに対する設定
ワークスペース設定: プロジェクト固有の .vscode/settings.json 設定

基本的な解決方法

1. 主要設定の変更

まずは基本的な設定から確認しましょう。VS Codeのユーザー設定（JSON）を開くには：

Ctrl + Shift + P（Windows/Linux）または Cmd + Shift + P（Mac）でコマンドパレットを開く
「Preferences: Open User Settings (JSON)」を検索して選択

以下の設定を追加または確認してください：

json

{
  "editor.formatOnSave": false,
  "editor.trimAutoWhitespace": false,
  "files.trimTrailingWhitespace": false,
  "files.trimFinalNewlines": false,
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": false
  }
}

WARNING

設定が正しい場所に適用されているか確認してください。ユーザー設定、ワークスペース設定、フォルダ設定の優先順位があります。問題が解決しない場合は、ワークスペースの .vscode/settings.json も確認しましょう。

2. 拡張機能の確認と設定

複数のフォーマッタ拡張機能が競合している場合があります：

json

{
  "prettier.disableLanguages": ["js", "javascript", "json", "html", "css"],
  "[javascript]": {
    "editor.defaultFormatter": null,
    "editor.formatOnSave": false
  },
  "[html]": {
    "editor.defaultFormatter": null,
    "editor.formatOnSave": false
  }
}

拡張機能の競合を解決する手順

問題のファイルを開く
右下の言語モード（例: "JavaScript"）をクリック
「Configure '[言語名]' language based settings...」を選択
競合するフォーマッタ設定を削除または無効化

高度な解決方法

キーバインドの変更

通常の保存操作でフォーマットをスキップしたい場合：

Ctrl + Shift + P でコマンドパレットを開く
「Preferences: Open Keyboard Shortcuts」を検索
「Save without Formatting」を検索
キーバインドを編集して Ctrl + S（Windows/Linux）または Cmd + S（Mac）に設定

キーボードショートカット設定例

json

// keybindings.json
{
  "key": "ctrl+s",
  "command": "workbench.action.files.saveWithoutFormatting",
  "when": "editorTextFocus"
}

特定のファイルタイプのみ無効化

すべてのファイルではなく、特定のファイルタイプのみ自動整形を無効化する方法：

json

{
  "editor.formatOnSave": true,
  "[markdown]": {
    "editor.formatOnSave": false
  },
  "[yaml]": {
    "editor.formatOnSave": false
  },
  "[plaintext]": {
    "editor.formatOnSave": false
  }
}

トラブルシューティング

自動整形が止まらない場合

すべての拡張機能を無効化してテスト
EditorConfig拡張機能を確認（これもフォーマットを適用する場合があります）
プロジェクトの .vscode/settings.json を一時的にリネームしてテスト

最終手段

どうしても解決しない場合は、問題のファイルの言語モードを「Plain Text」に変更すると、ほとんどのフォーマット処理が回避できます（ただしシンタックスハイライトは失われます）。

一時的な回避策

どうしても設定が機能しない場合の一時的な解決法：

Ctrl + K → S（Windows/Linux）または Cmd + K → S（Mac）で「保存 without Formatting」を実行
コマンドパレットから「Save without Formatting」を直接実行

まとめ

VS Codeの自動整形問題は、複数の設定や拡張機能が関与するため解決が難しい場合があります。基本的なアプローチとしては：

ユーザー設定で editor.formatOnSave を無効化
競合する拡張機能を特定して無効化または設定調整
必要に応じてキーバインドを変更

プロジェクトごとに異なる設定が必要な場合は、ワークスペース設定を適切に管理することが重要です。これらの方法を組み合わせることで、VS Codeの自動整形を完全に制御できるようになります。

関連記事

VS Codeの自動整形を無効にする方法 ​

問題の根本原因 ​

基本的な解決方法 ​

1. 主要設定の変更 ​

2. 拡張機能の確認と設定 ​

高度な解決方法 ​

キーバインドの変更 ​

特定のファイルタイプのみ無効化 ​

トラブルシューティング ​

自動整形が止まらない場合 ​

一時的な回避策 ​

まとめ ​

VS Codeの自動整形を無効にする方法

問題の根本原因

基本的な解決方法

1. 主要設定の変更

2. 拡張機能の確認と設定

高度な解決方法

キーバインドの変更

特定のファイルタイプのみ無効化

トラブルシューティング

自動整形が止まらない場合

一時的な回避策

まとめ