Zenn
Closed13

既存の Next.js プロジェクトに XO を導入

Next.js
React
ESLint
xo
komenzarkomenzar

eslint に変わるlinterとしてXOというものがあると知りました。今回は既存のリポジトリで適用してみます。

気になっていること

  • Prettierは必要なのか
  • Next.js には eslint-config-next があるけど、うまく使えるのか
  • VS Code の拡張機能
komenzarkomenzar

すでにeslintの設定をしているNext.jsプロジェクトを前提にします。Next.jsのドキュメントにあるESLintのページにしたがってセットアップしています。

参考にするのは xojs/xo に上がっていたissue。適宜yarnに読み替えます。新しいブランチを切って、作業を始めます。また、prettierも一度アンインストールしてしまおうと思います。prettierの有無でどれほど変わるのか確認するためです。

Remove eslint and eslint-config-next

eslint と eslint設定ファイル、prettierを削除します。

yarn remove eslint eslint-config-next eslint-config-prettier eslint-plugin-prettier prettier
komenzarkomenzar

Remove lock file, node_modules/, and reinstall dependencies:

eslint, prettier の設定ファイルも一度消します。

rm -fr node_modules yarn.lock .eslintrc.json .prettierrc.js
yarn
komenzarkomenzar

Remove ESLint config created by create-next-app:

yarn実行後にconfigファイルは生成されていなかったので無視します。

komenzarkomenzar

Create XO config to include Next.js's ESLint plugin:

ルートディレクトリ直下に.xo-config.jsファイルを作ります。
package.json に設定をかきます。

package.json
{ ...
  "xo": {
      "extends": [
        "plugin:@next/next/core-web-vitals"
      ]
    },
...}
komenzarkomenzar

Replace next lint with xo in package.json:

package.json のlintスクリプトを書き換えます。

package.json
 "scripts": {
-    "lint": "next lint"
+    "lint": "xo"
 }

ターミナルでlintを実行すると、大量の修正点が出てきました！ xo コマンドだけだとエラーが出るだけで修正はされないんですね。修正もしたいので、さらに変更

package.json
 "scripts": {
-    "lint": "xo"
+    "lint": "xo --fix"
 }
komenzarkomenzar

使用後の疑問点

  • props に文字列を渡すときに{ }に囲まれているといやで導入していたreact/jsx-curly-brace-presenceが特に設定されていない。これは追加したい。
  • Next.jsのプラグインを入れたけど、xoのドキュメントには "JSX is supported by default, but you'll need eslint-config-xo-react for React specific linting. " とある。eslint-config-xo-reactは入れるべきか。
komenzarkomenzar

VS Code に拡張機能を入れる

  • eslint, prettier を無効にする
  • VS Code の拡張機能でxoを検索、拡張機能をいれる。
komenzarkomenzar

react/jsx-curly-brace-presenceの使用

ためしに特に準備せずrulesに入れてみると、次のようなエラーが出た

Definition for rule react/jsx-curly-brace-presence was not found.

eslint の場合は eslint-config-react を入れるものだが、xoではどうすれば？

xojs/eslint-config-xo-reactを読むと、xoと使う場合のインストール方法はこれ

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

extendsに追加。

package.json
  "xo": {
    "extends": [
      "plugin:@next/next/core-web-vitals",
      "xo-react"
    ],
    "rules": {
      "react/jsx-curly-brace-presence": [
        "warn",
        {
          "props": "never",
          "children": "never",
          "propElementValues": "always"
        }
      ]
    }
  },

これでjsx-curly-brace-presenceが動きました。

komenzarkomenzar

感想

NO Config で使える！というのが売りだと思っていたのですが、意外と設定めんどくさくないか？というのが正直な感想です。React で使う場合は eslint-config-xo-react というconfigが用意されていますが、Next.js は公式がeslint-config-next を用意していて変な挙動を起こしました。（react/react-in-jsx-scopeがオンになっているが、nextjsだと不要だったり）

また、既存のプロジェクトのeslintを置き換えるには、けっこう書き換え作業があるなと感じました。xo --fixでは治らない部分が割とある印象です。（react/function-component-definition、unicorn/filename-caseなど）

さいごに個人的な好みが合わないルールがあった場合、なんだかんだ自分でルールを上書きしてしまうのでやっぱ意味なくないか？となりました。チーム間でコードを共有する、仕事を兼任する場合などは助かるかもしれませんね。個人的に気になったのはreact/function-component-definitionでFCの宣言にアロー関数が認められていなかったことですね。

エディタ設定の問題ですが、こっちのブランチではxoを導入しているのにあっちだとeslintだ、という状況を産んでしまうと面倒でした。これはうまく設定できるもんなのか？リポジトリごとで違っても面倒ですね。

komenzarkomenzar

後から振り返るときのためのまとめ

xoを導入することになった場合の手順をまとめておく

  • eslintを削除
  • xo をインストール
  • xo の設定ファイルを作る（package.jsonに書くのが公式推奨）
  • eslint-config-next などを設定に追加
  • prettier をインストール
  • エディタの拡張機能を追加
このスクラップは2022/10/12にクローズされました