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) }