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

挨拶と現状確認

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

こちらの記事は、前回の「シンプルなTailwind環境構築を効率的に改革　 [Visual Studio Code Browser-Sync ]」を補足する内容となっています。環境としては、以下の表のとおりになっています。VSCodeにはすでに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」を付けることでフォーマットが走ります。

終わりに

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

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

それではまた！

About 龍：Ryu 107 Articles

2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中（業務もね）//

Twitter YouTube