How to Set Up Airbnb Style Guide for React Projects

Create your own Airbnb Style Guide ESLint / Prettier setup for React Projects

Even if you are the only developer on a project, maintaining a consistent code style becomes more difficult as time goes on. That is why we need a style guide.

Style guides are written so that new developers may quickly become comfortable with a code base and then generate code that other developers can understand.

What is the Airbnb Style Guide, exactly?

The Airbnb style guide is a set of best practices and guidelines for generating quality code. It is one of the most popular style guides available on Github.

I’m sure you’ve heard about the Airbnb React/JSX Style Guide, but do you use your own configuration for your React projects? So, along with ESLint and Prettier, I’ll highlight a popular technique to configure Airbnb React/JSX Style for a React Project in this article. Let’s get started!!!

Airbnb React/JSX Style Guide

It is one of the most widely used style guides for React code. The existing JavaScript standards are the foundation of this style guide. However, some practices may be included or excluded.

I’ve merely included generic React development practices in this article. However, if you want a more in-depth look at the Airbnb React/JSX Style Guide, make sure to check out the GitHub repository. (Airbnb React/JSX Style Guide)

Basic Rules

• Each file should only include one React component. Multiple Stateless, or Pure, Components are, however, permitted per file.
• Use the JSX syntax at all times.
• Do not use React.createElement unless you’re initializing the app from a file that is not JSX.

Class vs React.createClass vs stateless

• When you have to maintain some internal state and/or refs, the better way is to use class extends React.Component over React.createClass

• If there’re no states to maintain, go with a normal function instead of class.

Naming

• Use .jsx extension for React components.
• Reference Naming: For React components, use PascalCase, and for their instances, use CamelCase.
• Component Naming: Assign the component name to the filename. However, you can use the directory name as the component name and index.jsx as the filename for a root component.
• Higher-order Component Naming: As the displayName of the component, use a concatenation of the higher-order component’s name and the passed-in component’s name.
• Props Naming: When possible, don’t use the same DOM component prop name for different uses.

Declaration

• When naming components, avoid using displayName. Instead, use a reference to name the component.

Methods:

• Bind event handlers for the render method in the constructor.

• For internal methods of a React component, do not use the underscore prefix

• Make sure to return a value in your render methods.

Quotes

• For JSX attributes, use double quotations (“), but for all other JS, use single quotes (‘) instead.

Spacing

• Add a usual single space in your self-closing tag.

Props

• Prop names should always be written in camelCase, or PascalCase if the prop value is a React component. Implementing Airbnb React/JSX Style Guide

Tip: Build Great Design Systems and Micro Frontends

Take frontend development to the next level with independent components. Build and collaborate on component-driven apps to easily unlocks Micro Frontends, and to share components.

OSS Tools like Bit offer a great dev experience for building and composing independent components, and build solo or together with your team.

Give it a try →

Installing the Style Guide

Create ReactJS App

Let’s make a ReactJS application called “react-project.” You can use the following commands to install your app in the directory you specify.

npx create-react-app react-project

Installing Eslint

Eslint is a highly adaptable linter. However, for a newcomer, Eslint’s choices can be huge. And this is where the AirBnB’s style guide comes in very handy.

Now we are ready! Let’s install Eslint with the following command.

npm install eslint --save-dev

To enforce rules, Eslint needs a configuration file. Type the following command to create a configuration file quickly and easily.

npx eslint --init

You will be asked a few questions during Eslint configuration. We can select to follow the Airbnb style guide when we set up ESLint in our app.

Following this query, eslint will verify if any dependencies are missing and if so, will give suggestions to install them as well. As a result, you should have a .eslintrc.json file in your directory.

This is how your .eslintrc.json file will look.

You can change the settings in your .eslintrc.json file to modify each of the rules. If the file contains JSX code, I’ve disabled the rule that needs you to import ReactJS. For that, you can simply override rules in .eslintrc.json

Prettier

We’re almost done, but we still need to install one more npm package, eslint-config-prettier, to make Eslint and Prettier work together.

This is significant since your IDE/default Editor’s setup may format your code differently than you require for your ESLint configuration.

You also can try it by typing the following command to install Prettier locally.

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

After that, add Prettier to the “extends” array in your .eslintrc file. Make sure it’s the last item on the list so it can override other settings.

"extends": [ "airbnb", "plugin:prettier/recommended" ]

We now have a working React JS app with ESLint, Prettier, and AirBnB style. Let’s Try removing a quotation or adding extra space in js or CSS files and You will notice that errors appear in the Problems window right quickly.

Some tips:

• Now You can simply formats and fixes all flexible errors in the code on save. Just adding some line of code to settings.json would be enough. (VS code only)

"editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

• In the package.json , include a lint and formatting script.

"scripts": {
    "lint": "eslint --fix main.js",
    "format": "prettier -w ."
  }

• To make the experience way more better you can install Prettier and ESLint extension.

Since we utilized React as the library while building up ESLint and then added Prettier, you may have run into some issues. This happens when both React style guide and Prettier attempt to format and lint your code.

Since Airbnb’s style guide also includes rules and recommendations for React, it is best to drop the React plugin from .eslintrc.js.

There is even a package called eslint-plugin-security that’ll help find Security holes in your JavaScript code. I hope this post helped you get started with Eslint and Prettier.

Final Thoughts

Combining Airbnb style, ESLint, and Prettier into our workflow has enabled us to improve code quality and maintain a consistent style guide among teams.

You can now keep consistent and tidy code once you’ve set up your ReactJS project using these tools. You’ll also be notified if there are any linting or formatting issues.

However, I would suggest to go ahead and look over the documentation for each of these tools. Thank you for reading…!

Learn More

Building a React Design System for Adoption and Scale

Set Up ESLint and Prettier in a React TypeScript App (2022)

Building a Design System like Uber and Airbnb

Tools for Consistent JavaScript Code Style