【Webエンジニア必見】Visual Studio Codeでコードを自動整形する方法＠CSS偏

こんにちは！ニタマサ＝NewM(@NewM07x2)です。

先日こんなツイートをしました。

こちらですが、Visual Studio CodeでHTMLのコードを書いた時に使用するショートカットキーになります。

以下の記事でHTMLの自動整形についてまとめていますが、本記事ではCSSでも同様にショートカットキーで整形できるようにしていきます。

『【Webエンジニア必見】Visual Studio Codeでコードを自動整形する方法＠HTML偏』

HTML同様にCSSも書いていてそこまでグチャらないかと思いますが、1つ1つ整形していく作業って手間だしやりたくないですよね…

そんな時こそ

” ⌥(option)＋shift＋F “

のショートカットキーです！

それではやっていきましょう！

環境準備

今回設定していく環境は以下の通りになっています。

• MAMP : 5.3
• Visual Studio CodeでCSSファイル

※2020/05時点

具体例と設定方法

具体的な使用状況は以下の画像のような時に使用してきます。

整形したい箇所を選択して、

” ⌥(option)＋shift＋F “

のショートカットキーを押下後、こんな感じできれいにコードが生成されます。

また、Visual Studio Codeの設定によってはうまく行かないケースもあります。

設定方法を変更すれば問題ないので、以下の対応を行いましょう。

設定手順

1. [ファイル] ＞ [基本設定] ＞ [設定] で設定画面を開きます。
2. 検索ボックスに 『formaton』 と入力
3. 『Editor: Format On Save』 にチェック

これでOKです。

これでもうまく行かない時はもしかしたらVisual Studio Code内の設定でフォーマッターが無いかもしれ無いです。

フォーマッターの設定方法は以下となるので設定してみてください！

フォーマッターの設定方法

左サイドバーの拡張機能の検索欄に“Code formatter”と入力します。

すると以下のような「Prettier – Code formatter」が出てくるので、これをインストールしていきます。

これで設定は完了です。

整形したい箇所を選択して、

” ⌥(option)＋shift＋F “

を押下すれば、整形できるかと思います！

PHPも同様にプラグインをインストールすれば可能ですので、ぜひ試してみてください。設定方法は以下の記事にまとめているので、ぜひご覧ください。

まとめ

いかがだったでしょうか。

今回はCSSをVisual Studio Codeで書く際に便利なコードの自動整形について設定方法をご紹介してきました。

” ⌥(option)＋shift＋F “

のショートカットキー はとても便利なので、ぜひ試してみてください！

もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います！！！
（ついでにフォローしていただけると最高に嬉しいです笑）

では！See you again!(´∀｀)