how-to-configure-text-editors.md

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.

SublimeText

1. Install SublimeText 3Download link
2. Linter & Snippets
   Easiest with Package Control and then "Package Control: Install Package" (Ctrl+Shift+P)
   2.1 Install Package Control
   2.2 Install Packages
   • Babel
   • Sublimelinter
   • SublimeLinter-contrib-eslint
   • SublimeLinter-contrib-stylelint
   • [Babel Snippets](https://packagecontrol.io/packages/Babel Snippets)
3. Formatters

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
npm install stylelint

You may need to restart sublime text for changes to take effect.

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

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

You may need to restart atom for changes to take effect