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 um código consistente e fácil de manter, aplicando uma variedade de estilos regras sobre recuos, comentários, comprimento máximo de linha, convenções de nomenclatura de variáveis, aspas e definições de funções. Para configurar o guia de estilo do Airbnb em um projeto JavaScript, você precisa usar uma ferramenta de linting como o ESLint.
Instalar ESLint
ESLint é um JavaScript de código aberto ferramenta de fiapos 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 o
- -consertar tag, ele identifica e corrige automaticamente 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:
? Como você gostaria de usar o EsLint?
Selecione esta opção:
> Para verificar a sintaxe, encontrar problemas e impor estilo de código
Responda às próximas perguntas de acordo com seu projeto até encontrar o seguinte prompt.
? Como você gostaria de definir um estilo para o seu projeto?
Então responda da seguinte forma.
> Use um guia de estilo popular
Selecione o guia de estilo do Airbnb para o próximo prompt.
? Qual guia de estilo você quer seguir?
> Airbnb:
Por fim, instale as dependências necessárias selecionando “Sim” no próximo prompt.
Assim que a instalação terminar, você deve ter um .eslintsrc.json arquivo na raiz da 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 .eslintsrc.json arquivo de configuração.
Por exemplo, para permitir um máximo de 80 caracteres por linha, você pode adicionar esta regra na seção de regras.
{
"estende": [
"plugin: reagir/recomendado",
"airbnb"
],
"regras": {
"max-len": ["erro", { "código": 80 }]
}
}Executando ESLint em package.json
Adicione um script no pacote.json arquivo para executar o ESLint.
"scripts": {
"fiapos": "eslint"
}
Execute o script lint para verificar se há erros de lint executando este comando.
npm executar lint
Você também pode adicionar um script para corrigir problemas no código usando o --consertar bandeira.
"scripts": {
"fiapos": "eslint",
"lint: corrigir": "npm run lint -- --fix"
},
Correndo npm run lint: correção 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.
- Vá para a guia "Extensões" no lado esquerdo da janela do VS Code.
- Procure o Extensão ESLint e instale-o.
- Uma vez instalada a extensão, abra as configurações do VS Code (Arquivo > Preferências > Configurações ou pressionando Ctrl +,).
- No editor de configurações, procure por "ações de código ao salvar".
- Clique em “Editar em settings.json” e adicione as seguintes configurações ao settings.json arquivo.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": verdadeiro
},
"eslint.validate": ["javascript"],
"eslint.run": "ao salvar",
}
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.