DEV Community

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

Posted on

Configurando EditorConfig, ESLint e Prettier.

#react #typescript #javascript #html

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:

willmorim

Criando um projeto web com ReactJS e TypeScript

William Amorim ・ May 29 '20 ・ 3 min read

#react #typescript #javascript #html

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

Read next

m1dnightdev profile image

Creating Theme Systems in React with SCSS and Redux

M1dnightGMR -

tsudhishnair profile image

Creating blurred or virtual backgrounds in real-time video in React apps

T Sudhish Nair -

andrewelans profile image

Inject HTML snippet from file

Andrew Elans -

mike_andreuzza profile image

How to Create an interactive color-shifting hover card with Tailwind CSS and JavaScript

Michael Andreuzza -