10 CSS e JavaScript Linting Tools para otimização de código
Ferramentas de lintagem podem ajudar significativamente os desenvolvedores a escrever boa qualidade, código otimizado. Linting é um processo de verificação de código que procura erros no código-fonte e sinaliza possíveis bugs. A maioria dos linters usa a técnica de análise de código estático, o que significa o código é verificado sem ser realmente executado.
Você pode dedicar-se a diferentes ocasiões, como em tempo real enquanto escreve o código, quando salva o arquivo, quando confirma as alterações ou antes de o código entrar em produção. Seja qual for o seu fluxo de trabalho, o importante é lint em uma base regular, como ele pode salvar você de muitas dores de cabeça no futuro.
Os linters não são apenas ferramentas de prevenção de bugs, mas também podem ser usados efetivamente durante a depuração para encontrar erros difíceis de capturar de outra forma. Neste post vamos conferir 10 poderosas ferramentas de linting que você pode usar para lixar seus arquivos CSS e JavaScript para melhorar a qualidade do seu código.
1. CSSLint
CSSLint admitidamente pretende "ferir seus sentimentos", mas em troca "faz você codificar muito melhor". A CSSLint atualmente lidera o mercado de linting de CSS. Está escrito em JavaScript, é open-source e vem com várias opções configuráveis.
CSSLint permite que você escolha que tipo de erros e avisos (compatibilidade, desempenho, duplicação, etc.) você quer testar, e valida sua sintaxe CSS com as regras que você escolher.
Ele não funciona apenas no navegador, mas também possui uma interface de linha de comando, e você também pode integrá-lo ao seu próprio sistema de compilação..
2. SublimeLinter CSSLint
O CSSLint é um linter CSS tão eficaz que é difícil encontrar um concorrente que o avalie. Provavelmente, essa é a razão pela qual o framework de linting do SublimeLinter construiu seu plugin de linting CSS sobre ele. O SublimeLinter é um plugin do SublimeText que fornece aos usuários um meio de lixar seu código (CSS, PHP, Python, Java, Ruby, etc.) diretamente dentro do SublimeText editor.
Antes de instalar o plugin SublimeLinter CSSLint, você precisa instalar o CSSLint como um módulo Node.js. O melhor desta ferramenta é que você só tem que configurar as configurações uma vez, ou se você está satisfeito com os padrões, você nem precisa fazer isso, então você pode sempre obter os avisos e notificações relevantes dentro do seu editor SublimeText sem qualquer aborrecimento adicional.
3. StyleLint
O StyleLint ajuda os desenvolvedores a evitar erros em CSS, SCSS ou qualquer outra sintaxe que o PostCSS possa analisar. Testes StyleLint para mais de cem regras, e você pode escolha quais você deseja ativar (veja um exemplo de configuração).
Se você não quiser criar sua própria configuração, também poderá optar por uma configuração padrão pré-gravada que contenha cerca de 60 regras StyleLint. O StyleLint é uma ferramenta bastante flexível, que pode ser estendida por plug-ins extras e usada em três formas diferentes: como uma ferramenta de linha de comando, como um módulo Node.js ou como um plug-in PostCSS.
4. Validador CSS do W3C
Embora o CSS Validator do W3C geralmente não seja considerado uma ferramenta de linting, ele oferece aos desenvolvedores uma grande oportunidade de verificar o código-fonte CSS em relação aos padrões oficiais do W3C. O W3C construiu seus validadores com a intenção de fornecer uma ferramenta semelhante ao verificador de programas Lint para a linguagem C.
No início, eles criaram o validador de marcação HTML que foi posteriormente seguido pelo validador CSS. O validador CSS do W3C não tem tantas opções quanto o CSSLint, mas retorna mensagens de erro e notificações detalhadas e fáceis de entender.
Como um recurso extra, você também pode verificar seu código em relação aos padrões recentes da web móvel da W3C, o que não é uma coisa ruim na era da web móvel.
5. Marcação Suja
O Dirty Markup limpa, formata e valida seu código HTML, CSS e JavaScript. Pode ser uma ótima opção se você gosta de design direto e quer uma solução rápida. Marcação Suja lança mensagens de erro e notificações em tempo real enquanto você escreva ou modifique seu código dentro do editor.
Quando você acertar o “Limpar \ limpo” botão, corrige erros de sintaxe de uma só vez, organiza o formato, mas deixa os avisos intactos deixando você resolvê-los como quiser. Você não pode escolher quais regras deseja testar, mas todos os três tipos de arquivo tem algumas configurações que permitem decidir o formato da saída limpa.
6. JSLint
JSLint foi lançado pela primeira vez em 2002 por Douglas Crockford, e não perdeu força desde então, então você pode seguramente assumir que é uma ferramenta de fiapos JavaScript estável e confiável..
O JSLint pode processar código-fonte JavaScript e texto JSON, e ele vem com configuração pronta que segue as práticas recomendadas do JS Crockford escreveu em seu livro intitulado JavaScript: The Good Parts.
O JSLint tem algumas opções que você pode escolher, mas você Não é possível adicionar suas próprias regras personalizadas ou desativar a maioria dos recursos. O JSLint já começou a incluir os padrões mais recentes do ECMAScript 6, você pode conferir o estágio atual da implementação do ES6 aqui.
7. JSHint
O JSHint é um fork altamente popular do JSLint e é usado por grandes empresas de tecnologia como Facebook, Twitter e Medium.
O JSHint é um projeto conduzido pela comunidade que começou com o esforço para criar uma versão mais configurável e menos opinativa do JSLint. O JSHint permite que os desenvolvedores configurem qualquer uma das suas opções de linting, e coloque a configuração personalizada em um arquivo separado, uma opção que torna a ferramenta facilmente reutilizável, e uma boa opção para projetos maiores.
Você não só pode usar o JSHint para remover o JavaScript, como também tem suporte pronto para muitas bibliotecas JS populares, como jQuery, Mootools, Mocha e Node.js..
8. ESLint
O ESLint é a última grande novidade no cenário de linting de JavaScript. Sua popularidade decorre de sua natureza altamente flexível. Você não só pode personalizar toneladas de suas sofisticadas regras de lintagem, como também integrá-las a todos os principais editores de código, mas você também pode facilmente estender suas funcionalidades adicionando diferentes plugins a ele.
Ao especificar as opções do analisador, você também pode escolha qual padrão da linguagem JS você deseja suportar durante o processo de lintagem, o que significa que você não apenas pode verificar seus scripts com a sintaxe padrão do ECMAScript 5, mas também contra o ECMAScript 6, o ECMAScript 7 e o JSX.
9. JSCS
JSCS, ou JavaScript Code Style é um linter de estilo de código plugável para JavaScript, que verifica as regras de formatação de código.
O objetivo do JSCS é fornecer um meio para Programaticamente impor a adesão a um determinado guia de estilo de codificação. Embora o JSCS não verifique bugs e erros, ele ainda é usado por muitos dos principais participantes do setor de tecnologia, como Google, AirBnB e AngularJS, pois ajuda os desenvolvedores a manter uma base de código consistente e altamente legível..
O JSCS economiza tempo, pois corrige automaticamente seus erros de formatação, portanto você não precisa passar por eles um a um. Ele tem muitos presets diferentes pertencentes a projetos maiores, como Google, Grunt ou Wikimedia, que você pode usar facilmente em seus próprios projetos, mas você também pode criar sua própria configuração personalizada.
10. StandardJS
O StandardJS, ou JavaScript Standard Style, é um linter de estilo de código como o JSCS, mas difere dele em sua simplicidade e simplicidade. StandardJS pode ser uma excelente escolha, se você não quer gastar tempo com a configuração, só quer uma ferramenta eficaz que seja executada fora da caixa.
O StandardJS segue um punhado de regras de formatação pré-escritas e seu principal valor é manter o fluxo de trabalho de codificação livre de distrações, para que você não possa alterar as regras com as quais não concorda. Escolha apenas o StandardJS se você não quiser ter uma configuração personalizada e apenas desejar impor um estilo de código consistente nos seus arquivos JavaScript.
