Skip to content

Como configurar o ESLint em um projeto e adicionar regras lint para adequar as necessidades da aplicação. Contém algumas opções de estilo, mas contém regras melhor adequadas ao ESLint Airbnb.

Notifications You must be signed in to change notification settings

adrianomonteiroweb/eslint-config

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 

Repository files navigation

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

About

Como configurar o ESLint em um projeto e adicionar regras lint para adequar as necessidades da aplicação. Contém algumas opções de estilo, mas contém regras melhor adequadas ao ESLint Airbnb.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published