Skip to content

Latest commit

 

History

History
145 lines (109 loc) · 5.9 KB

README.md

File metadata and controls

145 lines (109 loc) · 5.9 KB
Raw

ESLint-config: Como configurar o ESLint em um projeto + regras lint para adequar as necessidades da aplicação.

Antes de começar

  • Garanta que seu NPM está ok em sua máquina para seguir a instalação.

Instalação

  • Use o comando abaixo para instalar o ESLint.
 npm install eslint --save-dev

Configurando

  • Use o comando abaixo para iniciar a configuração de seu ESLint.
 npx eslint --init

Aqui começam as configurações do eslint e vou mostrar também a forma como costumo configurar:

How would you like to use ESLint? / Como você gostaria de usar o ESLint?

use eslint

  • To check syntax only / Verificar apenas a sintaxe.
  • To check syntax and find problems / Verificar a sintaxe e encontrar problemas.
  • To check syntax, find problems and enforce code style / Verificar a sintaxe, encontrar problemas e aplicar o estilo do código.

What type of modules does your project use? / Que tipo de módulos seu projeto usa?

use eslint

  • JavaScript modules (import/export).
  • JCommonJS (require/exports).

Which framework does your project use? / Qual framework seu projeto usa? OBS: Para um projeto sem framework, basta escolher a opção: None of these.

use eslint

  • React.
  • Vue.js.
  • None of these / Nenhum desses.

Does your project use TypeScript? / Seu projeto usa TypeScript?

use eslint

  • No.
  • Yes.

Where does your code run? / Onde seu código é executado?

use eslint

  • Browser.
  • Node.

How would you like to define a style for your project? / Como você gostaria de definir um estilo para seu projeto?

use eslint

  • Use a popular style guide / Use um guia de estilo popular.
  • Answer questions about your style / Responda perguntas sobre o seu estilo.
  • Inspect your JavaScript file(s) / Inspecione seus arquivos JavaScript.

OBS: Caso as opções de estilo do ESLint a seguir não apareça, prossiga com a instalação até o fim e reinicie a configuração com o comando: "npx eslint --init".

Which style guide do you want to follow? / Qual guia de estilo você deseja seguir?

use eslint

What format do you want your config file to be in? / Em que formato você deseja que seu arquivo de configuração esteja?

use eslint

  • JavaScript.
  • YAML.
  • JSON.

Would you like to install them now with npm? / Gostaria de instalar agora com o npm?

use eslint

  • No.
  • Yes.

Ao exibir a mensagem a seguir, seu ESLint foi configurado corretamente!

use eslint

Sua configuração já gerou, se tudo deu certo, um arquivo ".eslintrc.js" no diretório raiz de seu projeto. E essa configuração já apresentará aplicação de regras em seu código. Porém, caso queira aplicar regras que irão forçar ainda mais uma melhor escrita de código. Abra o arquivo e aplique suas rules ou siga para a próxima instrução para adicionar as rules desse repositório.

No arquivo oculto chamado ".eslintrc.js" que se encontra neste repositório, você encontrará as rules: {}. Regras para um ESLint que irá melhorar seu código e que você pode alterar como quiser. Aconselho que copie todo o seu conteúdo e substitua pelo gerado na configuração, no caso de uma aplicação ReactJS e ESLint Airbnb ou copie e cole as rules e edite de acordo as suas necessidades.

Dica de extensão no VScode:

Você pode utilizar junto a essa configuração as extensões ESLint e/ou Error Lens. Sim, é possível usar as duas sem conflitos, porém, para alguns projetos a extensão Prettier pode conflitar com a ESLint. Atenção para esse detalhe.

Pesquise a extensão ESLint na sessão de extensões em seu VScode ou clique Aqui

Pesquise a extensão Error Lens na sessão de extensões em seu VScode ou clique Aqui