Editor configuration

Intellij Ultimate

Code Style and Linting

Right-click .eslintrc.js, click Apply Eslint Code Style Rules, and select Automatic ESLint Configuration; then go to File -> Settings -> Editor -> Code Style -> Javascript, click the gear next to Scheme -> Import Scheme -> Intellij IDEA code style XML, then select js-style.xml.

In order to correctly format a file at any time, run the IntelliJ Reformat Code action, and then right-click in a window and click Fix ESLint Problems. You could also create a macro to do this for you.

Debugging

Ensure that you've started a local development server (see README.md for details).

In Intellij, go to Run -> Edit Configuations...; click + and select JavaScript Debug. Paste http://localhost:3000 (or the URL of the development server you wish to attach to) into the URL field. Ensure that you've selected the appropriate browser for your platform in the Browser dropdown and click OK to save the configuration.

Click the Debug symbol to open a new window to the URL configured earlier. You can set breakpoints and explore the page in the interactive debugger.

Note that breakpoints may not be hit the first time the browser loads as Intellij needs to download the source map form the browser. See known limitations in the Intellij React help for more information.

Visual Studio Code

Code Style and Linting

Install the ESLint plugin.

Debugging

Install the JavaScript Debugger plugin.