【Webエンジニア必見】Visual Studio Codeでコードを自動整形する方法@CSS偏
![](https://newmtube07.com/wp-content/uploads/2020/05/gorimeppv2IMGL7773_TP_V-1024x643.jpg)
こんにちは!ニタマサ=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時点
具体例と設定方法
具体的な使用状況は以下の画像のような時に使用してきます。
![](https://newmtube07.com/wp-content/uploads/2020/05/bbb247b405f6c0baba36478ec525e05a.png)
整形したい箇所を選択して、
” ⌥(option)+shift+F “
のショートカットキーを押下後、こんな感じできれいにコードが生成されます。
![](https://newmtube07.com/wp-content/uploads/2020/05/d54db6a4e576ace7371b327201ab3b7e.png)
また、Visual Studio Codeの設定によってはうまく行かないケースもあります。
設定方法を変更すれば問題ないので、以下の対応を行いましょう。
設定手順
- [ファイル] > [基本設定] > [設定] で設定画面を開きます。
- 検索ボックスに 『formaton』 と入力
- 『Editor: Format On Save』 にチェック
![](https://newmtube07.com/wp-content/uploads/2020/05/42389d45ca45c3f78ab97c44aaadae31.png)
これでOKです。
これでもうまく行かない時はもしかしたらVisual Studio Code内の設定でフォーマッターが無いかもしれ無いです。
フォーマッターの設定方法は以下となるので設定してみてください!
フォーマッターの設定方法
左サイドバーの拡張機能の検索欄に“Code formatter”と入力します。
すると以下のような「Prettier – Code formatter」が出てくるので、これをインストールしていきます。
![](https://newmtube07.com/wp-content/uploads/2020/05/ba2fd6e2ce6ce101a33acabd3b8cbd1b-1024x584.png)
これで設定は完了です。
整形したい箇所を選択して、
” ⌥(option)+shift+F “
を押下すれば、整形できるかと思います!
PHPも同様にプラグインをインストールすれば可能ですので、ぜひ試してみてください。設定方法は以下の記事にまとめているので、ぜひご覧ください。
まとめ
いかがだったでしょうか。
今回はCSSをVisual Studio Codeで書く際に便利なコードの自動整形について設定方法をご紹介してきました。
” ⌥(option)+shift+F “
のショートカットキー はとても便利なので、ぜひ試してみてください!
もし、この記事に関して分からない事や質問がある場合は、お問い合わせページまたはTwitterのDMまで連絡を頂ければと思います!!!
(ついでにフォローしていただけると最高に嬉しいです笑)
では!See you again!(´∀`)