React Native Expo 環境構築デバックまで

Expoプロジェクト作成後に開発環境を整えたときのメモ書きです。 注意点としてEslintのルール設定は各自調べてから設定することをおすすめします。

VSCodeで開発をすすめる

拡張機能で

  • ReactNaitve Toolsを追加する
  • ESlintを追加する
  • Prettierを追加する

プロジェクトのディレクトリにてESLint、Prettierのインストールコマンド実行

ESLint

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Ptettier

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

プロジェクトディレクトリに.eslintrc.jsonを追加

.eslintrc.json

{
    "env": {
      "browser": true,
      "es6": true
    },
    "extends": [
      "airbnb",
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:prettier/recommended",
      "prettier/react"
    ],
    "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "ecmaVersion": 11,
      "sourceType": "module"
    },
    "plugins": ["react", "jsx-a11y", "import", "prettier"],
    "rules": {
      "react/prefer-stateless-function": 0,
      "react/jsx-filename-extension": 0,
      "no-use-before-define": 0,
      "react/destructuring-assignment": 0,
      "react/prop-types": 0,
      "react/jsx-no-bind": 0,
      "react/state-in-constructor": 0,
      "prettier/prettier": "error",
      "react/display-name": 0
    }
  }
  

.vscodeフォルダ内にlaunch.jsonとsettings.jsonを追加

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to packager",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "attach"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": ["<node_internals>/**"],
      "program": "${workspaceFolder}/node_modules/expo/AppEntry.js"
    }
  ]
}

settings.json

{
  "javascript.format.enable": false,
  "editor.autoFixOnSave": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": null,
  "eslint.enable": true,
  "react-native.packager.port": 19001
}

expoのプロジェクトディレクトリでexpo start を実行する

expoのアプリケーションが立ち上がったらVSCodeのデバックを実行する

実行完了後以下の表示がターミナルに表示される。

iOSのシュミレーションを立ち上げる

アプリが立ち上がったらCmd+Control+Z押下、モーダルが出力されるのでその後にDebugRemotoJSを押下する

次にVSCode側でデバックポイントを貼ってみる

ソースコードの左側にある赤●がデバックポイントになります。

デバックで止めた際は左側にあるVARIABLESもしくはソースコードの変数等にマウスをあわせると中身のデータがみれるかと思います。

参考資料

VSCodeでESLint+typescript-eslint+Prettierを導入する v3.0.0

https://qiita.com/madono/items/a134e904e891c5cb1d20