Você pode quase sempre apostar que uma boa peça de escrita tem sido o benfeitor de uma boa edição. A este respeito, o código não é diferente da prosa. Um dos benefícios que desfrutamos como desenvolvedores e programadores é que os editores, ou linters de código, podem ser incorporados em nossos fluxos de trabalho.

Linting é o ato ou processo de verificar seu código para erros de qualquer tipo. Há muitos pensamentos sobre como otimizar a eficácia de um determinado código. Mas verificar se ele está livre de erros e adere a um determinado guia de estilo é a linha de base. Às vezes isto é uma questão de consistência e legibilidade, às vezes é uma questão de fazer o código realmente rodar em primeiro lugar.

Quando se trata de JavaScript linting, há um punhado de ferramentas que se destacam. Vamos olhar para quatro linters que podem ajudá-lo a começar ou refinar o seu processo de impressão: JSLint, standardJS, JSHint e ESLint.

JSLint

JSLint foi criado em 2002 por Douglas Crockford, que também escreveu o que é indiscutivelmente um dos melhores livros em JavaScript. JSLint traz simplicidade e rapidez à mesa. Mas também é altamente opinante, o que pode ser uma bênção ou uma maldição.

JSLint consiste em um site de uma única página que é dominado por um campo de texto onde você pode colar seu código. Clique no botão ‘JSLint’ e quaisquer erros, estilísticos, sintácticos ou outros serão exibidos sob o campo de texto. Sob o campo de texto há uma pequena lista de opções, configurável por caixas de seleção. As opções incluem tolerância a espaços em branco extra, uso da palavra-chave ‘this’ (que é desencorajada por Crockford em suas palestras) e inclusão de Node.js.

Se você não estiver de acordo com nenhum guia de estilo em particular e quiser uma fonte confiável para verificar seu código para você, JSLint é uma ótima opção. Ele é particularmente eficaz para testar trechos de código ou se você estiver procurando uma maneira de rapidamente lintar pequenos projetos – talvez um site estático de página única que contenha apenas um arquivo JavaScript.

standardJS

Baseado apenas em estrelas GitHub, standardJS é a opção mais popular, chegando a quase 19.000 estrelas. É completamente opinativa, o que significa que não é personalizável de todo. Mas, se você não for obrigado a nenhum guia de estilo em particular, isto pode ser uma benção. Ele vem na forma de um Node CLI, e pode ser instalado globalmente ou como uma dependência de desenvolvimento usando seu terminal ou linha de comando de escolha:

$ npm install standard --global// or$ npm install standard --save-dev

Porque o standardJS tem Node e npm como pré-requisitos, e porque ele é executado a partir da linha de comando ou por script npm, a barra é ligeiramente elevada a partir do nível do JSLint. Mas porque não é configurável, você não tem muito mais com o que se preocupar. Você pode executá-lo a partir da linha de comando como um comando de uma palavra e ele irá verificar cada arquivo com uma extensão .js no seu diretório de trabalho atual.

Todos os erros que encontrar serão impressos no seu terminal ou linha de comando. Você pode esperar ver uma saída similar a este exemplo da documentação padrão do JS:

$ standardError: Use JavaScript Standard Stylelib/torrent.js:950:11: Expected '===' and instead saw '=='.

Se você precisar especificar um arquivo ou diretório, você pode incluir o caminho como um argumento e usar curing cards. Ele também aceita wildcards. Neste exemplo, o standardJS irá procurar e lintar quaisquer ficheiros JavaScript no directório src e respectivas subdirectorias:

$ standard "src/**/*.js" --fix

O sinalizador --fix após o caminho do ficheiro é a opção para corrigir automaticamente os erros à medida que estes são encontrados. Isto pode ser uma grande poupança de tempo, mas também pode ser um grande exercício de aprendizagem para corrigir os erros você mesmo.

Se você quiser explorar as convenções e regras que o standardJS usa antes de decidir se o deve usar, uma lista completa pode ser encontrada aqui. StandardJS é uma ótima opção para quem procura uma maneira rápida e confiável de começar com um linter JavaScript.

JSHint

JSHint começou como um garfo do JSLint. O objetivo era fazer um linter mais configurável. Se você tem usado o JSint padrão, ou outro linter opinionated, e está procurando uma maneira de começar a customizar suas próprias regras de linter, o JSHint pode ser para você. Ele apresenta a maioria dos benefícios dos linters acima mencionados e depois alguns.

Like JSLint, a página inicial do JSHint apresenta um campo de texto onde você pode colar o código. O campo Metrics à direita do campo de texto será atualizado em tempo real enquanto você digita, contabilizando uma lista de estatísticas sobre o seu código, como uma contagem de quantas funções ele contém. É claro, ele também exibe quaisquer erros de impressão que encontrar.

Se você não gostar da metodologia copiar/colar e quiser colar no seu projeto, o JSHint pode ser instalado globalmente ou como uma dependência do projeto usando npm:

$ npm install jshint --global// or$ npm install jshint --save-dev

Once instalado, você usará o CLI para colar o seu código. Aqui estão dois exemplos de comandos que verificam um único ficheiro e um directório, respectivamente:

$ jshint index.js// or$ jshint src/

No primeiro exemplo, o JSHint irá lintar o ficheiro index.js e no segundo irá pesquisar recursivamente o directório ‘src/’ e lintar quaisquer ficheiros JavaScript que encontre. JSHint irá imprimir quaisquer erros que encontrar no seu terminal.

Se você não se importa com a personalização, JSHint pode ser usado como descrito nos exemplos acima e irá funcionar muito bem. Mas, a partir daqui a complexidade pode aumentar significativamente porque o JSHint é completamente configurável e também expõe uma API, ou seja, pode ser usado como um módulo JavaScript em seus próprios arquivos JavaScript.

Uma configuração personalizada, que deve ser armazenada em um arquivo chamado .jshintrc, o arquivo pode se parecer com isto:

{"esversion": 5,"eqeqeq": true,"strict": true}

Este exemplo, de cima para baixo, define a versão ECMAScript como 5, requer o uso de três sinais de igual ( === ou !==) ao invés de dois (== ou !=) ao comparar valores, e reforça o modo estrito. Você pode incluir suas configurações personalizadas especificando o caminho para seu arquivo .jshintrc atrás de um sinal -- config na linha de comando ou declarando-as como o atributo ‘jshintConfig’ em seus projetos package.json arquivo. JSHint usará suas opções padrão para quaisquer regras que você não personalize.

A opção de linha de comando pode se parecer com isto:

// looks for '.jshintrc' in the current directory$ jshint --config './.jshintrc'

A opção package.json pode se parecer com isto:

{ "jshintConfig": { "esversion": 5, "eqeqeq": true, "strict": true }}

Você pode usar estes conceitos básicos para começar a customizar suas próprias regras de impressão com JSHint. Se você está procurando por mais, os documentos oficiais contêm uma descrição exaustiva de como usar o JSHint API e todas as formas que ele pode ser personalizado para atender às suas necessidades.

ESLint

GitHub stars à parte, quando se trata de JavaScript linting ESLint é provavelmente o linter mais visto na natureza e vai ser o caminho para muita gente. Em sua própria documentação, ele se compara ao JSLint e JSHint no que diz respeito aos métodos que ele usa para analisar o JavaScript. E, semelhante ao JSHint, você se facilita ao usar os padrões e adicionar customizações conforme suas preferências ou necessidades mudarem.

Para começar com o ESLint, instale-o globalmente ou como uma dependência de desenvolvimento:

$ npm install eslint --save-dev// or$ npm install eslint --global

Se você instalar o ESLint globalmente, suas configurações serão aplicadas a todo e qualquer arquivo de projeto contra o qual você executá-lo. Mas se você quiser configurações diferentes para projetos diferentes, você pode instalá-lo como uma dependência de desenvolvimento e criar um arquivo de configuração diferente para cada projeto. Tenha em atenção que se o ESLint estiver instalado como uma dependência de projecto, ao contrário de globalmente, precisa de correr o executável a partir da sua pasta node_modules assim:

$ ./node_modules/.bin/eslint --init

Quando correr o comando acima, será percorrido através da configuração do ESLint por uma série de questões. (Nota: Independente de quanto você planeja personalizar suas regras de impressão, você deve começar com este passo porque o ESLint precisa do arquivo .eslintrc que será gerado por este processo antes que ele possa imprimir o seu código.)

A primeira pergunta feita a você é como configurar o ESLint. Você tem três opções: use um guia de estilo popular, responda perguntas sobre seu estilo, ou deixe o ESLint configurar-se para você, inspecionando seus arquivos para decidir como configurar as regras. Se a perspectiva de configurá-lo você mesmo parece intimidante, você pode usar um popular guia de estilo desenvolvido por uma das poucas organizações conhecidas.

Independentemente do caminho que você seguir, ESLint usará suas respostas para gerar um arquivo chamado .eslintrc no diretório de trabalho atual. Este é o arquivo que você modificará se você quiser fazer alterações nas regras de impressão mais tarde no caminho.

Aqui está um exemplo .eslintrc ficheiro em formato JSON que usa as regras padrão do guia de estilo Airbnb JavaScript e inclui duas regras personalizadas para desligar o modo restrito e permitir console.log() declarações:

{ "extends": "airbnb-base", "rules": { "strict": "off", "no-console": "off" }}

Se escolher responder a perguntas sobre o seu estilo, irá perguntar-lhe coisas como qual a versão ECMAScript que está a usar, se prefere separadores ou espaços, ponto e vírgula ou não, e se usa JSX e/ou Reagir. O suporte de ESLint para o React e plugins suplementares provavelmente farão dele a melhor escolha para os desenvolvedores do React. Pelo menos para aqueles que estão apenas começando com o linting.

Após o ESLint estar instalado e um arquivo .eslintrc ter sido gerado, você pode usar o CLI para começar a imprimir o seu código. O ESLint procura o seu ficheiro .eslintrc por defeito, por isso não precisa de especificar nenhuma configuração na linha de comandos. Mas pode usar várias bandeiras para alterar a forma como o ESLint se comporta. No exemplo abaixo, a bandeira -- quiet diz ao ESLint para mostrar apenas erros em oposição a ambos os avisos e erros. O flag --fix diz-lhe para tentar corrigir automaticamente quaisquer erros que encontre.

// run eslint against file1.js$ ./node_modules/.bin/eslint file1.js// run eslint against file1.js and file2.js with flags to modify behavior$ ./node_modules/.bin/eslint file1.js file2.js --quiet --fix

Como com os outros CLIs que discutimos, você pode usar wild cards e caminhos de ficheiros em vez de nomes de ficheiros específicos, se necessário. Embora o ESLint seja altamente configurável, ele facilita a curva de aprendizagem usando um guia de configuração acessível para seu método de configuração padrão. Se você está procurando realmente se aprofundar nas customizações, a documentação oficial contém grandes explicações de tudo que você pode fazer com ESLint.