otaldonunes / eslint-stylelint-prettier-airbnb-editorconfig-react

ESlint, Prettier and Stylelint with Airbnb Style Guide + EditorConfig | Automatic Configuration for React Projects

Apparently the official creator was no longer active in the community, so I decided to make this modified version. If you are interested in suggesting, contributing or implementing something, feel free to do a PR. (Credits at the end)

If you have mastered any language and want to help translating the readme or correcting the translations already done, click on this issue and/or do a PR.

README Translation

• Português
• 简体中文
• Espanõl
• Française

Installation

1. Navigate to your app directory where you want to include this style configuration.

   cd my-app

2. Run this command inside your app's root directory. (Note: this command executes the automatic-config.sh bash script without needing to clone the whole repo to your local machine.)

   exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/otaldonunes/eslint-stylelint-prettier-airbnb-editorconfig-react/main/automatic-config.sh 2> /dev/null)

3. Make selections for your preference of package manager (Npm, Yarn or Yarn Workspaces), file format (.js or .json), max-line size, and trailing commas (none, es5, all).

4. Look in your project's root directory and notice the four newly added/updated config files:

   • .eslintrc.js (or .eslintrc.json) (Install the ESLint extension, it can be easily added by pressing (Ctrl + P) in VS Code, pasting the following command (ext install ext install dbaeumer.vscode-eslint), and pressing enter.)
   • .prettierrc.js (or .prettierrc.json) (Install the Prettier - Code formatter extension, it can be easily added by pressing (Ctrl + P) in VS Code, pasting the following command (ext install esbenp.prettier-vscode), and pressing enter.)
   • .stylelintrc (Install the stylelint extension, it can be easily added by pressing (Ctrl + P) in VS Code, pasting the following command (ext install stylelint.vscode-stylelint), and pressing enter.)
   • .editorconfig (Install the EditorConfig for VS Code extension, it can be easily added by pressing (Ctrl + P) in VS Code, pasting the following command (ext install EditorConfig.EditorConfig), and pressing enter.)

Packages

Main Packages

1. ESlint
2. Prettier
3. Stylelint

Airbnb Configuration

1. eslint-config-airbnb
   • This package provides Airbnb's .eslintrc as an extensible shared config.
2. eslint-plugin-jsx-a11y (Peer Dependency)
   • Static AST checker for accessibility rules on JSX elements.
3. eslint-plugin-react (Peer Dependency)
   • React specific linting rules for ESLint
4. eslint-plugin-import
   • Support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.
5. stylelint-config-airbnb
   • This package provides Airbnb's .stylelintrc as an extensible shared config.
6. eslint-plugin-react-hooks
   • This package provides the Rules of Hooks.
7. 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

1. eslint-plugin-prettier

   • Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.

2. stylelint-prettier

   • Runs Prettier as a Stylelint rule and reports differences as individual Stylelint issues.

3. eslint-config-prettier

   • Turns off all rules that are unnecessary or might conflict with Prettier.

4. stylelint-config-prettier

   • Turns off all rules that are unnecessary or might conflict with Prettier.

Others

1. eslint-plugin-html
   • A ESLint plugin to lint and fix inline scripts contained in HTML files.
2. eslint-plugin-jest
   • ESLint plugin for Jest.

Created Configuration Files

Once files are created, you may edit to your liking.

eslintrc(.js/.json)

• more info

{
"extends": [
    "airbnb",
    "plugin:prettier/recommended",
  ],
  "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)
}

stylelintrc(.js/.json)

• more Info

{
  "extends": ["stylelint-prettier/recommended", "stylelint-config-airbnb"]
}

.editorconfig

• more Info

root = true
  [*.{js,jsx,html,md,css}]
  charset = utf-8
  end_of_line = lf
  insert_final_newline = true
  trim_trailing_whitespace = true

  [*.{js,jsx,css}]
  indent_size = 2
  indent_style = space

---

This script was created by Paulo Ramos, updated and modified with new features added by Arthur Nunes, Martin Dobrev, Darshan Gada, Imed Adel. and inspired by Jeffrey Zhen's tutorial.