CODE
CSS
HTML
PHP

【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!(´∀`)