Tailwindを書くなら絶対入れよう【Prettier/Plugin】

★★★ お知らせ ★★★

◆ エンジニア業務環境アンケート結果 ◆
エンジニアが自分の働き方にどういったことで満足していて、不満を感じているのか、働きたい会社像として何を求めているのか、業務環境調査を実施しました。ぜひご覧ください。
⇒ アンケート結果はこちらから

挨拶と現状確認

強めなタイトルでこんにちは。Tailwindのクラスをルールに則り並べ替えてくれるプラグイン「prettier-plugin-tailwindcss」があったので共有します。一年前に発表されていたこちらの記事を昨日見つけて感動しました。Tailwindの公式さんが出していたんですね。二か月前に見つけたかったですが、これからでも遅くないと思います。体験して言えることは「Tailwindを書くなら絶対設定しよう!」ということです。

こちらの記事は、前回の「シンプルなTailwind環境構築を効率的に改革  [Visual Studio Code Browser-Sync ]」を補足する内容となっています。環境としては、以下の表のとおりになっています。VSCodeにはすでにPrettierのプラグインが入っているものと仮定して進めていきます。もし入っていない方は、前回記事の最後の方を読むと良いと思います。一応わかりやすいサイトを置いておきます。

Lib 役割
Tailwind 主役
Browser-Sync ホットリロード
Prettier コード整形

また、JavaScriptのリンターであるESLintを導入していない内容になっています。ReactやVueでTailwindを導入している場合では、「eslint-plugin-tailwindcss」で同様のことができますのでこちらのライブラリを検索欄に入れて導入してみてください。

導入

導入コマンドは、以下になります。

yarn add -D prettier prettier-plugin-tailwindcss

導入としては以上です。すでにPrettierを導入している場合では、Prettierの起動と同時にプラグインが起動します。VSCodeでファイル保存時に実行するように設定をしておくと、自動でフォーマットが走ります。

設定としては、VSCodeで「Prettier」をインストール後、VSCodeのsettings.jsonで以下を追記することでファイル保存時に実行されます。settings.jsonの開き方はこちらから。

"editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.organizeImports": true
  },

手動でコマンドを叩きたい場合は、以下の二つになるかと思います。

yarn run prettier --check 対象のファイルパス
yarn run prettier --write 対象のファイルパス

オプションで「—check」を付けると書き換えはせずにチェックのみが走り、「—write」を付けることでフォーマットが走ります。

終わりに

今回のナレッジ共有としては以上となります。コードフォーマットやコード規範の部分は最初に設定しておけばストレスフリーで開発を進めることができます。レビューなどを依頼する際にも一定のルールが導入されるのでとても良いです。

その一方で、導入障壁が非常に高いのが現状です。もし知らなかった人は今すぐ入れましょう。

それではまた!





ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!


ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。
About 龍:Ryu 27 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。 しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる