eslint-prettier-airbnb-react

ESlint + Prettier + Airbnb Style Guide Configuration for React

Installation

.eslintrc.js (or .eslintrc.json)
.prettierrc.js (or .prettierrc.json)
Packages
Main Packages
ESlint
Prettier
Airbnb Configuration
eslint-config-airbnb
This package provides Airbnb's .eslintrc as an extensible shared config.
eslint-plugin-jsx-a11y (Peer Dependency)
Static AST checker for accessibility rules on JSX elements.
eslint-plugin-react (Peer Dependency)
React specific linting rules for ESLint
eslint-plugin-import (Peer Dependency)
Support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.
babel-eslint
A wrapper for Babel's parser used for ESLint.
We decided to include this since Airbnb Style Guide uses Babel.
ESlint, Prettier Integration
eslint-plugin-prettier
Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
eslint-config-prettier
Turns off all rules that are unnecessary or might conflict with Prettier.
Created Configuration Files
Once files are created, you may edit to your liking.

eslintrc(.js/.json)
more info
{
"extends": [
"airbnb",
"plugin:prettier/recommended",
"prettier/react"
],
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jest": true,
"node": true
},
"rules": {
"jsx-a11y/href-no-hash": ["off"],
"react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
"max-len": [
"warn",
{
"code": (SET BY USER),
"tabWidth": 2,
"comments": (SET BY USER),
"ignoreComments": false,
"ignoreTrailingComments": true,
"ignoreUrls": true,
"ignoreStrings": true,
"ignoreTemplateLiterals": true,
"ignoreRegExpLiterals": true
}
]
}
}
prettierrc(.js/.json)
more Info
{
"printWidth": (SET BY USER),
"singleQuote": true,
"trailingComma": (SET BY USER)
}