VSCode: Launch create-react-app and Chrome with launch.json

Developing React (with create-react-app) and Visual Studio Code you usually press ESC-` and then npm start.
The script from create-react-app then automatically starts a Browser. That you then close.
hen reopen by pressing F5 to start Chrome in debug mode.

Let’s make these steps a little quicker.

Create a Task for npm start

Press Ctrl-Shift- and Select “Tasks: Configure Default Test Task”
This will create a tasks.json file.

In the tasks.json file you need to add a couple of values:
* isBackground: true – launch.json will not wait untill the task completes
* problemMatcher Needs to be defined to figure out when the task has completet its initialisation phase and it is safe to continue with the next task

Configure create-react-app

To prevent launching the browser you need to add in your .env-file following line:

BROWSER=none

More Info:
* .env-file

Configure the Launch.json file

Press F5 and select Chrome and a launch.json file will be created.
* Change the port to 3000 (create-react-app default)
* Add a preLaunchTask to start the task we defined earlier

Start Working

Tadaa, now you press F5 and can start debugging directly in vscode. The background task will continue running even when you stop debugging.

Stop Working

You need to terminate the task via ctrl-shift-p > terminate Task. (Or you just close vscode)

VSCode Extensions (August 2017)

Here are a couple of VSCode Extensions I currently am using.

tl;dr

Script to install all suggested Plugins

Installing Extensions

There are two ways of installing extensions. Either in the editor or via command line.

Editor

  1. Press Ctrl-P
  2. Paste Code like ext install eamodio.gitlens
  3. Click on install

Command Line

  1. Open command line
  2. Enter command code --install-extensions eamodio.gitlens

Markdown All in One

A litte tool that makes it a little easier to format Markdown documents
Adds useful shortcuts like ctrl-b to make something bold.

code --install-extension yzhang.markdown-all-in-one

Auto Close Tag

If you do not use Emmet shorthand, it is very useful of closing your html tags.

Sadly the plugin cannot figure out if you are defining a type in Typescript and also attempts to close the casting tags.

code --install-extension formulahendry.auto-close-tag

Auto Rename Tag

This plugin takes care of the closing tag of your html-tag. It also works for JSX&TSX files.

code --install-extension formulahendry.auto-rename-tag

GitLens

A great extension to vastly improve your git experience in vscode

code --install-extension eamodio.gitlens

TODO Highlight

Well it Highlights Todos… so well thats good.
You can extend it to display any type of label in your comments.

Plus it can generate a handy list of all todos in the project.
(Sadly jumping to the TODO in the List does not work in Ubuntu)

code --install-extension wayou.vscode-todo-highlight

Path Intellisense

Well it detects when you are trying to define a path to a file and autocompletes it for you.

In typescript it also correctly removes the file extension for imports.

code --install-extension christian-kohler.path-intellisense