前置き
今回は番外編として
インデントの自動整形をしてくれる
便利なplugin prettierのご紹介です🍒
エディターはVSCodeを使用しているので
その導入手順をお伝えします🌟
まずはどんなものか、
目で見てもらった方が早いので
⬇️こちらをご覧ください✨👀
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/10/per-1.gif?resize=799%2C727&ssl=1)
こちらはcssを
htmlからcssファイルへ移動、編集して
command+S でセーブしている動画です。
セーブすると自動でインデントを揃えてくれます✨🥺
めちゃくちゃ便利ですよね…💕
eslintで良いのでは!?
……はい。
eslintで良いです!😄笑
ただ
eslintの導入が面倒…😩
インデント揃えるだけで良いの😡
という方向けです!
eslintの導入については
こちらが参考になります👀
https://qiita.com/Mount/items/5f8196b891444575b7db
導入方法
Prettierのインストール
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/10/Frame-9.png?resize=920%2C557&ssl=1)
VSCodeの拡張機能を開いて
Prettierを検索、インストールします。
設定
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/10/Frame-10.png?resize=920%2C630&ssl=1)
今度は1番下の歯車⚙アイコンから
設定を押します。
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/10/Frame-11.png?resize=920%2C630&ssl=1)
設定画面が開けたら「save」と入力し
該当箇所Format On Saveを✅チェックします。
これでセーブをした時に
自動でインデントが揃いますよ🌟
まとめ
今回は短いですが終わりです💫
自動でインデントを揃えてくれるので
変なミスがなくなって嬉しいですね❤️
手動だと階層を間違えて
入れ子関係がおかしくなっていることに
気づかず変なミスをしまうことも…😩
また、大元のhtmlの階層がズレているので
scssも効かない💥なんてことにも
なりかねません🤔💭
効率よくストレスなくスムーズに
コードが書けるのはメリットです🎀🤗