「CSSの入力量が多くなると、どうしてもコードが汚くなってしまう」
「VSCodeでCSS整形する方法について知りたい」

上記のような悩みや疑問を抱えている方もいるのではないでしょうか。

CSSを整形することは、コーディングすることに比べて疎かになりがちですよね。

実はツールや拡張機能を使うことで、CSSのコードを一瞬で整形することができるのです。

今回WEBCAMP MEDIAでは、VSCodeでCSSを整形する方法とおすすめの整形ツールについて解説します。

以上の項目について解説します。

この記事を読むことで、VSCodeを使ったCSSの整形方法と、簡単に整形できるおすすめツールについて知ることができます。

CSSの内容を整えるのが苦手な方や、簡単にCSS整形したい方はぜひチェックしてみてくださいね！

VSCodeとは

VSCode(ブイエスコード)はVisual Studio Code（ビジュアル・スタジオ・コード）の略称で、プログラミング言語を入力してWebサービスやシステムを作るときに使うエディタのことです。

実は、パソコンに搭載されているメモ帳もエディタの一種で、HTMLを入力してコーディングすることが可能です。

エディタの中でもVSCodeは、数多くの拡張機能が備わっているのが特徴。快適にコーディングできることからエンジニアの中でも人気があります。

Visual Studio Codeの公式サイトはこちらから

VSCodeでCSSを整形する方法

VSCodeでCSSを整形するには、拡張機能である「CSS Formatter」を利用します。

まず、VSCodeを開いて画面左のメニューアイコンの中から、4つのボックスが表示されているアイコンをクリックします。

画面左上に拡張機能の検索欄が表示されるので「CSS Formatter」と入力します。

検索欄直下に表示された「CSS Formatter」の右下にある「Install」という青いボタンをクリックしてインストールします。

インストールが完了すれば設定完了です。

次に、整形したいCSSコードを選択して、ショートカットキーの「option+shift+F」を押すとCSSが整形されます。

実行結果

CSSの記述量が多いときは、ショートカットキーの「command+A」を押すと全選択できるので、合わせて利用すると効率よく整形できます。

無料で使えるおすすめのCSS整形ツール

「VSCode以外のエディタを使っているので、CSSを整形するためにほかのツールを使いたい」

上記のような方に向けて、無料で使えるおすすめのCSS整形ツールを紹介します。

どのツールもコードをコピペするだけで整形できるので、ぜひチェックしてみてくださいね！

Syncer

URL：https://lab.syncer.jp/Tool/CSS-PrettyPrint/

SyncerはCSS、JavaScript、HTMLのコードを整形するツールです。

「変更前のコード」という欄に整形前のコードを入力するだけで「変更後のコード」欄に整形されたコードが表示されます。

さらにスクロールすると、インデント文字の種類や個数、セレクタの改行内容など整形の詳細を設定できます。

インデントにこだわりがある方や、コードをコピペして簡単に整形したい方におすすめです。

TM-WebTools

TM-WebToolsは、CSSの整形と圧縮ができるツールです。

整形したいコードを入力してボタンを押すだけで、簡単にコードを整形できるのが特徴。整形と圧縮の切り替えは、画面左のメニューバーから選択できます。

シンプルな作りになっていて、初心者でも迷うことなく利用できるのでおすすめです。

まとめ

今回は、VSCodeでCSSを整形する方法とおすすめの整形ツールについて解説しましたが、いかがでしたでしょうか。

VSCodeの拡張機能である「CSS Formatter」を使えば、ショートコードだけでCSSを整形できます。エディタにこだわりがない方はぜひ使ってみてくださいね。

また、VSCode以外のエディタを使っている方は、コピペするだけでCSSを整形できる「Syncer」か「TM-WebTools」を使うことがおすすめです。

ぜひ参考にしてみてくださいね！