Partilhar via

Análise de código JavaScript no Visual Studio

  • Artigo

O linting de JavaScript e TypeScript no Visual Studio é impulsionado por ESLint. Se é novo no ESLint, pode começar por consultar a documentação .

Ativar suporte de forro

Para habilitar o suporte a linting no Visual Studio 2022 ou versões posteriores, ative a configuração Habilitar ESLint no Ferramentas > Opções > Editor de texto > JavaScript/TypeScript > Linting.

Captura de ecrã da página de Opções das Ferramentas de Linting.

Na página de opções, pode também modificar o conjunto de arquivos que deseja analisar. Por padrão, todas as extensões de arquivo que podem ser alinhadas (.js, .jsx, .ts, .tsx, .vue, .html) serão alinhadas. O editor baseado em LSP para HTML deve ser ativado para verificar arquivos Vue e HTML. A respetiva configuração pode ser encontrada em Ferramentas > Opções > Ambiente > Recursos de Visualização>editor baseado em HTML LSP.

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

Captura de ecrã das propriedades do projeto linting.

Instalar dependências ESLint

Uma vez habilitado o linting, as dependências necessárias precisam ser instaladas. As dependências incluem o pacote ESLint npm, o e outros plugins aplicáveis ao seu projeto. Este pacote pode ser instalado localmente em cada projeto onde você deseja habilitar o linting, ou você pode instalá-lo globalmente usando npm install -g eslint. No entanto, uma instalação global não é recomendada porque plugins 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 ESLint Path no Tools > Options > Text Editor > JavaScript/TypeScript > Linting para especificar um diretório a partir do qual carregar ESLint. Essa configuração é útil quando o ESLint é instalado globalmente, onde você pode definir o caminho correspondente para C:\Program Files\nodejs\node_modules.

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

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

Screenshot de instalar a barra de ouro do ESLint.

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

Screenshot da barra de ouro do assistente

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

Você pode desativar erros de linting numa linha específica ou arquivo. Você pode desativar os erros usando o menu de lâmpadas Ações rápidas:

Captura de ecrã das linting Quick Actions.

A ilustração a seguir mostra o resultado se você desativar uma regra de erro de linting na linha de código selecionada.

Captura de ecrã da regra de revestimento desativada.

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 respetivo erro de linting.

Solução de problemas

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