❤️

eslintに疲れたので、ReactにXOを導入してみた

2022/08/21に公開

React Native

前提

eslintは、最近のフロントエンドでは必須レベルのjsのリンターです。
ただ使ってみると、セットアップが大変だったりします。prettierの対応、typescriptの対応、加えてベストプラクティスを探し、複数のpluginの導入と依存関係の解決、メンテナンスしていくなど.. 結構コストかかります。
そんな苦労せず、最初からprettier + typescript + ベストプラクティスからeslintを始めれたら最高ではないでしょうか? そんな夢をXOという名のeslintのラッパーが叶えてくれます。今回はXOを導入してみようかと思います。
react-nativeに導入したときのコマンドや設定を使いますが、reactでも変わらずに導入できると思います。

https://github.com/xojs/xo

環境

macOS: 12.5.1
react: v18.0.0
react-native: v0.69.4
typescript: 4.7.4 
node: v16.14.2
yarn: v1.22.19

そもそもXOとは

Zero-configではじめれるJavaScript/TypeScriptリンター(eslintのラッパー)です。読みやすさを意識したベストプラクティスが最初から体験でき、複数のeslintのpluginが内包しています。カスタマイズもeslintと同様に可能です。typescriptデフォルトです。必要に応じてprettierのコードスタイルも適応できます。

準備

インストール

本命のXOを以下のコマンドで導入します

yarn add -D xo

https://github.com/xojs/xo

xoは、JavaScript/TypeScriptリンターです。React周辺のリンターのルールは含まれていません。Reactのカスタマイズをするには、以下を導入します。

yarn add -D eslint-config-xo-react eslint-plugin-react eslint-plugin-react-hooks

ファイル周りの設定

pacage.json

以下を追記します。eslintConfigは必要なら書いてください。

  "scripts": {
    ...
    "xo": "xo",
    "xo:fix": "xo --fix"
  },
  
  // ↓ ※webstormのimportのエラーを消すために必要でした。必要なければ消していいかと思います。
  "eslintConfig": {
    "parserOptions": {
      "sourceType": "module",
      "ecmaVersion": 2015
    }
  }

.xo-config.js

xoの設定ファイルはeslintの設定ファイルにあたります。ここで好みのeslintの設定をカスタマイズすることができます。自分が追記したのは以下の通りです。ちなみにjsファイルを使っているのはjsonよりもコメントが書くのが容易なためです。コメントにある「以下好み」は、必須ではありませんので、おまかせします。

module.exports = {
  // reactのeslintを適応する
  extends: ['xo-react'],
  rules: {
    // コンポーネントのファイル名はPascalCase、hooksのファイル名はcamelCaseを使いたいので有効にしておく
    'unicorn/filename-case': [
      'error',
      {
        cases: {
          pascalCase: true,
          camelCase: true,
        },
      },
    ],
    // コンポーネントはarrow関数で定義する
    'react/function-component-definition': [
      'error',
      {namedComponents: 'arrow-function'},
    ],
    // import文で拡張子チェックはいらない
    'import/extensions': 'off',
    // React 17以降はJSXの対応済みのための'React'のimportはいらない
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off",
    // 以下 好み
    // 関数の引数は2つまで。3以上だとオブジェクトにしてまとめる
    'max-params': ['error', 2],
  },
  // 以下 好み
  // 末尾にセミコロンはつけない
  semicolon: false,
  // prettierを有効にする
  prettier: true,
}

webstormの場合

webstormを使っている場合、以下の設定をする必要があります。
以下のコマンドで、スキーマをダウンロードして下のスクリーンショットに従ってCodeStyleのSchemeを適応するとwebstormでも使えるようなります。

git clone git@github.com:jamestalmage/xo-with-webstorm.git

終わり!!

実行

以下のコマンドで実行できます。文字数が少ないのが実行しやすくていいですね。

// リンター & フォーマットのエラー検出
yarn xo
// リンター & フォーマット の修正
 yarn xo:fix

感想

今回eslintを入れる代わりにxoを導入してみました。eslintを導入に時間を無駄に潰すことが多かったですが、かなり簡単に導入でき時間の節約になりました。
今後xoを使いながらコードを書いていくので、追加したほうがいい設定などあれば随時追加していこうと思います。ありがとうございました。