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?

• 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?

• 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.

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

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

• No.
• Yes.

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

• Browser.
• Node.

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

• 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?

• Airbnb: https://github.com/airbnb/javascript
• Standard: https://github.com/standard/standard
• Google: https://github.com/google/eslint-config-google
• XO: https://github.com/xojs/eslint-config-xo

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

• JavaScript.
• YAML.
• JSON.

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

• No.
• Yes.

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

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

Autor	Contribuições
Adriano Monteiro	Marcelo Pantoja	Ivan
LinkedIn	GitHub	GitHub