PIYO - Tech & Life -

Nuxt.jsと同等ESLint設定を他のプロジェクトでも使う

Nuxt ESLint ReactNative

先日書いたようにVisual Studio Codeを使い始めました。

Emacs卒業なるか。JS用のエディタとしてVS Code使い始める際に設定したこと。 - PIYO - Tech & Life -
普段使いのエディターはEmacsでして、仕事で一番書いている割合の多いRailsやテキストを書く際に使っています。 JavaScriptが面倒です。JSXやVueコンポーネントなど少々複雑なフォーマット
blog.piyo.tech

いざ手持ちのReact NativeプロジェクトをVS Codeで開いて編集し保存したら自動的にESLintによるフォーマットが効いてくれた！

のですが…、保存のたびに結果が変わる挙動をしてしまいました。かわるというか、2つのパターンを行ったり来たりというか、結果が揺れる感じです。

そのプロジェクトはReact Nativeのプロジェクトで、保存のたびに↓のような感じで

<View
  style={...}
>

となったり、

<View
  style={...}
  >

のようになったりといったり来たり。 こんなの困ります。保存するたびに差分ができるなんて！

まあね、言われてみればESLintの設定をごちゃっとやっていてなんだかよくわかっておらず設定した節があります。どこかに矛盾があるんですかね。

そこでESLintの設定を見直すことに。

NuxtのESLintがよかった

Nuxt.jsを触ったとき、ESLintの効きがちょうどいいなーと思った記憶があります。それを思い出して調べてみると、Nuxtのプロジェクトに@nuxtjs/eslint-configなるパッケージが入っていました。

GitHub - nuxt/eslint-config: ESlint config used for Nuxt.js
ESlint config used for Nuxt.js. Contribute to nuxt/eslint-config development by creating an account on GitHub.
github.com

あのいい感じにできるのならやってみようかなと思い、READMEにしたがって入れてみました。 そして、既存の.eslintrcをバッサリ捨てて新しく以下のように書き換えて実際にファイルを触ってみると、保存のたびに結果が揺れることがなくなりました。

{
  "root": true,
  "parserOptions": {
    "parser": "babel-eslint",
    "sourceType": "module"
  },
  "extends": [
    "@nuxtjs"
  ]
}

React/React Nativeでの追加設定

NuxtはVueベースなので、React Nativeに関係する指摘をしてほしい場合にはルールが足りません。

  • eslint-plugin-react
  • eslint-plugin-react-native

の導入と設定追加を行います。

% npm install --save-dev eslint-plugin-react
% npm install --save-dev eslint-plugin-react-native

.eslintrcに以下のように追加。

{
  "plugins": [
    /* ... */,
    "react",
    "react-native"
  ],
  "extends": [
    /* ... */,
    "@nuxtjs",
    "plugin:react/recommended",
    "plugin:react-native/all"
  ]
}

pluginsの指定は必須、extendsするのか、個別にルールを選んでいくのかはお好みです。