VSCodeの自動整形設定を完全マスター！コードが一瞬でキレイになる方法

プログラミングをしていて、「コードがグチャグチャで読みにくい…」「インデントが揃ってなくてイライラする…」という経験、ありませんか？

実は、VSCode（Visual Studio Code）には、コードを自動的にキレイに整えてくれる「自動整形機能」が備わっています。この機能を使えば、乱れたコードも一瞬でスッキリ！

今回は、VSCodeの自動整形設定について、初心者の方でもわかるように丁寧に解説していきますね。設定方法から便利な拡張機能まで、すべてお伝えします。

スポンサーリンク

VSCodeの自動整形機能ってなに?

自動整形機能とは、書いたコードを自動的に見やすく整えてくれる便利な機能のことです。

具体的には、こんなことをしてくれます。

  • インデント（字下げ）を揃える
  • スペースや改行を適切に入れる
  • コードの並び方を統一する

たとえば、こんな風にバラバラだったコードが…

function hello(  ){console.log("Hello");const name="World";return name;}

自動整形を使うと、こんな風に見やすくなります。

function hello() {
  console.log("Hello");
  const name = "World";
  return name;
}

コードの機能は全く変わらないのに、読みやすさが全然違いますよね。

手動で自動整形する方法（ショートカットキー）

まずは、好きなタイミングで手動で整形する方法から見ていきましょう。

Windowsの場合

キーボードで「Shift + Alt + F」を同時に押します。

Macの場合

キーボードで「Shift + Option + F」を同時に押します。

たったこれだけで、開いているファイル全体が整形されます。

注意点： 日本語入力モードだと動作しないことがあるので、必ず半角入力の状態で実行してくださいね。

右クリックメニューから実行する方法

ショートカットキーが覚えられない方は、右クリックメニューからも実行できます。

  1. エディタ画面で右クリック
  2. 「ドキュメントのフォーマット」を選択

これでも同じように整形されますよ。

保存時に自動で整形する設定（超便利！）

毎回ショートカットキーを押すのは面倒ですよね。そこで、ファイルを保存するたびに自動で整形してくれる設定をしましょう。

設定方法

手順1：設定画面を開く

画面左下の歯車アイコン（⚙️）をクリックして、「設定」を選択します。

または、ショートカットキーで開くこともできます。

  • Windows: Ctrl + ,
  • Mac: Cmd + ,

手順2：検索ボックスに入力

設定画面の上部にある検索ボックスに「format on save」と入力します。

手順3：チェックを入れる

「Editor: Format On Save」という項目が表示されるので、チェックボックスにチェックを入れます。

これだけで設定完了！

これで、Ctrl + S（MacはCmd + S）でファイルを保存するたびに、自動的にコードが整形されるようになります。

Prettierをインストールして整形をパワーアップ

VSCodeには標準の整形機能がありますが、より強力な「Prettier（プリティア）」という拡張機能を使うのがおすすめです。

Prettierは、JavaScript、TypeScript、HTML、CSS、JSONなど、多くの言語に対応した人気No.1のフォーマッター（整形ツール）なんです。

Prettierのインストール方法

手順1：拡張機能タブを開く

画面左側のアイコンから、四角いブロックが4つ並んだアイコン（拡張機能）をクリックします。

手順2：Prettierを検索

検索ボックスに「Prettier」と入力します。

手順3：インストール

「Prettier – Code formatter」という拡張機能が表示されるので、「インストール」ボタンをクリックします。

これでインストールは完了です！

Prettierを保存時に自動実行する設定

Prettierをインストールしたら、先ほど設定した「Format On Save」が有効になっていることを確認してください。

もし複数のフォーマッターがインストールされている場合は、Prettierをデフォルトに設定する必要があります。

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

複数のフォーマッターがある場合、どれを使うか指定しないとうまく動かないことがあります。

設定方法

手順1：設定画面を開く

歯車アイコンから「設定」を選択します。

手順2：検索する

検索ボックスに「default formatter」と入力します。

手順3：Prettierを選択

「Editor: Default Formatter」のドロップダウンメニューから「Prettier – Code formatter」を選択します。

これで、すべての整形作業がPrettierで統一されます。

整形の細かい設定をカスタマイズする

Prettierには、整形のルールを自分好みに調整できる設定があります。

よく使う設定項目

設定画面で「prettier」と検索すると、いろいろな設定が出てきます。代表的なものをいくつか紹介しますね。

Tab Width（タブの幅）

  • インデント1つ分のスペース数を設定
  • デフォルトは2スペース

Semi（セミコロン）

  • 文末にセミコロンを付けるかどうか
  • チェックを入れると自動で付きます

Single Quote（シングルクォート）

  • 文字列をシングルクォート（’）で囲むかどうか
  • チェックを入れるとダブルクォート（”）の代わりにシングルクォートが使われます

Print Width（1行の最大文字数）

  • 1行の最大文字数を設定
  • デフォルトは80文字

プロジェクトごとに設定を変える方法

チームで開発している場合、みんなで同じ整形ルールを使いたいですよね。そんなときは「.prettierrc」ファイルを作ります。

プロジェクトのルートフォルダ（一番上の階層）に、「.prettierrc」という名前のファイルを作成し、以下のような内容を書きます。

{
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

これで、このプロジェクトを開いた人全員が同じ設定で整形できるようになります。

インデント幅を変更する方法

「インデントの幅を変えたい！」という場合は、画面右下のステータスバーから簡単に変更できます。

手順1：右下の表示をクリック

画面右下に「スペース: 2」とか「タブサイズ: 4」という表示があるので、そこをクリックします。

手順2：インデントの種類を選ぶ

「スペースによるインデント」または「タブによるインデント」を選択します。

手順3：幅を選ぶ

インデント1つ分の幅（スペース数）を選択します。選択肢は1～8まであります。

これで、そのファイルのインデント幅が変更されます。

よくあるトラブルと解決方法

トラブル1：「フォーマッタがありません」と表示される

原因： その言語用のフォーマッターがインストールされていません。

解決方法：

表示されたメッセージから「フォーマッタをインストール」をクリックして、その言語に対応したフォーマッターをインストールしましょう。

例えば、PHPのファイルなら「PHP Intelephense」など、言語ごとに専用のフォーマッターがあります。

トラブル2：保存しても整形されない

原因1： 「Format On Save」がオフになっている

解決方法： 設定を見直して、チェックが入っているか確認してください。

原因2： デフォルトフォーマッターが設定されていない

解決方法： 上で説明した「デフォルトフォーマッターの設定」を行ってください。

原因3： そのファイル形式に対応していない

解決方法： Prettierは多くの言語に対応していますが、すべての言語に対応しているわけではありません。Prettierの公式サイトで対応言語を確認しましょう。

トラブル3：貼り付け時に勝手に整形されて困る

コピペしたときに勝手に整形されるのが嫌な場合は、この機能をオフにできます。

解決方法：

  1. 設定画面を開く
  2. 「format on paste」で検索
  3. 「Editor: Format On Paste」のチェックを外す

これで、貼り付け時の自動整形が無効になります。

トラブル4：インデント設定が勝手に変わる

ファイルを開くたびにインデント設定が変わってしまう場合は、「自動検出機能」が働いている可能性があります。

解決方法：

  1. 設定画面で「detect indentation」で検索
  2. 「Editor: Detect Indentation」のチェックを外す

これで、インデント設定が固定されます。

おすすめの拡張機能

自動整形をさらに便利にする拡張機能を紹介します。

indent-rainbow（インデントを色分け）

インデントのレベルごとに色を変えて表示してくれる拡張機能です。

コードの階層構造が視覚的にわかりやすくなるので、特にネストが深いコードを書くときに便利ですよ。

Beautify（多言語対応フォーマッター）

JavaScript、JSON、CSS、HTML など、多くの言語に対応したフォーマッターです。Prettierと併用したり、言語によって使い分けることもできます。

まとめ：自動整形でコーディングが快適に！

VSCodeの自動整形機能を使えば、コードを常にキレイな状態に保つことができます。

この記事のポイントをおさらい

  • 手動整形は「Shift + Alt + F」（Macは「Shift + Option + F」）
  • 「Format On Save」をオンにすれば保存時に自動整形
  • Prettierをインストールすると多くの言語に対応
  • デフォルトフォーマッターを設定すると確実に動作
  • .prettierrcファイルでプロジェクト全体の設定を統一できる

最初は設定が少し面倒に感じるかもしれませんが、一度設定してしまえば、あとはずっと快適にコーディングできます。

特にチームで開発している場合は、全員が同じフォーマット設定を使うことで、コードレビューもスムーズになりますよ。

ぜひ、今すぐVSCodeの自動整形設定を試してみてください。コーディングの効率が格段にアップするはずです！

Youtube

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

スポンサーリンク

コメント

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