Configurar ESLint e o Prettier no seu projeto Node, ReactJS e React Native

Seguindo esse tutorial você poderá configurar ESLint e o Prettier no seu projeto .

O ESLint e o Prettier são duas ferramentas que auxiliam na padronização do código. Com o ESLint é possível definir um guia de estilo facilitando o trabalho em equipe.

O guia de estilo é um documento que define regras de indentação, uso de pontos e vírgula, dentre vários outras características que deixam o código mais limpo, simples e manutenível. 

Iniciando a configuração do ESLint

Para Configurar Eslint e o Prettier no seu projeto React é necessário deletar qualquer configurações feitas anteriormente, sendo assim, delete os arquivos .prettierrc e .eslintrc.json.

Agora instale o ESLint como dependência de desenvolvimento.

yarn add eslint -D

Inicie a configuração do ESLint usando o código abaixo no terminal

yarn eslint --init

Responda as perguntas de acordo com o código abaixo:

? How would you like to use ESLint? 
  To check syntax only 
  To check syntax and find problems 
❯ To check syntax, find problems, and enforce code style
? What type of modules does your project use? 
❯ JavaScript modules (import/export) 
  CommonJS (require/exports) 
  None of these
? Which framework does your project use? (Use arrow keys)
❯ React 
  Vue.js 
  None of these

Quanto chegar na pergunta referente ao TypeScript escolha N

Does your project use TypeScript? (y/N) : N

A questão abaixo é a que difere que tipo projeto está sendo criado. Para projetos de backend, utilize a barra de espaço para marcar a opção Node, para projetos ReactJS, marque a opção Browser e para projetos React Native desmarque ambas.

? Where does your code run? 
❯◯ Browser
 ◯ Node

As outras perguntas são referentes a definição do estilo, o padrão a ser seguido e o formato do arquivo. Selecione as respostas abaixo:

 How would you like to define a style for your project? (Use arrow keys)
❯ Use a popular style guide 
  Answer questions about your style 
  Inspect your JavaScript file(s)
? Which style guide do you want to follow? (Use arrow keys)
❯ Airbnb (https://github.com/airbnb/javascript) 
  Standard (https://github.com/standard/standard) 
  Google (https://github.com/google/eslint-config-google)
? What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript 
  YAML 
  JSON

Até aqui foi feita a configuração do ESLint, agora é necessário fazer a instalação. O ESLint usa por padrão o nmp, sendo marque Y na pergunta a seguir

? Would you like to install them now with npm? (Y/n) : Y

Se você usa o yarn para o gerenciamento de dependências do seu projeto delete o arquivo package-lock.json e exectue o comando yarn

Instalando dependências

Com o ESLint instalado é necessário instalar outras dependências de desenvolvimento

yarn add prettier eslint-config-prettier eslint-plugin-prettier babel-eslint -D

Agora abra o arquivo .eslintrc.json na pasta root do seu projeto e altere o seu conteúdo para o código abaixo

module.exports = {
  env: {
    es6: true,
  },
  extends: [
    'airbnb',
    'prettier',
    'prettier/react'
  ],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    __DEV__: 'readonly'
  },
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'react',
    'prettier'
  ],
  rules: {
    'prettier/prettier': 'error',
    'react/jsx-filename-extension': [
      'warn',
      {
        extensions: ['.jsx', '.js']
      }
    ],
    'import/prefer-default-export': 'off',
    'react/state-in-constructor': 'off',
    'react/static-property-placement': 'off',
    'react/jsx-props-no-spreading': 'off',
    'react/prop-types': 'off',
    'no-param-reassign': 'off',
    'no-console': 'off'
  },
};

Agora você deve criar o arquivo de configuração de Prettier. Crie na pasta root do seu projeto o arquivo .prettierrc com o seguinte conteúdo

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

O passo final é alterar o arquivo settings.json do próprio VSCode. Para acessar o arquivo use as teclas Ctrl + Shift + P e digite Preferences: Open settings (JSON). Insira o código a seguir dentro do arquivo.

{
    "workbench.iconTheme": "material-icon-theme",
    "window.zoomLevel": -1,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "workbench.colorTheme": "Dracula",
    "editor.formatOnSave": false,
    "editor.rulers": [80,120],
    "editor.tabSize": 2,
    "editor.renderLineHighlight": "gutter",
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
    },
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "javascript.updateImportsOnFileMove.enabled": "never",
    "breadcrumbs.enabled": true,
    "editor.parameterHints.enabled": true,
    
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        {
            "language": "javascript",
            "autoFix": true,
        },
        {
            "language": "javascriptreact",
            "autoFix": true,
        },
        {
            "language": "typescript",
            "autoFix": true,
        },
        {
            "language": "typescriptreact",
            "autoFix": true,
        },        
    ]
}

Ah! Não deixe de instalar as extensões ESLint e Prettier – Code formatter dentro do seu VSCode.

Espero que tenha ajudado a configurar ESLint e o Prettier no seu projeto Node, ReactJS ou React Native.

Tags: airbnb | eslint | prettier | reacjs | react native | vscode