はじめに

React Nativeのプロジェクトで、Atomエディタを使って開発しています。
以下はAtom（Nuclideパッケージ）を使う環境で、JavaScriptのLinterを使えるようにした時のメモです。

lintとは

ソースコードの構文を解析するプログラム。
linterを導入すると、コードの構文チェックを自動で行ってくれます。

導入手順

バージョンは、npm 8.3.0, npm 5.5.1。

Atomパッケージのインストール

AtomのSettingsもしくはapmで以下のパッケージをインストールします。

linter
linter-eslint
linter-ui-default

その他、要求されたパッケージをインストールします。

以下の警告が出た場合は、Disable Linter か Disable Diagnostics のどちらかを選択します。

今回はDisable Linterを選択。
lintの結果はatom-ideのdiagnosticsのUIに表示されます。

サンプルアプリ作成

動作確認のためのアプリを作成します。

$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject

npmモジュールのインストール

eslint と babel-eslint をインストールします。

$ npm install eslint --save-dev
$ npm install babel-eslint --save-dev

今回は airbnb/javascript: JavaScript Style Guide を使いたいので、eslint-config-airbnb をインストールします。

$ npm install eslint-config-airbnb --save-dev

プロジェクトの import { AppRegistry } from 'react-native'; のコードについて、Atom上でエラーが出たので eslint-plugin-import もインストールします。

$ npm install eslint-plugin-import --save-dev

.eslintrcファイルの作成

プロジェクトのルートディレクトリに.eslintrcを作成します。

eslintrc

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "ecmaFeatures": {
    "classes": true,
  },
  rules: {
    // React Native ではJSファイルにJSXを書く
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    // React Nativeでは画像を相対パスで読み込む
    'global-require': 'off',
  },
}

動作確認

Atomを再起動して、何かコードを書きます。
以下のようにLinterが警告を出してくれるようになりました。

さいごに

React NativeのプロジェクトでAtomにLinterを導入する手順を紹介しました。
あとはプロジェクトに合わせて rules などをカスタマイズしていけばよさそうです。

[React Native] Atom (Nuclide) でLinterを導入する