eslint-config-airbnb

What is eslint-config-airbnb?

The eslint-config-airbnb package provides a set of ESLint rules that follow Airbnb's JavaScript style guide. It is widely used in the JavaScript community for enforcing a consistent code style and catching common coding errors.

What are eslint-config-airbnb's main functionalities?

JavaScript Style Rules

Enforces JavaScript style rules as per Airbnb's style guide. This includes rules for syntax, best practices, variable naming, line breaks, and more. The code sample shows how to extend these rules in a project's package.json file.

"eslintConfig": { "extends": "airbnb" }

React Specific Rules

Provides a set of rules specific to React, including hooks rules. This helps in maintaining code quality and consistency in React components. The code sample demonstrates how to extend these rules for React in a project's package.json file.

"eslintConfig": { "extends": "airbnb/hooks" }

Import/Export Rules

Includes rules for managing import/export statements, ensuring they are used correctly and efficiently. The code sample indicates how to use the base rules without React-specific rules in a project's package.json file.

"eslintConfig": { "extends": "airbnb-base" }

Other packages similar to eslint-config-airbnb

eslint-config-standard

This package provides a standard set of rules for JavaScript code style. It is less opinionated than Airbnb and does not enforce JSX or React specific rules. It is a good alternative for those who prefer a more flexible approach to code style.

eslint-config-google

This package includes a set of ESLint rules based on Google's JavaScript style guide. It offers another comprehensive style guide but with different preferences and coding conventions compared to Airbnb's.

eslint-config-prettier

eslint-config-prettier disables all formatting-related ESLint rules that might conflict with Prettier, a code formatter. It is often used in conjunction with other ESLint configs to ensure that ESLint focuses on code-quality rules while Prettier takes care of formatting.

README

eslint-config-airbnb

This package provides Airbnb's .eslintrc as an extensible shared config.

Usage

We export three ESLint configurations for your usage.

eslint-config-airbnb

Our default export contains most of our ESLint rules, including ECMAScript 6+ and React. It requires eslint, eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y. Note that it does not enable our React Hooks rules. To enable those, see the eslint-config-airbnb/hooks section.

If you don't need React, see eslint-config-airbnb-base.

1. Install the correct versions of each package, which are listed by the command:

npm info "eslint-config-airbnb@latest" peerDependencies

If using npm 5+, use this shortcut

npx install-peerdeps --dev eslint-config-airbnb

If using yarn, you can also use the shortcut described above if you have npm 5+ installed on your machine, as the command will detect that you are using yarn and will act accordingly. Otherwise, run npm info "eslint-config-airbnb@latest" peerDependencies to list the peer dependencies and versions, then run yarn add --dev <dependency>@<version> for each listed peer dependency.

If using npm < 5, Linux/OSX users can run

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

Which produces and runs a command like:

npm install --save-dev eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# eslint-plugin-react-hooks@^#.#.#

If using npm < 5, Windows users can either install all the peer dependencies manually, or use the install-peerdeps cli tool.

npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb

The cli will produce and run a command like:

npm install --save-dev eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# eslint-plugin-react-hooks@^#.#.#

1. Add "extends": "airbnb" to your .eslintrc

eslint-config-airbnb/hooks

This entry point enables the linting rules for React hooks (requires v16.8+). To use, add "extends": ["airbnb", "airbnb/hooks"] to your .eslintrc.

eslint-config-airbnb/whitespace

This entry point only errors on whitespace rules and sets all other rules to warnings. View the list of whitespace rules here.

eslint-config-airbnb/base

This entry point is deprecated. See eslint-config-airbnb-base.

eslint-config-airbnb/legacy

This entry point is deprecated. See eslint-config-airbnb-base.

See Airbnb's JavaScript styleguide and the ESlint config docs for more information.

Improving this config

Consider adding test cases if you're making complicated rules changes, like anything involving regexes. Perhaps in a distant future, we could use literate programming to structure our README as test cases for our .eslintrc?

You can run tests with npm test.

You can make sure this module lints with itself using npm run lint.