Image for post
Image for post
Seja em JS ou JSX, nós sempre cometemos alguns erros comuns.

Evitando erros com ESLint

ESLint é uma ferramenta de lint plugável para JavaScript e JSX.

Em aplicações JavaScripts de hoje em dia, a complexidade tende a crescer, refatorar código é preciso e, embora você provavelmente saiba o que está fazendo, usar uma ferramenta de lint pode salvar você de dores de cabeça.

Além de estilo, 2 espaços x 4 espaços x tab, ponto e vírgula x sem ponto e vírgula, e coisas do tipo, com a configuração abaixo, você pode encontrar erros comuns que muita gente acaba fazendo:

//.eslintrc.json na pasta raíz do seu projeto com ESLint 2.x.x
{
“extends”: [
“eslint:recommended”,
// opcional, se você estiver usando React
“plugin:react/recommended”
],
“env”: {
“es6”: true,
// seu ambiente, node e/ou navegador:
“node”: true,
“browser”: true
},
“plugins”: [“react”], // opcional, se você estiver usando React
“parserOptions”: {
“ecmaVersion”: 6,
“sourceType”: “module”,
“ecmaFeatures”: {
“jsx”: true // se estiver usando JSX
}
},
“rules”: {
// outras regras específicas para seu projeto/equipe
}
}

Para instalar o ESLint:

npm install eslint — save-dev

Se você estiver usando React, você pode instalar o eslint-plugin-react para regras específicas para projetos usando essa biblioteca:

npm install eslint-plugin-react — save-dev

E você também pode integrar seu editor de texto com o ESLint.

Escopo e erros de referência

Adicionando ou removendo vírgula extra

Eu não vou discutir isso aqui. Mas quero que você sabia, que se, “Como-em-Haskel”, vírgulas extras não forem para você, ESLint pode ajudar a minimizar o esquecimento dessas vírgulas quando você estiver adicionando ou removendo itens do array. E você ainda pode configurar entre permitir, requerer ou desabilitar o uso da vírgula extra. Claro, ESLint não irá te ajudar no seu git diff.

Image for post
Image for post
Regra no ESLint: comma-dangle

Regras específicas para JSX

Image for post
Image for post

E sim, você já sabia disso, todos as tags adjacentes em JSX devem ser envolvidas em uma única tag, e convenhamos, que um alerta em tempo de digitação não machuca:

Image for post
Image for post

E você? Qual sua configuração?

A idéia principal aqui é: com um mínimo de esforço, você pode salvar você mesmo e o seu time de uma bela dor de cabeça.

É isso aí, bom divertimento!

Créditos

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store