Skip to content

Instantly share code, notes, and snippets.

@Gustavo-Kuze
Last active August 1, 2024 17:17
Show Gist options
  • Save Gustavo-Kuze/cd36b0bfa4a6d2f8a6b4cc325608cf03 to your computer and use it in GitHub Desktop.
Save Gustavo-Kuze/cd36b0bfa4a6d2f8a6b4cc325608cf03 to your computer and use it in GitHub Desktop.
Como configurar o Prettier/ESLint com o preset do AirBnb em projetos React e NodeJS

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
  1. 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"]
      }
    }
  }
}
  1. Adicione esse script ao seu package.json:

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

  1. 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
  1. 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"
    }
}
  1. Adicione esses scripts ao seu package.json:
"lint": "eslint 'src/**/*.js' --fix",
"format": "prettier-eslint 'server/**/*.{js,json}' --write"
@rogigs
Copy link

rogigs commented Aug 15, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment