VS Codeでコードのインデントを自動整形する方法｜きれいにそろえて読みやすく！

プログラミング・IT

プログラミングをしていると、こんな経験はありませんか？

「コードを書いているうちに、インデントがぐちゃぐちゃになって見づらい」
「チームメンバーとインデントの幅がバラバラで統一感がない」
「タブとスペースが混在してしまっている」

きれいなインデントは、コードの可読性を大幅に向上させる重要な要素です。

しかし、手動でインデントを調整するのは時間がかかり、ミスも起こりやすいものです。

VS Codeなら、ショートカットや設定を使って簡単にインデントを自動整形できます。
一度設定すれば、常にきれいで統一されたコードを書けるようになります。

この記事では、VS Codeでインデントをきれいに整える方法や、保存時に自動で整形する設定を初心者にもわかりやすく解説します。

記事を読み終わる頃には、もうインデントで悩むことはなくなるでしょう。

スポンサーリンク

インデントの重要性とよくある問題

なぜインデントが重要なのか

インデントは単なる見た目の問題ではありません。以下のような重要な役割があります：

コードの構造を視覚的に表現

// インデントが正しい例
function processData(data) {
  if (data.length > 0) {
    for (let i = 0; i < data.length; i++) {
      console.log(data[i]);
    }
  }
}

// インデントが間違っている例
function processData(data) {
if (data.length > 0) {
for (let i = 0; i < data.length; i++) {
console.log(data[i]);
}
}
}

正しいインデントがあることで、ブロックの境界や階層構造が一目でわかります。

読みやすさの向上

  • ネストレベルが一目瞭然: どの処理がどのブロックに属するかすぐわかる
  • バグの発見が容易: 構造が見えることでロジックエラーを見つけやすい
  • 保守性の向上: 他の人がコードを読みやすくなる

チーム開発での統一感

  • コードスタイルの統一: 誰が書いても同じ見た目になる
  • レビューの効率化: 内容に集中でき、フォーマットで迷わない
  • マージ競合の削減: 不要なフォーマット差分を防げる

よくあるインデントの問題

混在するタブとスペース

function example() {
    if (condition) {  // 4つのスペース
	return true;  // タブ文字
    }
}

このような混在は、エディタによって異なる表示になり、チーム開発で問題を引き起こします。

不統一なインデント幅

def process_data():
  if condition:  # 2スペース
    do_something()  # 4スペース
      return result  # 6スペース

一つのファイル内でもインデント幅がバラバラになることがあります。

深いネストでのインデント崩れ

<!-- 深いネストで見づらくなった例 -->
<div>
<div>
<div>
<p>内容</p>
</div>
</div>
</div>

ネストが深くなると、手動でのインデント管理が困難になります。

VS Codeでインデントを整形する基本方法

ショートカットキーで一発整形

最も簡単で即効性のある方法は、ショートカットキーを使った整形です。

基本のフォーマットショートカット

Windows/Linux:

Shift + Alt + F

Mac:

Shift + Option + F

このショートカットを押すだけで、現在開いているファイル全体のインデントがVS Codeのルールに従って自動的に整形されます。

範囲選択での部分整形

コード全体ではなく、特定の部分だけを整形したい場合：

  1. 整形したい範囲を選択
  2. 右クリックで「ドキュメントの選択範囲のフォーマット」を選択
  3. または同じショートカット（Shift + Alt + F）を実行

実際の整形例

整形前:

function calculateTotal(items){
if(items.length>0){
let total=0;
for(let i=0;i<items.length;i++){
total+=items[i].price;
}
return total;
}
return 0;
}

整形後:

function calculateTotal(items) {
  if (items.length > 0) {
    let total = 0;
    for (let i = 0; i < items.length; i++) {
      total += items[i].price;
    }
    return total;
  }
  return 0;
}

コマンドパレットからの実行

ショートカットキーを覚えられない場合は、コマンドパレットからも実行できます。

手順

  1. Ctrl + Shift + P（Macは Cmd + Shift + P）でコマンドパレットを開く
  2. **「Format Document」**と入力
  3. Enterキーで実行

コマンドパレットでは以下のオプションが選択できます：

  • Format Document: ファイル全体を整形
  • Format Selection: 選択範囲のみ整形
  • Format Document With…: 使用するフォーマッタを選択して整形

保存時の自動整形設定

editor.formatOnSaveの基本設定

毎回手動でフォーマットするのは面倒なので、ファイル保存時に自動でインデントを整形する設定をしましょう。

settings.jsonでの設定

  1. 設定ファイルを開く
    • コマンドパレットで「Preferences: Open Settings (JSON)」を選択
  2. 以下の設定を追加
{
  "editor.formatOnSave": true
}

設定画面からの設定

GUIで設定したい場合：

  1. Ctrl + ,（Macは Cmd + ,）で設定画面を開く
  2. 検索欄に「format on save」と入力
  3. 「Editor: Format On Save」にチェックを入れる

効果の確認

設定後は以下のようになります：

  • Ctrl + S（Macは Cmd + S）でファイルを保存
  • 保存と同時に自動でインデントが整形される
  • 手動でフォーマットを実行する必要がなくなる

より詳細な自動整形設定

貼り付け時の自動整形

コードをコピー&ペーストしたときにも自動で整形したい場合：

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true
}

入力時の自動整形

タイピング中にもリアルタイムで整形したい場合：

{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true
}

特定の文字入力時の自動整形

セミコロンや括弧を入力したときに自動整形する設定：

{
  "editor.formatOnSave": true,
  "typescript.format.semicolons": "insert",
  "javascript.format.semicolons": "insert"
}

インデント幅とタブサイズの設定

基本的なタブサイズ設定

プロジェクトや言語によって、適切なインデント幅は異なります。

全体のタブサイズ設定

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true
}

この設定の意味：

  • editor.tabSize: インデント幅を2文字に設定
  • editor.insertSpaces: タブキーを押したときにスペースを挿入（タブ文字ではなく）

よく使われるインデント幅

2スペース（推奨される場合）:

  • HTML、CSS
  • JavaScript、TypeScript
  • JSON、YAML

4スペース（推奨される場合）:

  • Python
  • Java、C#
  • PHP

言語別のインデント設定

プロジェクトで複数の言語を使う場合、言語ごとに異なるインデント設定ができます。

言語別設定の例

{
  // デフォルト設定
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  
  // Python用設定
  "[python]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": true
  },
  
  // Go用設定（Goは慣例的にタブ文字を使用）
  "[go]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": false
  },
  
  // Markdown用設定
  "[markdown]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.wordWrap": "on"
  }
}

設定の優先順位

VS Codeでは以下の優先順位で設定が適用されます：

  1. 言語固有設定 ([python]など)
  2. ワークスペース設定 (.vscode/settings.json)
  3. ユーザー設定 (グローバル設定)
  4. デフォルト設定 (VS Code標準)

EditorConfigとの連携

チーム開発では、.editorconfigファイルでインデント設定を統一することが一般的です。

.editorconfigファイルの例

プロジェクトルートに.editorconfigを作成：

# EditorConfigファイル
root = true

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

[*.py]
indent_size = 4

[*.go]
indent_style = tab

[*.md]
trim_trailing_whitespace = false

VS CodeでEditorConfigを使用

  1. EditorConfig拡張機能をインストール
    • 拡張機能ビューで「EditorConfig」を検索
    • 「EditorConfig for VS Code」をインストール
  2. 設定の確認
    • .editorconfigファイルがあると自動で設定が適用される
    • VS Codeの設定よりも.editorconfigが優先される

Prettierを使った高度な整形

Prettierとは

Prettierは、コード整形に特化した人気のツールです。VS Code拡張として利用でき、より高度で一貫したフォーマットが可能です。

Prettierの特徴

  • 多言語対応: JavaScript、TypeScript、HTML、CSS、JSON、Markdownなど
  • 設定不要: デフォルトで美しいフォーマットを提供
  • 一貫性: チーム全体で同じフォーマットルールを適用
  • 高速: 大きなファイルでも瞬時にフォーマット

Prettierのインストールと設定

拡張機能のインストール

  1. 拡張機能ビューを開く（Ctrl + Shift + X）
  2. 「Prettier」で検索
  3. 「Prettier – Code formatter」をインストール

基本設定

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

Prettierの詳細設定

プロジェクト固有の設定

プロジェクトルートに.prettierrcファイルを作成：

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

設定項目の説明

  • printWidth: 1行の最大文字数
  • tabWidth: インデント幅
  • useTabs: タブ文字を使用するかどうか
  • semi: セミコロンを自動挿入するか
  • singleQuote: シングルクォートを使用するか
  • trailingComma: 末尾カンマの処理方法

言語別の詳細設定

{
  "printWidth": 80,
  "tabWidth": 2,
  "overrides": [
    {
      "files": "*.py",
      "options": {
        "tabWidth": 4
      }
    },
    {
      "files": "*.html",
      "options": {
        "printWidth": 120,
        "htmlWhitespaceSensitivity": "ignore"
      }
    }
  ]
}

フォーマッタの選択と競合回避

複数フォーマッタの管理

VS Codeでは、言語によって複数のフォーマッタが利用可能な場合があります。

利用可能なフォーマッタの確認

  1. コマンドパレットを開く（Ctrl + Shift + P）
  2. 「Format Document With…」を選択
  3. 利用可能なフォーマッタ一覧が表示される

デフォルトフォーマッタの設定

特定の言語で使用するフォーマッタを明示的に指定：

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

フォーマッタ競合の解決

よくある競合パターン

JavaScript/TypeScript:

  • Prettier vs ESLint vs VS Code内蔵フォーマッタ

Python:

  • Black vs autopep8 vs Prettier

解決方法:

{
  // ESLintは構文チェックのみ、フォーマットはPrettierに任せる
  "eslint.format.enable": false,
  
  // Prettierをデフォルトフォーマッタに設定
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  }
}

実践的な活用例とベストプラクティス

プロジェクト設定の例

React + TypeScriptプロジェクト

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Python プロジェクト

{
  "editor.formatOnSave": true,
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.tabSize": 4,
    "editor.insertSpaces": true
  },
  "python.formatting.provider": "black",
  "python.formatting.blackArgs": ["--line-length", "88"]
}

チーム開発でのベストプラクティス

1. プロジェクト設定の統一

.vscode/settings.jsonでプロジェクト固有の設定を共有：

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

2. 推奨拡張機能の指定

.vscode/extensions.jsonで必要な拡張機能を指定：

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "editorconfig.editorconfig",
    "ms-python.black-formatter"
  ]
}

3. 無視ファイルの設定

.prettierignoreで整形対象外のファイルを指定：

node_modules/
dist/
build/
*.min.js
*.min.css

よくある問題と解決方法

フォーマットが動作しない場合

問題1: ショートカットキーが効かない

原因と対処法:

  1. フォーマッタが設定されていない { "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }
  2. 拡張機能が無効になっている
    • 拡張機能ビューで該当拡張機能を確認
    • 無効になっている場合は有効にする
  3. ファイルが保存されていない
    • 一度ファイルを保存してから実行

問題2: 保存時の自動フォーマットが動作しない

確認事項:

  1. 設定の確認 { "editor.formatOnSave": true }
  2. ワークスペース設定の確認
    • プロジェクト固有の設定が優先される
    • .vscode/settings.jsonを確認
  3. ファイル形式の確認
    • ファイルの言語モードが正しく設定されているか
    • 右下の言語表示をクリックして確認

インデントの混在問題

タブとスペースの混在を解決

一括変換コマンド:

  1. コマンドパレットを開く（Ctrl + Shift + P）
  2. 「Convert Indentation to Spaces」を選択
  3. または「Convert Indentation to Tabs」を選択

設定による防止:

{
  "editor.insertSpaces": true,
  "editor.detectIndentation": false
}

空白文字の可視化

設定で空白文字を表示して問題を発見しやすくする：

{
  "editor.renderWhitespace": "all",
  "editor.renderControlCharacters": true
}

パフォーマンスの問題

大きなファイルでの動作が重い

対処法:

  1. フォーマット対象ファイルサイズの制限 { "editor.formatOnSave": true, "editor.formatOnSaveTimeout": 1500 }
  2. 特定ファイルの除外 { "files.associations": { "*.min.js": "javascript", "*.min.css": "css" }, "[javascript]": { "editor.formatOnSave": false } }

高度なテクニックと応用

カスタムフォーマッタの作成

独自のフォーマットルールが必要な場合

VS Code拡張として独自のフォーマッタを作成することも可能です。

// 簡単なカスタムフォーマッタの例
const vscode = require('vscode');

function formatDocument(document) {
    const text = document.getText();
    // カスタムフォーマットロジック
    const formattedText = customFormat(text);
    
    return [new vscode.TextEdit(
        new vscode.Range(0, 0, document.lineCount, 0),
        formattedText
    )];
}

マクロとの組み合わせ

複数の整形処理を一括実行

VS Codeのマクロ機能と組み合わせて、複数の整形処理を一度に実行：

{
  "macros": {
    "formatAndSave": [
      "editor.action.formatDocument",
      "editor.action.organizeImports",
      "workbench.action.files.save"
    ]
  }
}

Git hookとの連携

コミット前の自動整形

.git/hooks/pre-commitファイルで、コミット前に自動でフォーマットを実行：

#!/bin/sh
# Prettierでフォーマットを実行
npx prettier --write .
git add .

まとめ

VS Codeでコードのインデントを自動整形するには、以下のポイントが重要です：

基本的な整形方法

  • **Shift + Alt + F**で手動整形
  • **editor.formatOnSave: true**で保存時自動整形
  • コマンドパレットからの整形実行

インデント設定の管理

  • **editor.tabSize**でインデント幅を設定
  • 言語別設定で最適な幅を指定
  • EditorConfigでチーム統一

Prettierの活用

  • 多言語対応の高機能フォーマッタ
  • プロジェクト固有設定で柔軟なカスタマイズ
  • チーム開発での一貫性確保

ベストプラクティス

  • プロジェクト設定の共有で統一感を保つ
  • 適切なフォーマッタ選択で最適な結果を得る
  • 問題の早期発見で効率的な開発

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました