Como configurar o Prettier/ESLint com o preset do AirBnb em projetos React e NodeJS

setup_prettier_eslint_airbnb.md

Como configurar o Prettier/ESLint com o preset do AirBnb em projetos React e NodeJS

ReactJS

1. Instale as seguintes dependencias em seu projeto React:

yarn add -D babel-eslint prettier eslint-config-prettier eslint-plugin-prettier eslint eslint-plugin-react eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import eslint-import-resolver-webpack

2. Crie um arquivo .eslintrc.json na raiz do projeto com o seguinte conteúdo:

{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "parser": "babel-eslint",
  "plugins": ["react", "prettier"],
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", "jsx"]
      }
    ],
    "prettier/prettier": "error",
    "max-len": ["error", 80],
    "react/prop-types": 0
  },
  "env": {
    "browser": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"],
        "paths": ["src"]
      }
    }
  }
}

3. Adicione esse script ao seu package.json:

"lint": "eslint src -c .eslintrc.json --ext js,jsx",

4. Crie um arquivo .prettierrc.json, na raiz do projeto, com o seguinte conteúdo:

  {
    "singleQuote": true,
    "trailingComma": "all"
  }

NodeJS

1. Instale as seguintes dependencias em seu projeto Node:

yarn add -D eslint eslint-config-airbnb-base eslint-plugin-import eslint-plugin-promise prettier-eslint-cli

2. Crie um arquivo .eslintrc.json na raiz do projeto com o seguinte conteúdo:

{
    "env": {
        "node": true
    },
    "extends": "airbnb-base",
    "plugins": ["promise"],
    "rules": {
        "no-console": "warn",
        "promise/always-return": "error",
        "promise/no-return-wrap": "error",
        "promise/param-names": "error",
        "promise/catch-or-return": "error",
        "promise/no-native": "off",
        "promise/no-nesting": "error",
        "promise/no-promise-in-callback": "error",
        "promise/no-callback-in-promise": "error",
        "promise/no-return-in-finally": "error",
        "prefer-arrow-callback": "error",
        "linebreak-style": "off"
    }
}

3. Adicione esses scripts ao seu package.json:

"lint": "eslint 'src/**/*.js' --fix",
"format": "prettier-eslint 'server/**/*.{js,json}' --write"

As of version 8.0.0 of eslint-config-prettier you no longer need to write "prettier/react".