More than 5 years have passed since last update.

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

Posted at 2017-12-07

はじめに

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 などをカスタマイズしていけばよさそうです。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up