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

Emacs卒業なるか。JS用のエディタとしてVS Code使い始める際に設定したこと。 - PIYO Notes
普段使いのエディターはEmacsでして、仕事で一番書いている割合の多いRailsやテキストを書く際に使っています。 JavaScriptが面倒です。JSXやVueコンポーネントなど少々複雑なフォーマットのファイルを編集したり、サクっとESlintを書けたりするのがうまくいきません。いや、できないことはないけど惜しい感じで便利ではないのです。
blog.piyo.tech

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

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

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

1<View
2  style={...}
3>

となったり、

1<View
2  style={...}
3  >

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

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

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

NuxtのESLintがよかった

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

GitHub - nuxt/eslint: Collection of ESLint-related packages for Nuxt
Collection of ESLint-related packages for Nuxt. Contribute to nuxt/eslint development by creating an account on GitHub.
github.com

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

 1{
 2  "root": true,
 3  "parserOptions": {
 4    "parser": "babel-eslint",
 5    "sourceType": "module"
 6  },
 7  "extends": [
 8    "@nuxtjs"
 9  ]
10}

React/React Nativeでの追加設定

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

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

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

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

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

 1{
 2  "plugins": [
 3    /* ... */,
 4    "react",
 5    "react-native"
 6  ],
 7  "extends": [
 8    /* ... */,
 9    "@nuxtjs",
10    "plugin:react/recommended",
11    "plugin:react-native/all"
12  ]
13}

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