Como configurar o linting JavaScript no Visual Studio Code

Obviamente, sou um grande fã de usar padrões de codificação sempre que você estiver escrevendo código do lado do servidor (independentemente de ser WordPress, PSR2 ou qualquer outra coisa – desde que você esteja usando algo, acho que é uma coisa boa).

Mas quando se trata de escrever código do lado do cliente, ou seja, JavaScript para este post, não vemos isso discutido tanto, embora eu o considere igualmente importante. O mesmo vale para CSS, Sass ou LESS, mas isso é conteúdo para outro post.

Para projetos recentes, usamos o guia de estilo JavaScript do Airbnb para nossos projetos. Sou fã e acho que ajuda escrever JavaScript limpo e legível (que parece ter sido escrito pela mesma pessoa – o objetivo final dos padrões de codificação, certo?).

Neste post, mostrarei o processo de configuração no Visual Studio Code.

Linting JavaScript no Visual Studio Code

Esta postagem pressupõe que você esteja familiarizado com a configuração do Node Package Manager em sua máquina local.

Se você não for, então eu tenho um guia de como fazer isso neste post. O atalho? É literalmente tão simples quanto isso (uma vez que o Homebrew é instalado):

Depois de configurá-lo (usando a referida postagem ou se já estiver configurado), você estará pronto para avançar com a instalação das ferramentas necessárias para configurar o linting JavaScript no Visual Studio Code.

1 Instalando ESLint

Digamos, por exemplo, que você esteja executando um projeto em um diretório chamado acme no diretório Projetos do Dropbox. Se for esse o caso, navegue até o diretório de plugins para o referido projeto. Provavelmente será algo assim:

$ cd ~/Dropbox/Projects/acme/wp-content/plugins/acme-plugin

Por aqui, você precisará instalar o ESLint e os arquivos de configuração do Airbnb. Felizmente, é muito fácil de fazer. No terminal, basta digitar o seguinte comando:

$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import

Estou assumindo que nenhum dos pacotes acima já está instalado. Nesse caso, como eslint, você pode remover esse argumento específico da linha acima.

Além disso, é importante entender que o projeto eslint-plugin-import é importante para adicionar suporte para importação e exportação de módulos JavaScript.

2 A configuração do ESLint

Há mais uma etapa necessária antes de obter a configuração no Visual Studio Code. Ou seja, é uma questão de criar um arquivo de configuração ESLint. De dentro do diretório acme-plugin como mostrado acima, digite o seguinte comando:

$ touch .eslintrc.js

Isso criará um arquivo vazio (ou arquivo de ponto vazio, como alguns podem se referir a ele) e é aqui que nossa configuração fará referência ao guia de estilo do Airbnb.

No arquivo, basta adicionar as seguintes linhas de código de configuração:

module.exports = {
  "extends": "airbnb-base"
};

Agora que você instalou o ESLint, tem uma referência ao guia de estilo do Airbnb e tem uma referência para dar suporte a sintaxe adicional, é hora de configurar o Visual Studio Code.

3 Configurando o código do Visual Studio

Na minha opinião, essa é a parte mais fácil. Abra o painel de extensões da maneira que melhor lhe convier (clicando no ícone ou usando o atalho) e, em seguida, execute uma pesquisa por ESLint. Você pode ver vários resultados, mas o que você quer é aquele que se parece com isso:

Instale-o e recarregue o código do Visual Studio. Ele deve ser definido em suas configurações padrão, que você pode confirmar abrindo as configurações e procurando por este pedaço de código:

// Controls whether eslint is enabled for JavaScript files or not.
"eslint.enable": true,

Se não estiver presente, você poderá adicioná-lo às Configurações do usuário (não sou fã de mexer com as configurações padrão, caso você precise redefinir a partir de uma base limpa).

Uma vez que isso é definido, você está pronto para ir, e você deve ter seu JavaScript alinhado enquanto trabalha em seu projeto.

Outros gerenciadores de pacotes?

Acima, dei um exemplo de como fazer isso via Node; no entanto, também é possível conseguir usando o Yarn. Isso é algo sobre o qual pretendo escrever no futuro, mas como abordei o Node em um post anterior, parecia lógico e mais fácil seguir esse post com este conteúdo para referência.

Quando chegar a hora de usar um gerenciador de pacotes diferente, especificamente o Yarn, também abordarei isso.