メインコンテンツまでスキップ

Visual Studio Code

ここではVisual Studio Code (以下VS Code) での開発で有用なプラグインを紹介します。

React Native Tools​

VS CodeプラグインであるReact Native Toolsを利用することで開発中のモバイルアプリケーションをデバッグできます。

VS Codeで、React NativeのTypeScriptコードをデバッグできるように、React Native Toolsをセットアップします。

React Native Toolsのインストール​

VS CodeのReact Nativeの拡張ツールである、React Native Toolsプラグインをインストールします。

Visual StudioマーケットプレイスのReact Native ToolsページのInstallをクリックしてインストール。

または、VS Codeの「拡張機能」でReact Native Tools検索してインストール。

起動構成を追加する​

プロジェクトルート配下の.vscode/launch.jsonに以下を追加してください。ファイルが無い場合は新規に作成してください。

.vscode/launch.json
{
  "configurations": [
    {
      "name": "Attach to packager",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "attach",
      "port": "8081"
    }
  ]
}
備考

portにはMetro Bundlerのポート番号を指定してください。デフォルトは8081です。

ポート番号をデフォルトから変更している場合はその番号を指定してください。

デバッグ​

以下の手順でデバッガーを起動します。

  1. デバッグ対象のアプリで開発者メニューを表示する
  2. Debug Remote JSを選択する
  3. ブラウザでdebugger-uiが立ち上がるのでそのタブを閉じる
  4. VS Codeの「実行とデバッグ」からAttach to packagerをクリックして実行する
  5. 開発者メニューからアプリをリロードする
備考

開発者メニューの表示方法は端末によって異なります。

  • 実機：端末をシェイクする
  • iPhoneシミュレータ：Windowsの場合Ctrl+Z、 Macの場合Cmd+Z
  • Androidエミュレータ：Windowsの場合Ctrl+M、 Macの場合Cmd+M

Lint、フォーマッタ​

このプロジェクトでは、LintツールとしてESLint、フォーマッタとしてEditorConfigとPrettierの設定をしています。

次にあげる3つのプラグインをインストールして、React Nativeのプロジェクトを開くと、 ESLintとPrettierのチェックが有効になります。 チェックに違反しているコードは黄色か赤の波線が表示されます。

その他​

に最終更新