[Vite] TypeScript ベース React プロジェクトでに Stylelint(CSS-in-JS)を追加する

概要

今回のブログポストではViteを使って生成したTypeScriptベースReactプロジェクトにCSS-in-JS環境でスタイル(CSS)を検査するためにStylelintを追加する方法について説明します.

Stylelint: https://stylelint.io/

ブログシリーズ

このブログポストはシリーズで制作されました。以下はViteのシリーズリストです。

[Vite] TypeScript ベースの React プロジェクトを始める
[Vite] TypeScript ベース React プロジェクトへテスト環境を構築する
[Vite] TypeScript ベース React プロジェクトに Prettier を追加する
[Vite] TypeScript ベース React プロジェクトでに Stylelint(CSS-in-JS)を追加する

Stylelint のインストール

次のコマンドを実行してStylelintを使うために必要なライブラリをインストールします。

npm i -D stylelint stylelint-config-standard postcss-styled-syntax stylelint-order
# yarn add -D stylelint stylelint-config-standard postcss-styled-syntax stylelint-order

stylelint: stylelintをインストールします.
stylelint-config-standard: Stylelintから提供される標準設定です.
postcss-styled-syntax: CSS-in-JS環境でスタイル(CSS)を検査するためのライブラリです.
stylelint-order: スタイル(CSS)のプロパティの順序を検査するためのライブラリです.

Stylelint の設定

Stylelintを使うためにはStylelintを設定をする必要があります. Stylelintを設定するために.stylelintrc.jsonファイルを作成して次のように修正します.

{
  "extends": ["stylelint-config-standard"],
  "customSyntax": "postcss-styled-syntax",
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

Stylelint の実行

Stylelintを使うためにはStylelintを実行するコマンドを実行する必要があります。次のコマンドを実行するとStylelintを実行することができます。

npx stylelint --ignore-path .gitignore '**/*.(css|tsx)

このコマンドはStylelintが提供する基本ルールを遵守しているかを検査します. もし、該当ルールを使って自動で修正したい場合は次のコマンドを実行します。

npx stylelint --ignore-path .gitignore '**/*.(css|tsx)' --fix

このコマンドを実行するとStylelintが自動で修正可能な問題を修正してくれることを確認できます.

このコマンドを簡単に使うためにpackage.jsonファイルを開いて次のように修正します.

...
"scripts": {
  ...
  "lint:css": "stylelint --ignore-path .gitignore '**/*.(css|tsx)'",
  "lint:css:fix": "stylelint --ignore-path .gitignore '**/*.(css|tsx)' --fix"
},
...

これで次のコマンドを実行してStylelintを実行することができます.

npm run lint:css
npm run lint:css:fix
# yarn lint:css
# yarn lint:css:fix

完了

これでViteを使って生成したTypeScriptベースReactプロジェクトにCSS-in-JS環境でスタイル(CSS)を検査するためにStylelintを追加する方法について説明しました. これでStylelintを使ってスタイル(CSS)を検査してより良いコードを書いてみてください.

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！