Acho que muitas pessoas sabem que em projetos sérios hoje em dia é costume usar ferramentas especiais para verificar se há erros no código e combinar com o estilo adotado na equipe.
Hoje eu quero tocar no ESLint, uma ótima ferramenta para verificar se há erros em projetos JavaScript.
Não escreverei neste artigo sobre pontos óbvios, como a configuração do eslint para o seu projeto: espero que você possa ler a documentação desta parte e conectá-la a si mesmo. E aqui discutiremos qual "kit" adicional você pode conectar à ferramenta original e como configurá-la para que ela funcione com a sua maior vantagem.
Agora usamos a configuração preparada com as regras da equipe do airbnb como base das regras. Seu padrão para escrever código JavaScript agora tem mais de 73 mil estrelas no github e é usado por muitas organizações conhecidas . Eu acho que você pode confiar nele.
Essa configuração conecta vários pacotes importantes ao projeto de uma só vez: eslint , eslint-plugin-import , eslint-plugin-react eslint-plugin-jsx-a11y e eslint-plugin-jsx-a11y , que contêm regras adicionais para validar seu código. Observe que esse arquivo de configuração implica que você use o React.js no seu projeto. Se não for assim, você sempre poderá instalar a configuração eslint-config-airbnb-base , que contém tudo a mesma coisa, com exceção da dependência do plug-in para React.js.
Vamos dar uma olhada nos pacotes de plug-in e descobrir quais verificações eles adicionarão ao código do seu projeto:
Este plug-in adicionará validação para todas as suas importações ao seu projeto e garantirá que todas as dependências importadas estejam presentes no projeto, conectadas em uma ordem conveniente para o trabalho subseqüente e assim por diante.
O plug-in permite que você escreva um código mais correto no React.js e o economize de antipadrões comuns, além de obrigá-lo a atribuir a todas as descrições de seus componentes os tipos de dados que eles aceitam.
Este plug-in também se aplica a projetos no React.js e também é extremamente útil no trabalho. Isso forçará você a escrever HTML que será muito melhor de acordo com os padrões de acessibilidade. Seus projetos se tornarão muito mais convenientes para pessoas com deficiência.
Em geral, esse conjunto de regras tornará seus projetos muito melhor escritos, além de ampliar seu conhecimento dos padrões modernos para escrever código.
Mas em nosso mundo, não existem apenas esses plugins para eslint, mas muitos outros. Já existe um projeto maravilhoso sobre o assunto no github. Nos últimos dias, decidi estudar esse tópico e quero apresentar ao seu tribunal as coisas mais interessantes que foram encontradas, testadas pessoalmente e implementadas no meu projeto atual, no qual estou trabalhando atualmente.
Plugins adicionais para ESLint
Você pode estudar o projeto acima por conta própria e encontrar plugins interessantes pessoalmente, mas vou escrever aqui o que me interessa.
Um plug-in projetado especificamente para projetos Node.js. Eu acho que muitos podem ser úteis se ainda não o usarem em casa.
Este plugin fará com que você "ame" o Lodash e reescreva a maioria dos métodos JS nativos nos métodos do Lodash, e também contém muitas recomendações para escrever código que usa cadeias de lodash. Em geral, é muito interessante, mas até agora não o implementei simplesmente porque agora precisamos reescrever muito código para cumprir as regras deste plug-in. Mas para o futuro, eu peguei para mim.
Esse plug-in permite que você diretamente durante o desenvolvimento verifique a compatibilidade do código que você escreveu com os navegadores atuais que você está direcionando no seu projeto no momento. No momento, eu não o conectei ao meu projeto porque agora usamos o serviço polyfill.io , que conecta automaticamente todos os polyfills necessários a cada navegador individual, de modo que o problema da compatibilidade de código como um todo está ausente. Mas, no futuro, também estou anotando: e se eu precisar?
Um plug-in que informa como otimizar suas expressões regulares. Por que não instalar? Não será supérfluo, pensei.
Uma das descobertas mais interessantes desta lista de kits corporais adicionais. Este plug-in contém um conjunto completo de verificações, graças às quais encontra seções de código mal escritas, as mesmas funções e construções simplesmente sem sentido, e se oferece para reescrevê-las (é uma pena que ele próprio não saiba reescrevê-las: D). Se você não gosta de decompor seu código em pequenos blocos limpos e escrever funções complexas em mais de 100 linhas - aguarde pelos avisos deste plug-in de que a complexidade cognitiva de tais locais no projeto é muito alta para suporte a longo prazo e deve ser reescrita.
Este plugin simplesmente jura quando você deseja escrever loops padrão for ou while . Hoje em dia, costuma-se usar forEach , map , reduce e assim por diante. Eu geralmente concordo com o autor e conectei o plugin ao meu projeto.
Um plug-in que impedirá que você estenda protótipos de objetos JavaScript padrão. Diga não! Remendos de macaco. E isso está certo.
Um plug-in que ajuda você a escrever as promessas certas e protege contra erros comuns ao trabalhar com eles. Também é muito útil, eu acho.
Aqui está uma lista de plugins no final. O que você usa em seus projetos para testar seu código?
Concluindo, deixarei um exemplo de configuração do nosso arquivo .eslintrc do projeto atual:
.eslintrc { "parser": "babel-eslint", "extends": [ "airbnb", "plugin:import/errors", "plugin:import/warnings", "plugin:jsx-a11y/recommended", "plugin:sonarjs/recommended", "plugin:promise/recommended" ], "plugins": ["react", "jsx-a11y", "optimize-regex", "sonarjs", "no-loops", "no-use-extend-native", "promise"], "rules": { "react/jsx-filename-extension": "off", "jsx-a11y/click-events-have-key-events": "off", "import/no-extraneous-dependencies": [ "error", { "packageDir": "./" } ], "allowTernary": true, "optimize-regex/optimize-regex": "warn", "sonarjs/cognitive-complexity": ["error", 30], "no-loops/no-loops": 2, "no-use-extend-native/no-use-extend-native": 2, }, "settings": { "import/resolver": "webpack" } }