Zenn
🌀

Vite＋React＋Emotion（Css-in-Js）にStylelintを導入した

2022/03/01に公開
React
Stylelint
pretier
tech

Vite + React（Typescript）+ Esllint ＋Prettier + Emotion(SyledJsx Object-style)を使用しています。
今回は、Stylelintを導入した手順です。

前提条件

Viteで作成したReact（TypeScript）アプリにEsLintとPrettierを導入し、Emotion(SyledJsx Object-style) を使用してる状態で、Stylelintを導入していきます。

Stylelintの設定

Stylelint インストール

まずはStylelintをインストールします。

npm install stylelint --save-dev

次にStylelintのルールセットをインストールします。
ルールセットはいろいろありますが、今回は stylelint-config-recommended か stylelint-config-standard で迷って、stylelint-config-standardを選びました。
stylelint-config-recommended は最小構成のルールセットです。
stylelint-config-standard は stylelint-config-recommended を拡張したルールセットです。

npm install stylelint-config-standard --save-dev

emotionでcss-in-jsを使用しているので、css-in-jsをチェックできる stylelint/postcss-css-in-jsをインストールします。

npm install @stylelint/postcss-css-in-js --save-dev

※ この@stylelint/postcss-css-in-js を非推奨にしようという動きもあるようです。
まだ決定はしていません。ほかにCSS-in-JSをチェックできるライブラリがないので使用します。
詳しくはコチラ：Fix CSS-in-JS problems #4574

.stylelintrc.yml を作成

stylelint 用の設定ファイルを作成します。
overrides で、src 直下の ts, tsxファイルは @stylelint/postcss-css-in-js を使用するように上書きします。

.stylelintrc.yml
extends: 
  - stylelint-config-standard
overrides: 
  - files:
    - 'src/**/*.{ts,tsx}'
    customSyntax: '@stylelint/postcss-css-in-js'

package.jsonの修正

package.json に "stylelint"、"stylelintfix"を追記します。

package.json
"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .tsx,.ts src/",
    "lintfix": "npm run lint -- --fix",
+    "stylelint": "stylelint --ignore-path .gitignore \"src/**/*.+(css|ts|tsx)\"",
+    "stylelintfix": "npm run stylelint -- --fix",
    "format": "prettier --write \"**/*.+(js|json|yml|ts|tsx)\"",
    "test": "jest --config ./jest.config.json",
    "test:watch": "npm run test -- --watch"
  },

これで下記コマンドで、srcフォルダ内の css、ts、tsx ファイルで、CSS がルール通りに記載されているかチェックされます。

npm run stylelint

また、下記のコマンドでエラーになるコードのうち、修正できるものは自動修正してくれます。

npm run stylelintfix

Prettierの設定

すでにPrettierは導入済みの前提です。
stylelint用のフォーマッター「stylelint-prettier」とその設定「stylelint-config-prettier」をインストールします。

npm install stylelint-prettier --save-dev 
npm install stylelint-config-prettier --save-dev

.stylelintrc.yml を修正

先ほど作成した.stylelint.ymlに追記します。

.stylelintrc.yml
+ plugins: stylelint-prettier
extends: 
  - stylelint-config-standard
+  - stylelint-config-prettier
overrides: 
  - files:
    - 'src/**/*.{ts,tsx}'
    customSyntax: '@stylelint/postcss-css-in-js'

package.jsonの修正

package.json に "format"をcssにも適用するように修正します。

package.json
"scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint": "eslint --ext .tsx,.ts src/",
    "lintfix": "npm run lint -- --fix",
    "stylelint": "stylelint --ignore-path .gitignore \"src/**/*.+(css|ts|tsx)\"",
    "stylelintfix": "npm run stylelint -- --fix",
-    "format": "prettier --write \"**/*.+(js|json|yml|ts|tsx)\"",
+    "format": "prettier --write \"**/*.+(js|json|yml|ts|tsx|css)\"",
    "test": "jest --config ./jest.config.json",
    "test:watch": "npm run test -- --watch"
  },

これで下記コマンドで cssファイル、tsxファイルの css-in-js 部分も自動整形されるようになります。

npm run format

VSCodeの拡張機能 Stylelint（補足）

VSCodeの拡張機能 Stylelintをインストールすると、css や scss であれば、リアルタイムで入力エラーをチェックしてくれるのですが、CSS in JS はチェックしてくれません。
VsCode の拡張機能 Stylelintはインストールする必要はないかなと思います。
https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

Discussion