dieterm.github.io

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.

WebStorm

Create a new project based on React Starter Kit template

react-project-template-in-webstorm

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.

jsx-support-in-webstorm

Configure JavaScript libraries for auto-complete

javascript-libraries-in-webstorm

Enable ESLint support

eslint-support-in-webstorm

Enable CSSComb by following the instructions here.

If you have trouble with autoreloading try to disable “safe write” in File > Settings > System Settings > Use "safe write" (save changes to a temporary file first)

Atom

Install atom packages

• linter
• linter-eslint
• linter-stylelint
• react

apm install linter linter-eslint react linter-stylelint

Install local npm packages

• eslint
• babel-eslint
• eslint-plugin-react
• stylelint

yarn add --dev eslint babel-eslint eslint-plugin-react stylelint

You may need to restart atom for changes to take effect

SublimeText

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

• Babel
• Sublime-linter
• SublimeLinter-contrib-eslint
• SublimeLinter-contrib-stylelint

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

yarn add --dev eslint@latest
yarn add --dev babel-eslint@latest
yarn add --dev eslint-plugin-react
yarn add --dev stylelint

This site is open source. Improve this page.