[ReactNative]未使用のstyleをESLintで検知したい

背景

• プロジェクトが大きくなっていくとstyleの管理が煩雑になり未使用のstyleが放置されがち
• コンポーネントの粒度を小さく作れていれば気づけるかもしれないが現実はそうも行かない場面が多い
• ESLintで検知できたら楽でいいなと思って調べた

やり方

• eslint-plugin-react-nativeを使う
• 以下ほとんどREADMEに書いてることそのまま

npm i -D eslint eslint-plugin-react eslint-plugin-react-native
# or
yarn add -D eslint eslint-plugin-react eslint-plugin-react-native

• ESLintの設定に以下の内容を追加

.eslintrc

{
  "env": {
    "react-native/react-native": true
  },
  "plugins": ["react", "react-native"],
  "rules": {
    "react-native/no-unused-styles": 2,
    "react-native/split-platform-components": 2,
    "react-native/no-inline-styles": 2,
    "react-native/no-color-literals": 2,
    "react-native/no-raw-text": 2
  }
}

• 使われていないstyleを検知したいだけならno-unused-stylesだけでOK
• エディタと連携していれば赤線がついてすぐに分かる！