DEV Community

Cover image for Configurando EditorConfig, ESLint e Prettier.
William Amorim
William Amorim

Posted on

Configurando EditorConfig, ESLint e Prettier.

Fala galera beleza?

Como falei no post anterior iremos dar sequencia falando sobre algumas ferramentas que vão nos auxiliar no nosso dia a dia como desenvolvedor conforme a nossa aplicação for crescendo que são elas EditorConfig, Eslint e Prettier.

Para quem não acompanhou o primeiro artigo segue o link do mesmo:

Agora vamos ao que nos interessa!


Já pensou em trabalhar em uma equipe, e cada pessoa ter o seu próprio padrão de código, espaçamentos, se utiliza aspas duplas(") ou aspas simples('), a manutenção do código seria muito custosa, então vamos configurar essas três ferramentas para que possamos ter apenas um padrão de código independente de quem for mexer, facilitando o nosso trabalho no dia a dia.

Vamos iniciar pelo EditorConfig.

Para configurar ele é bem simples, primeiro vamos instalar ele no nosso VSCode, basta ir na nossa aba de Extensions e procurar por EditorConfig for VS Code

Com o EditorConfig instalado iremos dar um clique direito na raiz do nosso projeto e criar o arquivo do EditorConfig conforme na imagem abaixo.

EditorConfig

Feito isso ele irá criar um arquivo com as seguintes configurações:

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = false
insert_final_newline = false
Enter fullscreen mode Exit fullscreen mode

iremos modificar as duas ultimas linhas de false para true e adicionar mais uma configuração que é a end_of_line = lf o resultado final será este:

root = true

[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf
Enter fullscreen mode Exit fullscreen mode

Agora que o nosso EditorConfig está configurado vamos para o ESLint.

Primeiro vamos instalar ele no nosso projeto, dentro da pasta no seu terminal vamos digitar o seguinte comando:

yarn add eslint -D
Enter fullscreen mode Exit fullscreen mode

Estaremos instalando ele como dependência de desenvolvimento e não de produção.

Após a instalação iremos no nosso arquivo package.json e apagaremos o seguinte trecho de código:

"eslintConfig": {
    "extends": "react-app"
  }
Enter fullscreen mode Exit fullscreen mode

Feito isso vamos iniciar o nosso ESLint com o seguinte comando:

yarn eslint --init
Enter fullscreen mode Exit fullscreen mode

Iremos selecionar as seguintes opções para que ele monte a sua configuração

How would you like to use ESLint?

  • [ ] To check syntax only
  • [ ] To check syntax and find problems
  • [x] To check syntax, find problems, and enforce code style

What type of modules does your project use?

  • [x] JavaScript modules (import/export)
  • [ ] CommonJS (require/exports)
  • [ ] None of these

Which framework does your project use?

  • [x] React
  • [ ] Vue.js
  • [ ] None of these

Does your project use TypeScript?(Y/n)
Yes

Where does your code run?

  • [x] Browser
  • [ ] Node

How would you like to define a style for your project?

  • [x] Use a popular style guide
  • [ ] Answer questions about your style
  • [ ] Inspect your JavaScript file(s)

Which style guide do you want to follow?

What format do you want your config file to be in?

  • [ ] JavaScript
  • [ ] YAML
  • [x] JSON

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

Nessa ultima etapa recusamos a instalação com o NPM pois estamos utilizando o Yarn, agora vamos colocar o seguinte trecho no nosso terminal para que possamos fazer a instalação com o Yarn corretamente.

yarn add eslint-plugin-react@^7.19.0 @typescript-eslint/eslint-plugin@latest eslint-config-airbnb@latest eslint-plugin-import@^2.20.1 eslint-plugin-jsx-a11y@^6.2.3 eslint-plugin-react-hooks@^2.5.0 @typescript-eslint/parser@latest -D
Enter fullscreen mode Exit fullscreen mode

Feito todos esses passos iremos criar um arquivo na raiz do nosso projeto com o nome de .eslintignore nele iremos colocar algumas configurações para que possamos ignorar o lint em alguns arquivos do projeto

São as seguintes:

**/*.js
node_modules
build
Enter fullscreen mode Exit fullscreen mode

Agora iremos adicionar algumas configurações no nosso arquivo .eslintrc.json que são as seguintes:

Dentro de "extends"

"plugin:@typescript-eslint/recommended"
Enter fullscreen mode Exit fullscreen mode

Dentro de "plugins"

"react-hooks"
Enter fullscreen mode Exit fullscreen mode

Dentro de "rules"

"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn",
"react/jsx-filename-extension": [1, {"extensions": [".tsx"] }],
"import/prefer-default-export": "off",
"import/extensions": [
  "error",
  "ignorePackages",
  {
    "ts": "never",
    "tsx": "never"
  }
]
Enter fullscreen mode Exit fullscreen mode

O seu arquivo .eslintrc.json deverá ficar da seguinte forma:


{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb",
        "plugin:@typescript-eslint/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "react-hooks",
        "@typescript-eslint",
    ],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": "warn",
      "react/jsx-filename-extension": [1, {"extensions":[".tsx"] 
   }],
      "import/prefer-default-export": "off",
      "import/extensions": [
        "error",
        "ignorePackages",
        {
          "ts": "never",
          "tsx": "never"
        }
      ]
    }
}
Enter fullscreen mode Exit fullscreen mode

Agora iremos adicionar mais um pacote chamado eslint-import-resolver-typescript ele irá adicionar ao React a funcionalidade do entender importações de arquivos TypeScript(tsx) em nosso projeto.

No nosso terminal iremos executar o seguinte comando:

yarn add eslint-import-resolver-typescript -D
Enter fullscreen mode Exit fullscreen mode

Feito isso voltamos no nosso arquivo .eslintrc.json e vamos adicionar mais uma configuração nele logo após as nossas "rules"

"settings": {
  "import/resolver": {
    "typescript": {}
  }
}
Enter fullscreen mode Exit fullscreen mode

Agora iremos configurar o nosso Prettier

No nosso terminal iremos executar o seguinte comando:

yarn add prettier eslint-config-prettier eslint-plugin-prettier -D
Enter fullscreen mode Exit fullscreen mode

Agora iremos novamente no nosso arquivo .eslintrc.json e adicionaremos mais algumas configurações que são as seguintes:

Dentro de "extends"

"prettier/@typescript-eslint",
"plugin:prettier/recommended"
Enter fullscreen mode Exit fullscreen mode

Dentro de "plugins"

"prettier"
Enter fullscreen mode Exit fullscreen mode

Dentro de "rules"

"prettier/prettier": "error"
Enter fullscreen mode Exit fullscreen mode

Feito isso ele irá começar a alterar os seus arquivos após salvá-los de aspas simples(') para aspas duplas(") que é o padrão do prettier.

Para evitar isso vamos criar um novo arquivo na raiz do nosso projeto chamado prettier.config.js e vamos exportar algumas configurações do prettier.

module.exports = {
  singleQuote: true, // Para utilizar aspas simples
  trailingComma: 'all', // Para adicionar a ultima vírgula no final dos objetos e arrays
  allowParens: 'avoid', // Para não adicionar parênteses em arrow functions que tenham apenas 1 parâmetro
};
Enter fullscreen mode Exit fullscreen mode

Feito todos esses passos teremos o seguinte resultado:

GifPrettier

Magicamente ele arruma todo o nosso arquivo, mantendo apenas um padrão de código, e não vários independente da quantidade de pessoas que for trabalhar no seu projeto, e otimizando o nosso desenvolvimento.


Espero que tenham gostado do conteúdo e que ele possa ajudar no setup inicial do seu projeto e a otimizar o seu desenvolvimento evitando erros por conta de falta de uma virgula no final de alguma linha 😌 😁!

Até a próxima pessoal! 👋


GifBye

Top comments (6)

Collapse
 
tnazevedo profile image
Talita Azevedo

Muito bom Parabéns pelo post

Collapse
 
willmorim profile image
William Amorim

Muito obrigado pelo feedback Talita! 👊

Collapse
 
danilovieira profile image
Danilo Vieira

Boa, William! Ótimo material.
Com certeza vai ajudar muito quem quer manter um código bonito e bem organizado.

Collapse
 
willmorim profile image
William Amorim

Muito obrigado pelo feedback Danilo! ❤️ 👊

Collapse
 
leonardorick profile image
Leonardo Rick

Não está tendo o mesmo comportamento no meu caso. Você tem algum projeto com essa configuração que funcione corretamente?

Collapse
 
hmarques98 profile image
Henrique Marques

Muito obrigado, William. Estava procurando sobre esse conteúdo atualizado para poder incluir em meus pequenos projetos e saber mais sobre eslint com ts