VS Code is hands down the best editor for productivity and debugging when it comes to React Native.

I'm a nerd so I always go over the top in (mis-)using tools. Not a lot of people know about VS Code's Tasks feature or do not care about it, but for me it's something essential to include in my React Native projects. I don't like to leave VS Code during development.

Tasks are simple JSON objects that execute a task and can be be summoned via the keyboard shortcut cmd+shift+b or in the command palette via Tasks: Run Build Task. A task can be a script, a command, an npm run-task, a make task etc.

By default, when you don't write tasks yourself VS Code will autosuggest all detected task runners like Make, NPM, Gulp, Rake. For React Native development I recommend you bundle a JSON file with the tasks relevant to the project.

In contrast to other VS Code settings like Snippets or config, Tasks are scoped to a project and can not be applied globally in your VS Code installation. Tasks for a project reside in ./vscode/tasks.json

Here is a list of Tasks I tend to use again and again in every React Native project:

And here is the config. I mostly rely on make and NPM for running tasks, with the odd shell command being directly invoked:

json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "🚇  Start Metro",
      "detail": "Starts the Metro bundler",
      "type": "npm",
      "script": "start",
      "group": "build"
    },
    {
      "label": "🍎  Run iOS (Debug, Simulator)",
      "detail": "Runs the Debug scheme in the iOS Simulator",
      "type": "npm",
      "script": "ios:debug",
      "group": "build"
    },
    {
      "label": "🍎  Run iOS (Debug, Device)",
      "detail": "Runs the Debug scheme against a USB connected device",
      "type": "shell",
      "command": "npm run ios:debug -- --device",
      "group": "build"
    },
    {
      "label": "🤖  Run Android (Debug)",
      "detail": "Runs the debug variant against all devices/emulators available to adb",
      "type": "npm",
      "script": "android:debug",
      "group": "build"
    },
    {
      "label": "📦  Install Cocoapods",
      "detail": "Installs Cocoapod dependencies for iOS",
      "type": "shell",
      "group": "build",
      "command": "bundle exec pod install --project-directory=./ios",
    },
    {
      "label": "📦  Clean install",
      "detail": "Deletes all dependencies and artifacts and reinstalls them from scratch",
      "type": "shell",
      "command": "make clean_install",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "silent",
        "focus": false,
        "panel": "shared",
        "showReuseMessage": false,
        "clear": true
      }
    },
    {
      "label": "🏷  Compile Typescript",
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": "build"
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared",
        "showReuseMessage": true,
        "clear": true
      }
    },
    {
      "label": "🛠  Open in Xcode",
      "detail": "Opens the iOS workspace in Xcode",
      "type": "shell",
      "command": "xed ios/Project.xcworkspace",
      "group": "build",
      "presentation": {
        "echo": false,
        "reveal": "silent",
        "focus": false,
        "panel": "shared",
        "showReuseMessage": false,
        "clear": true
      }
    }
  ]
}