Efetuar o lint do JavaScript no Visual Studio

O lint do JavaScript e do TypeScript no Visual Studio é feito pela plataforma ESLint. Se você for novo no ESLint, poderá começar verificando a respectiva documentação.

Habilitar o suporte para linting

Para habilitar o suporte para lint no Visual Studio 2022 ou versões posteriores, habilite a configuração Habilitar ESLint em Ferramentas > Opções > Editor de texto > JavaScript/TypeScript > Lint.

Na página de opções, você também pode modificar o conjunto de arquivos ao qual deseja efetuar o lint. Por padrão, o lint será efetuado em todas as extensões de arquivo que podem passar por lint (.js, .jsx, .ts, .tsx, .vue.html). O editor de HTML baseado em LSP precisa ser habilitado para efetuar o lint de arquivos Vue e HTML. A respectiva configuração pode ser encontrada no Tools > Options > Environment > Preview Features>editor baseado em HTML LSP.

Você pode substituir essas opções em alguns tipos de projeto, como os modelos de projeto independentes do React. Nesses projetos, você pode substituir as configurações da página > Opções de Ferramentas usando as propriedades do projeto:

Instalar dependências do ESLint

Depois que o lint estiver habilitado, as dependências necessárias precisarão ser instaladas. As dependências incluem o pacote ESLint npm e outros plug-ins aplicáveis ao seu projeto. Esse pacote pode ser instalado localmente em cada projeto em que você deseja habilitar o linting ou instalá-lo globalmente usando npm install -g eslint. No entanto, uma instalação global não é recomendada porque plug-ins e configurações compartilháveis sempre precisam ser instalados localmente.

A partir do Visual Studio 2022 versão 17.7 Preview 2, você também pode usar a configuração de ESLint Path em Tools > Options > Text Editor > JavaScript/TypeScript > Linting para especificar um diretório do qual carregar o ESLint. Essa configuração é útil quando o ESLint é instalado globalmente, onde você pode definir o caminho correspondente para C:\Arquivos de Programas\nodejs\node_modules.

Dependendo dos arquivos nos quais você deseja efetuar lint, podem ser necessários outros plug-ins ESLint. Por exemplo, talvez seja necessário TypeScript ESLint, que permite que o ESLint seja executado no código TypeScript e inclua regras específicas para as informações de tipo extra.

Quando o ESLint está habilitado, mas o pacote npm ESLint não é encontrado, uma barra de ouro é exibida. Essa mensagem permite que você instale o ESLint como uma dependência de desenvolvimento de npm local.

Da mesma forma, quando um arquivo .eslintrc não é encontrado, uma barra de ouro é exibida. Essa mensagem permite que você execute um assistente de configuração que instale os plug-ins aplicáveis ao projeto atual.

Desabilitar regras de linting e correções automáticas

Você pode desabilitar erros de lint em uma linha ou arquivo específico. Você pode desativar os erros usando o menu de ações rápidas da lâmpada.

A ilustração a seguir mostra o que ocorrerá se você desabilitar um erro de lint de uma linha de código selecionada.

Além disso, as ações de código de correção automática permitem que você aplique uma correção automática para resolver o respectivo erro de linting.

Solução de problemas

Você pode abrir o painel Extensão de linguagem do ESLint na janela Saída para ver quaisquer mensagens de erro ou outros logs que possam explicar o problema.