Como usar o ESLint com o guia de estilo JavaScript do Airbnb

O guia de estilo do Airbnb é um conjunto de diretrizes para escrever um código limpo e consistente. Foi lançado em 2012 e desde então se tornou um dos guias de estilo mais populares para projetos JavaScript.

Ele fornece um conjunto de diretrizes para escrever código consistente que é fácil de manter, aplicando uma variedade de regras de estilo em recuos, comentários, comprimento máximo de linha, convenções de nomenclatura de variáveis, aspas e definições de função. Para configurar o guia de estilo do Airbnb em um projeto JavaScript, você precisa usar uma ferramenta de linting como o ESLint.

Instalar ESLint

O ESLint é uma ferramenta de linting JavaScript de código aberto que ajuda os desenvolvedores a escrever código limpo, localizando e corrigindo problemas. Ele pode detectar problemas em seu código, como erros de sintaxe, parâmetros inválidos e variáveis ​​indefinidas. Quando você executa o ESLint com a tag – -fix , ele automaticamente identifica e corrige quaisquer problemas corrigíveis no código, economizando seu tempo.

Você pode usar o ESLint para impor guias de estilo, como o guia de estilo do Airbnb.

Para começar, execute o seguinte comando no terminal para instalar o ESLint como uma dependência de desenvolvimento:

npm install --save-dev eslint eslint-config-airbnb


Em seguida, inicialize o ESLint.

npx eslint --init


Você receberá perguntas sobre seu projeto. Quando solicitado com:

? How would you like to use EsLint?


Selecione esta opção:

> To check syntax, find problems and enforce code style


Responda às próximas perguntas de acordo com seu projeto até encontrar o seguinte prompt.

? How would you like to define a style for your project?


Então responda da seguinte forma.

> Use a popular style guide


Selecione o guia de estilo do Airbnb para o próximo prompt.

? Which style guide do you want to follow?
> Airbnb: <https://github.com/airbnb/javascript>


Por fim, instale as dependências necessárias selecionando “Sim” no próximo prompt.

Assim que a instalação terminar, você deve ter um arquivo .eslintsrc.json na raiz de sua pasta.

Personalizando o Guia de Estilo do Airbnb

O guia de estilo do Airbnb permite personalização. Você pode adicionar regras adicionais ou substituir regras existentes no arquivo de configuração .eslintsrc.json .

Por exemplo, para permitir um máximo de 80 caracteres por linha, você pode adicionar esta regra na seção de regras.

{
  "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
  "rules": {
    "max-len": ["error", { "code": 80 }]
  }
}


Executando ESLint em package.json

Adicione um script no arquivo package.json para executar o ESLint.

"scripts": {
   "lint": "eslint"
}


Execute o script lint para verificar se há erros de lint executando este comando.

npm run lint


Você também pode adicionar um script para corrigir problemas no código usando o sinalizador –fix .

"scripts": {
    "lint": "eslint",
    "lint:fix": "npm run lint -- --fix"
  },


A execução de npm run lint:fix no terminal corrigirá automaticamente quaisquer problemas que o linter possa corrigir.

Ativar Linting ao salvar no código VS

Executar um script toda vez que você quiser fazer o linting do seu código pode ser entediante. Siga as etapas abaixo para ativar o linting ao salvar no VS Code.

1. Vá para a guia “Extensões” no lado esquerdo da janela do VS Code.
2. Procure a extensão ESLint e instale-a.
3. Uma vez instalada a extensão, abra as configurações do VS Code (Arquivo > Preferências > Configurações ou pressionando Ctrl +,).
4. No editor de configurações, procure por “ações de código ao salvar”.
5. Clique em “Editar em settings.json” e adicione as seguintes configurações ao arquivo settings.json .

{
 "editor.codeActionsOnSave": {


    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "eslint.run": "onSave",
}


Isso permite que a extensão ESLint corrija automaticamente seu código quando você salva.

Benefícios de usar um guia de estilo

O principal benefício de usar um guia de estilo como o guia de estilo do Airbnb é que ele ajuda você a manter uma base de código consistente. Isso é útil em uma equipe, pois os desenvolvedores podem entender e contribuir com a base de código facilmente. Ele também ajuda a aplicar as melhores práticas e evitar erros comuns de codificação.