If configured correctly, the Create React App provides a number of tools to improve the editing experience. Here are some tips to maximize your productivity:

Syntax highlighting

Extend the ESLint configuration

We recognize that further customization is required in some cases. You can now extend the base ESLint configuration true by setting the EXTEND_ESLINT environment variable to. For more information about available environment variables, see Advanced Configuration.

Note that setting any rule to ERROR will prevent the project from building.

Note:

  • We recommend extending the base configuration because removing it can cause problems that are hard to find
  • .eslintignore files will be respected
  • With TypeScript, you need to set up a Override object that specifically serves TypeScript files

In the package.json file, esLint is configured as follows:

  • This base configuration has been extended by a shared ESLint configuration
  • A new rule applies to all JavaScript and TypeScript files
  • New rules are set for TypeScript files only

Debug in the editor

Currently only Visual Studio Code and WebStorm support this feature.

Visual Studio Code and WebStorm support out-of-the-box debugging using the Create React App. This allows you as a developer to write and debug React code without leaving the editor, and most importantly, it enables you to have a continuous development workflow with minimal context switching because you don’t have to switch between tools

Visual Studio Code

You will need to install the latest version of VS Code and the VS Code Chrome Debugger extension.

Add the following block to your launch.json file and place it in a folder under the root of your.vscode application.

WebStorm

You will need to install the WebStorm and JetBrains IDE Support Chrome extensions.

In the WebStorm menu, Run selects Edit Configurations… . Then click + and select JavaScript Debug. Paste http://localhost:3000 into the URL field and save the configuration.

Start your application NPM start by running, then press ^D on macOS or F9 on Windows and Linux, or click the green debug icon to start debugging in WebStorm.

You can debug applications in the same way in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.

Automatic formatting code

Prettier is a tool for automatically formatting code in JavaScript, CSS, and JSON. Using Prettier, you can automatically format the code you write to ensure that the code in a project looks like Prettier. For more, see Prettier’s GitHub page and see it in action.

To format code at commit time in Git, we need to install the following dependencies:

npm install --save husky lint-staged prettier
Copy the code

You can also use YARN:

yarn add husky lint-staged prettier
Copy the code
  • Husky makes it possible to use NPM scripts like GPMOOks.
  • Lint-staged allows you to run scripts on staged files in Git. See the blog post about Lint-staged for more information about it.
  • Prettier is the JavaScript formatter we’ll run before committing.

Now, you can make sure that each file is formatted correctly by adding a few lines to the project root via package.json.

Next, you might need to integrate Prettier into your favorite editor. Read the section on Prettier GitHub’s page about editor integration.