開発ブログ

【Nuxt.js】Nuxt番外編:自動でインデント整形!plugin Prettier

前置き

今回は番外編として
インデントの自動整形をしてくれる
便利なplugin prettierのご紹介です🍒

エディターはVSCodeを使用しているので
その導入手順をお伝えします🌟

まずはどんなものか、
目で見てもらった方が早いので
⬇️こちらをご覧ください✨👀

こちらはcssを
htmlからcssファイルへ移動、編集して
command+S でセーブしている動画です。
セーブすると自動でインデントを揃えてくれます✨🥺
めちゃくちゃ便利ですよね…💕


eslintで良いのでは!?

……はい。
eslintで良いです!😄笑

ただ
eslintの導入が面倒…😩
インデント揃えるだけで良いの😡
という方向けです!
eslintの導入については
こちらが参考になります👀
/qiita.com/Mount/items/5f8196b891444575b7db


導入方法

Prettierのインストール

VSCodeの拡張機能を開いて
Prettierを検索、インストールします。


設定

今度は1番下の歯車⚙アイコンから
設定を押します。

設定画面が開けたら「save」と入力し
該当箇所Format On Saveを✅チェックします。

これでセーブをした時に
自動でインデントが揃いますよ🌟


まとめ

今回は短いですが終わりです💫

自動でインデントを揃えてくれるので
変なミスがなくなって嬉しいですね❤️

手動だと階層を間違えて
入れ子関係がおかしくなっていることに
気づかず変なミスをしまうことも…😩
また、大元のhtmlの階層がズレているので
scssも効かない💥なんてことにも
なりかねません🤔💭

効率よくストレスなくスムーズに
コードが書けるのはメリットです🎀🤗

-開発ブログ

© 2020 aLiz Nuxt