ESLint não funciona no VS Code?

88

ESLint não está funcionando para mim no VS Code. Eu tenho o plugin instalado no VS Code, e o próprio ESLint como uma dependência do desenvolvedor em meu package.json, que também instalei.

Modifiquei a seguinte opção nas configurações de usuário do código VS:

{
  "eslint.options": { "configFile": "C:/mypath" }
}

Usei o comando eslint --initpara adicionar o básico .eslintrc.jsonao diretório principal do meu pacote.

Outras pessoas foram capazes de obter feedback ESLint do VS Code usando exatamente o mesmo pacote com o mesmo arquivo de configuração ESLint.

Não recebi nenhum feedback de qualquer tipo ao quebrar diretamente várias regras que foram incluídas no conjunto de regras recomendado que está, por padrão, dentro do .eslintrc.jsonarquivo.

o que estou perdendo?

Edit: Eu testei usando ESLint via linha de comando, e tudo funcionou conforme o esperado, com os erros encontrados onde deveriam, porém, esses mesmos erros nunca apareceram no VS Code. O problema parece estar do lado do VS Code e não do ESLint.

John Landon
fonte
2
Observe que, se você instalou o ESLint com êxito, mas não obteve feedback do ESLint como esperava, pode ter esquecido de inicializar o ESLint . Para fazer isso, execute este comando a partir da raiz do seu projeto./node_modules/.bin/eslint --init

Respostas:

25

Existem alguns motivos pelos quais a ESLint pode não estar lhe dando feedback. ESLint vai procurar seu arquivo de configuração primeiro em seu projeto e se não encontrar um .eslintrc.json lá, ele vai procurar por uma configuração global. Pessoalmente, eu apenas instalo o ESLint em cada projeto e crio uma configuração baseada em cada projeto.

A segunda razão pela qual você não está recebendo feedback é que, para obtê-lo, você precisa definir suas regras de linting no .eslintrc.json. Se não houver regras lá, ou se você não tiver nenhum plug-in instalado, será necessário defini-los.

EJ Mason
fonte
1
Se você tiver um .eslintrc.json local, não precisa definir seu configFile em suas configurações.
EJ Mason
3
Eu .eslintrc.jsonjá coloquei o local na pasta principal do meu projeto, e minhas regras estendem as regras recomendadas pela ESLint, que são as que eu estava testando. Também adicionei algumas regras minhas para testes adicionais, mas sem sucesso.
John Landon
38
Ao usar o ESLint diretamente via linha de comando, tudo funciona corretamente e encontra todos os erros. O problema aqui parece ser com o VS Code, e não com o ESLint.
John Landon
3
tente habilitar eslint em suas configurações "eslint.enable": true. Certifique-se de não ter nenhum eslint instalado globalmente. e tente remover o caminho configFile. É assim que tenho meu vscode configurado. Tive muitos problemas quando instalei o eslint global e localmente.
EJ Mason
3
Para mim, o problema era que eu não tinha instalado a extensão ESLint no VSCode.
atulkhatri
65

Se o ESLint estiver sendo executado no terminal, mas não dentro do VSCode, é provável que a extensão não seja capaz de detectar as node_modulespastas local e global .

Para verificar, pressione Ctrl+ Shift+ Uno VSCode para abrir o Outputpainel após abrir um arquivo JavaScript com um eslintproblema conhecido . Se mostrar Failed to load the ESLint library for the document {documentName}.js-ou- se a Problemsguia mostrar um erro ou um aviso que se refere a eslint, então o VSCode está tendo um problema ao tentar detectar o caminho.

Em caso afirmativo, defina-o manualmente eslint.nodePathdefinindo nas configurações do VSCode ( settings.json). Forneça a ele o caminho completo (por exemplo, como "eslint.nodePath": "C:\\Program Files\\nodejs",) - o uso de variáveis ​​de ambiente não é suportado atualmente.
Esta opção foi documentada na página de extensão ESLint .

ParaBolt
fonte
obrigado, passei algumas horas descobrindo por que eslint agora trabalhava globalmente com vscode
Andrei Voicu
Melhor resposta de todas.
Nikola Mihajlović
52

No meu caso, como eu estava usando TypeScript com React, a correção foi simplesmente dizer ao ESLint para validar também esses arquivos. Isso precisa ir nas configurações do usuário:

"eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ],
Simone
fonte
3
Funcionou para mim. (No Windows)
Ellis
1
TypeScript com React aqui funcionou para mim também. Obrigado
ggat
TypeScript com React no Windows e isso funcionou para mim também.
Peter Boomsma
27

configurar diretórios de trabalho resolveu para mim, já que eu tinha vários projetos com .eslintrc arquivos abertos na mesma janela.

Coloque isso no seu .vscode/settings.json

"eslint.workingDirectories": [
    "./backend", 
    "./frontend"
],

graças a esse cara no github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372

PS: comando útil para listar todos os subdiretórios contendo um .eslintrcexcept / node_modules:

find . .eslintrc | grep .eslintrc | grep -v node_modules

Karl Adler
fonte
7

No meu caso, eu não tinha instalado a extensão ESLint no VSCode, o que estava causando o problema. Fiz isso e começou a funcionar novamente.

Atulkhatri
fonte
4

Reiniciar o VSCode funcionou para mim.

thedanotto
fonte
3

Se você estiver usando uma instalação global do ESLint, quaisquer plug-ins usados ​​em sua configuração também devem ser instalados globalmente. Da mesma forma, para instalação local. Se você instalou localmente e configurou corretamente localmente, mas o eslint não está funcionando, tente reiniciar seu IDE. Isso só aconteceu comigo com VScode.

Onengiye Richard
fonte
Ugh! Não sei por que isso não me ocorreu antes. O VSCode não reconheceria aliases de módulo definidos em meu arquivo de configuração do Webpack e estava exibindo erros do Eslint, mas a execução do Eslint na linha de comando não. Reiniciar o VScode corrigiu o problema!
Jared Knipp
3

Eu tive um problema semelhante no Windows, porém às vezes o eslint funcionava (no vscode) às vezes não. Mais tarde, percebi que funciona bem depois de um tempo. Estava relacionado a este problema: servidor eslint leva cerca de 3-5 minutos até estar disponível

Definir a variável de ambiente NO_UPDATE_NOTIFIER=1resolveu o problema

cimak
fonte
3

Estou dando a resposta assumindo que você já definiu regras na raiz do projeto local com .eslintrc e .eslintignore . Depois de instalar o VSCode Eslint Extension, várias configurações precisam ser feitas em settings.json para vscode

eslint.enable: true
eslint.nodePath: <directory where your extensions available>

Instalar o eslint local como uma dependência do projeto é o último ingrediente para que isso funcione. considere não instalar o eslint como global, o que pode entrar em conflito com o pacote instalado localmente.

LasithaMD
fonte
3

Tive um problema semelhante com o eslint dizendo que ele estava '... ainda não validando nenhum arquivo', mas nada foi relatado no console de problemas do VS Code. No entanto, após atualizar o VS Code para a versão mais recente (1.32.1) e reiniciar, o eslint começou a funcionar.

PRS
fonte
3

No meu caso, o ESLint foi desabilitado em meu espaço de trabalho. Tive que habilitá-lo nas configurações de extensões vscode.

Melchia
fonte
3

Já que você consegue lint com sucesso via linha de comando, o problema está mais provavelmente na configuração do plugin ESLint .

Assumindo que a extensão está instalada corretamente, verifique todas as propriedades de configuração relacionadas ao ESLint no projeto (espaço de trabalho) e no settings.json definido pelo usuário (global).

Existem algumas coisas que podem estar configuradas incorretamente em seu caso específico; para mim, o JavaScript estava desabilitado depois de trabalhar com o TypeScript em outro projeto e meu settings.json global acabou ficando com o seguinte:

"eslint.validate": [
  { "language": "typescript", "autoFix": true }
 ]

A partir daqui, foi uma solução simples:

"eslint.validate": [
  { "language": "javascript", "autoFix": true },
  { "language": "typescript", "autoFix": true }
]

Isso é tão comum que alguém escreveu um post de blog direto sobre o ESLint não funcionar no VS Code . Eu apenas adicionaria, verificar seu settings.json de usuário global antes de substituir a configuração do espaço de trabalho local.

dmudro
fonte
Para mim, além do que você especificou, eu tive que adicionar "javascriptreact"e "typescriptreact"já que meu projeto usa React.
oyalhi
Ótimo ponto. javascripte javascriptreactsão valores padrão, mas acho que você precisaria *scriptreactadicionar novamente para os arquivos JSX.
dmudro
2

No meu caso, definir eslint validate para: "eslint.validate": ["javascript", "javascriptreact", "html", "typescriptreact"] funcionou.

Tomasz Ostroga
fonte
2

Eu uso Use Prettier Formatter e a extensão ESLint VS Code juntos para codificação e formatação.

insira a descrição da imagem aqui

insira a descrição da imagem aqui

agora instale alguns pacotes usando o comando fornecido, se mais pacotes forem necessários, eles serão exibidos com o comando de instalação como um erro no terminal para você, instale-os também.

npm i eslint prettier eslint@^5.16.0 eslint-config-prettier eslint-plugin-prettier eslint-config-airbnb eslint-plugin-node eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks@^2.5.0 --save-dev

agora crie um novo nome de arquivo .prettierrc no diretório inicial do seu projeto, usando este arquivo você pode definir as configurações da extensão mais bonita, minhas configurações estão abaixo:

{
  "singleQuote": true
}

agora quanto ao ESlint você pode configurá-lo de acordo com sua necessidade, estou aconselhando você a ir ao site do Eslint ver as regras ( https://eslint.org/docs/rules/ )

Agora crie um arquivo de nome .eslintrc.json no diretório inicial do seu projeto, usando esse arquivo você pode configurar o eslint, minhas configurações estão abaixo:

{
  "extends": ["airbnb", "prettier", "plugin:node/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "spaced-comment": "off",
    "no-console": "warn",
    "consistent-return": "off",
    "func-names": "off",
    "object-shorthand": "off",
    "no-process-exit": "off",
    "no-param-reassign": "off",
    "no-return-await": "off",
    "no-underscore-dangle": "off",
    "class-methods-use-this": "off",
    "prefer-destructuring": ["error", { "object": true, "array": false }],
    "no-unused-vars": ["error", { "argsIgnorePattern": "req|res|next|val" }]
  }
}
senhor
fonte
1

No meu caso, não estava funcionando porque eu tinha adicionado apenas uma pasta do monorepo ao projeto, mesmo tendo o package.jsone a extensão configurados. Trabalhei apenas quando adicionei todo o projeto (que continha o package.jsonarquivo) ao VS Code.

shivangg
fonte
1

Se você estiver desenvolvendo um projeto com eslint como uma dependência package.json, certifique-se de executá-lo npm install. Isso resolveu para mim.

JBaczuk
fonte
1

Para mim, eu desativei acidentalmente o ESLint quando algum prompt foi mostrado por ele.

As etapas abaixo corrigiram isso para mim

  1. Shift + Command + P e selecione ESLint: Disabled ESLint
  2. Fechar vscode
  3. Shift + Command + P e selecione ESLint: Show Output Channel
Abdul Vajid
fonte
0

Vá para o arquivo settings.json, adicione o seguinte e corrija o eslint.nodepath. Adapte-o às suas preferências.

 // PERSONAL
  "editor.codeActionsOnSaveTimeout": 2000,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.fontSize": 16,
  "editor.formatOnSave": true,
  "explorer.confirmDragAndDrop": true,
  "editor.tabSize": 2,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  "eslint.nodePath": "C:\\{path}",
  "eslint.workingDirectories": ["./backend", "./frontend"],
DJN
fonte