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

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

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

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

<View
  style={...}
>

となったり、

<View
  style={...}
  >

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

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

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

NuxtのESLintがよかった

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

あのいい感じにできるのならやってみようかなと思い、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するのか、個別にルールを選んでいくのかはお好みです。