To implement the Airbnb React/JSX Style Guide, we need to install some packages, such as eslint, eslint-config-airbnb, eslint-plugin-babel, and eslint-plugin-react.
I don't like to force anyone to use a specific IDE, but I would like to recommend some of the best editors to work with React.
- Atom - https://atom.io
- In my personal opinion, Atom is the best IDE for working with React. For this recipe, we are going to use Atom.
- Pros:
- MIT License (open source)
- Easy to install and configure
- Has a lot of plugins and themes
- Works perfectly with React
- Support for Mac, Linux, and Windows
- You can use Nuclide to React Native (https://nuclide.io)
- Cons:
- It's slow compared with other IDEs (if you have 8 GB of RAM you should be fine)
- Visual Studio Code (VSC) - https://code.visualstudio.com
- VSC is another good IDE for working with React.
- Pros:
- MIT License (open source)
- Easy to install
- It has a lot of plugins and themes.
- Works perfectly with React
- Support for Mac, Linux, and Windows
- Cons:
- Microsoft (I'm not a big fan of Microsoft)
- Configuration can be confusing at the beginning
- Sublime Text - https://www.sublimetext.com
- Sublime Text was my first love, but I have to accept that Atom has taken its place.
- Pros:
- Easy to install
- Has a lot of plugins and themes
- Support for Mac, Linux, and Windows
- Cons:
- Is not free ($80 USD per license).
- Is still not mature enough to work with React.
- Some plugins are hard to configure.
Installing all the necessary packages:
npm install eslint eslint-config-airbnb eslint-plugin-react eslint-plugin-jsx-a11y
There are some rules of Airbnb React/JSX Style Guide that I prefer not to use or change the default values a little bit, but it depends whether you keep them or remove them.
You can check all the ESLint rules on the official website (https://eslint.org/docs/rules) and all the special React ESLint rules at https://github.com/yannickcr/eslint-plugin-react/tree/master/docs/rules.
The rules that I prefer not to use or I prefer to change the default values of are as follows:
- comma-dangle: off
- arrow-parens: off
- max-len: 120
- no-param-reassign: off
- function-paren-newline: off
- react/require-default-props: off