How to Configure Text Editors and IDEs for React.js

Tips and tricks on how to configure your favorite text editor or IDE to work with React.js/ES6+/JSX.

Create a new project based on React Starter Kit template

Make sure that JSX support is enabled in your project. This is set by default, if you create a new project based on React.js template.

Configure JavaScript libraries for auto-complete

Enable ESLint support

Enable CSSComb by installing CSSReorder plug-in

Install atom packages

apm install linter linter-eslint react

Install local npm packages

npm install --save-dev eslint babel-eslint eslint-plugin-react

You may need to restart atom for changes to take effect

Install SublimeText packages
Easiest with Package Control and then "Package Control: Install Package" (Ctrl+Shift+P)

You can also use SublimeLinter-contrib-eslint_d for faster linting.

Set Babel as default syntax for a particular extension:

Open a file with that extension,
Select View from the menu,
Then Syntax -> Open all with current extension as... -> Babel -> JavaScript (Babel).
Repeat this for each extension (e.g.: .js and .jsx).

Install local npm packages

npm install eslint@latest
npm install babel-eslint@latest
npm install eslint-plugin-react

Provide feedback