Home
フロントエンド
Visual Studio Codeでソースを自動整形する方法

Visual Studio Codeでソースを自動整形する方法

Visual Studio Codeでソースを自動整形する方法

どうも!かけちまるです!

今回は、Visual Studio Codeでソースを自動整形する方法を解説します。
更新作業の場合に改行とインデントがめちゃくちゃなことがあるので自動整形を覚えておくと効率的に開発を進めることができます。

こんな感じのことができます。

自動整形デモ

この記事では、

  • ・自動整形する方法
  • ・インデントのコントロール方法
  • ・ファイル保存時に自動で整形する
  • ・自動整形できない場合

を解説します。

自動整形する方法

ファイル全体を整形したい場合と選択した範囲のみを整形する方法をご紹介します。

ファイル全体の整形

  • ・コマンドパレットを使う方法 : Format Documentを選択
  • ・ショートカットキー
  •  Windows : Shift + Alt + F
  •  macOS : Shift + Option + F

コマンドパレットはCmd/Ctrl + Shift + Pで開けます。
ショートカットキーを使う場合は、半角入力にしてください。

選択範囲の整形

整形したい行を選択し以下の動作を行ってください。

  • ・コマンドパレットを使う方法 : Format Documentを選択
  • ・ショートカットキー
  •  Windows : Ctrl + KCtrl + F
  •  macOS : Cmd + KCmd + F

インデント数のコントロール

自動整形をがインデント数が気に入らない時はVisual Studio Codeの右下のメニューから変更することができます。

インデント数変更

ファイル保存時に自動で整形する

先の説明では手動で自動整形をしていましたが、ファイル保存時に毎回自動で整形してくれる設定もあるのでご紹介します。

1

Visual Studio Codeの設定に移動

メニューバーから Code > 基本設定 > 設定 から設定画面を開きます。

メニューバーから設定を開く
2

「Editor: Format On Save」のチェックボックスにチェックする

検索ボックスに「formaton」と入力します。
そうすると、「Editor: Format On Save」のチェックボックスがあると思うのでそれにチェックを入れます。

「Editor: Format On Save」をチェック
3

完了

これで完了です。
ファイルを保存して動作確認をしてみましょう。

自動整形できない場合

ソースコードを自動整形するときのした画像のようなポップアップがでて整形できない場合があります。

フォーマッタのエラー画面   

その場合は、フォーマッタをインストールから該当言語のフォーマッタをインストールしましょう。

フォーマッタをインストール

これで自動整形できなかったものができるようになると思います。

まとめ

Visual Studio Codeでの自動整形を使えるようになると開発が効率化されるので覚えておくと良さそうです。

Visual Studio Codeの自動整形でもっといい方法や便利なプラグインなどがあればTwitterでご教授いただけると幸いです。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

bxSliderのデザインカスタムと不具合の対処

bxSliderのデザインカスタムと不具合の対処

【PHP】配列の要素の数を取得する

【PHP】配列の要素の数を取得する

CSSだけでぷよぷよしたアニメーションの実装方法

CSSだけでぷよぷよしたアニメーションの実装方法

Ajaxを使用したheaderとfooterの共通化【JavaScript】

Ajaxを使用したheaderとfooterの共通化【JavaScript】

UNPKGの使い方~npmで公開済のパッケージを使えるCDNサービス~

UNPKGの使い方~npmで公開済のパッケージを使えるCDNサービス~

【Three.js基礎】概念の理解と立方体の実装

【Three.js基礎】概念の理解と立方体の実装