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

#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア #駆け出しエンジニア #駆け出しエンジニアと繋がりたい #駆け出しWebクリエイターと繋がりたい #駆け出しWebクリエイター

🎈 WPでも公開中です
https://wp.me/pc9NHC-J4

前置き

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

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

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

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

eslintで良いのでは！？

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

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

導入方法

##Prettierのインストール

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

##設定

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

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

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

まとめ

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

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

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

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

🎈 WPでも公開中です
https://wp.me/pc9NHC-J4