そーす

福岡在住。iOS/Androidアプリ, Webフロントエンドのエンジニアです。Swift, Kotlin, JavaScript, ReactNative

ReactNativeでアプリの開発環境(エディタ, ESLint, Flow編)

私がReactNativeを使ってアプリを開発するときの環境や初期設定です。

Visual Studio Code

Visual Studio Code - Visual Studio

1ヶ月前位にAtomから乗り換えました。

最初に変えた理由は何となくエディタを変えたかったので(笑)

とりあえず使ってみるとすごく快適に使えました。

Atomから乗り換えて一番よかったのは、エディタの設定です。

f:id:saburesan:20170602093805p:plain

atomはインストールしたパッケージの設定変更や、エディタ自体の設定変更が面倒(だと個人てきには思っていて)。

VSCodeは上記設定画面からエディタの設定とインストールしたパッケージの設定が行えます。

また、設定の変更が容易でわかりやすいです。

画面右がデフォルトから変更したユーザ個人の設定で、左が現在変更可能な設定一覧です。

例えば、よく使用するものfiles.autoSaveを変更したいとします。

f:id:saburesan:20170602093454p:plain

デフォルトではoffになっています。

他には何が設定できるかはfile.autoSaveはコメントに書いてあるのですが、

変更はカーソルを上にもってきた時に左に表示されるエンピツアイコンをクリックすると

f:id:saburesan:20170602094946p:plain

画像のように設定一覧だしてくれて選択出来ます。

これはめっちゃいいなーと思いました。

ESLint

eslint.org

ESLintはJavascriptの構文チェックツールです。

設定したコーディング規約に準拠していない場合はエラーを出してくれます。

Fileのパスの検証などもやってくれるので実行前に検出してくれます。

インストー

規約は自分で作るとかなり面倒なので、Airbnbが公開しているeslint-config-airbnbというのを使っています。

github.com

パッケージをインストールして

export PKG=eslint-config-airbnb;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"

.eslintrcを作成して

{
  "extends": "airbnb"
}

を追記します。

エディタにPluginをインストー

次にエディタにeslintのプラグインをインストールします。

VSCodeでプラグインをインストールするには⌘+Ctrl+XでVisualStudioCodeのプラグインマーケットプレイスから検索ができます。

ESLintと打つと一番上に出てくるプラグインをインストールします。

f:id:saburesan:20170602104426p:plain

innsu

そうするとESLintのエラーをエディタ上で確認することが出来ます。

f:id:saburesan:20170602105129p:plain

エディタ上の赤い波線がESLintのエラー箇所になります。

画面下部のエラー一覧の画面は⌘+Ctrl+Mで出ます。

あとはエラー文言にそって修正していくだけです。

ReactNative用の設定を追記

eslint-config-airbnbにはReactNativeの設定が無いため追記します。

ReactNativeではXXX.ios.jsとXXX.android.jsをimport XXX from './XXX';という形式でインポートできるのですが、これはESLint上だとエラーになるので、.eslintrcにエラーが出ないように追記します。

{
  "extends": "airbnb",

  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [
          ".js",
          ".ios.js",
          ".android.js"
        ]
      }
    }
  },
  "env": {
    "node": true
  }
}

settingsが追記分です。これでXXX.ios.jsのインポートエラーが解消されます。

Flow

flow.org

Flow_はFacebookが開発しているJavascript用の静的型チェックツールです。

プラグインのインストー

ReactNativeはデフォルトでFlowの設定がされているので、エディタのプラグインのインストールとflow-binのインストールだけで大丈夫です。

プラグインはESLintと同じように、

マーケットプレイスからFlow Language Supportをインストールします。

Flow Language Supportがグローバルにインストールされているflow-binを必要としますので、

npm i -g flow-bin

でインストールします。

これでVSCode上にもFlowのエラーが表示されるはずです。

エラー対処

おそらく、node_modulesの中もチェックされて大量にエラーが出てるかと思います…

そこで.flowconfignode_modulesをチェックしないように追記します。

[ignore]
.
.
.

.*/node_modules/.*

これでnode_modules以下のエラーは消えますが、react-nativeモジュールが見つからないエラーが出ます。

これはreact-nativeというモジュールをFlowが認識できるように定義することで対応できます。

.flowconfig[libs]というのがあるのですが、この[libs]に指定されているフォルダに定義を宣言することでFlowはその定義を元にチェックを行います。

React-Nativeのデフォルトでは

node_modules/react-native/Libraries/react-native/react-native-interface.js
node_modules/react-native/flow
flow/

上記のようになっているのでflowフォルダを作成して以下の内容のファイルを作成します。

declare module 'react-native' {
  declare module.exports: any;
}

この方法だとエラーはでなくなるのですが、これだと新しいモジュールの度に追加する必要があり、コードジャンプや補完が効かなくなります…

他の解決方法があれば知りたい…

おそらくmoduleでESLintのエラーがでるので、さらに.eslintrc

  "plugins": [
    "flowtype"
  ]

を追記します。

これでFlowの設定は一旦終わりです。

あとはflow/に定義ファイルを入れるとプロジェクト全体で定義のFlowチェックが効きます。

定義

// flow/Types.js
declare type Human = {
  name: string,
  age: number,
};