ESLint nie działa w VS Code?

88

ESLint nie działa dla mnie w VS Code. Mam wtyczkę zainstalowaną w VS Code i sam ESLint jako zależność programisty w moim pliku package.json, który również zainstalowałem.

Zmodyfikowałem następującą opcję w ustawieniach użytkownika kodu VS:

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

Użyłem polecenia, eslint --initaby dodać plik basic .eslintrc.jsondo głównego katalogu mojego pakietu.

Inne osoby mogły uzyskać informacje zwrotne dotyczące ESLint z VS Code przy użyciu tego samego pakietu z dokładnie tym samym plikiem konfiguracyjnym ESLint.

Nie otrzymałem żadnych informacji zwrotnych dotyczących bezpośredniego łamania wielu reguł, które wszystkie były zawarte w zalecanym zestawie reguł, który domyślnie znajduje się w .eslintrc.jsonpliku.

czego mi brakuje?

Edycja: Testowałem przy użyciu ESLint za pomocą wiersza poleceń i wszystko działało zgodnie z oczekiwaniami, z błędami znalezionymi tam, gdzie powinny, jednak te same błędy nigdy nie pojawiły się w kodzie VS. Wydaje się, że problem leży po stronie VS Code, a nie ESLint.

John Landon
źródło
2
Zwróć uwagę, że jeśli pomyślnie zainstalowałeś ESLint , ale nie otrzymałeś opinii od ESLint, tak jak się spodziewałeś, to jest szansa, że ​​zapomniałeś zainicjować ESLint . Aby to zrobić, uruchom to polecenie z katalogu głównego projektu./node_modules/.bin/eslint --init

Odpowiedzi:

25

Istnieje kilka powodów, dla których ESLint może nie udzielać informacji zwrotnych. ESLint będzie szukał najpierw twojego pliku konfiguracyjnego w twoim projekcie i jeśli nie może tam znaleźć pliku .eslintrc.json, będzie szukał konfiguracji globalnej. Osobiście instaluję tylko ESLint w każdym projekcie i tworzę konfigurację opartą na każdym projekcie.

Drugim powodem, dla którego nie otrzymujesz opinii, jest to, że aby uzyskać informację zwrotną, musisz zdefiniować swoje reguły lintingu w pliku .eslintrc.json. Jeśli nie ma tam żadnych reguł lub nie masz zainstalowanych wtyczek, musisz je zdefiniować.

EJ Mason
źródło
1
Jeśli masz lokalny plik .eslintrc.json, nie musisz definiować pliku konfiguracyjnego w ustawieniach.
EJ Mason
3
Mam .eslintrc.jsonjuż lokację umieszczoną w głównym folderze mojego projektu, a moje reguły rozszerzają reguły zalecane przez ESLint, czyli te, które testowałem. Dodałem też własne reguły do ​​dalszych testów, ale bez powodzenia.
John Landon,
38
Podczas korzystania z ESLint bezpośrednio z wiersza poleceń wszystko działa poprawnie i znajduje wszystkie błędy. Wydaje się, że problem dotyczy VS Code, a nie ESLint.
John Landon,
3
spróbuj włączyć eslint w swoich ustawieniach "eslint.enable": true. Upewnij się, że nie masz zainstalowanego eslint na całym świecie. i spróbuj usunąć ścieżkę configFile. W ten sposób mam skonfigurowany Vscode. Napotykam wiele problemów, gdy mam zainstalowany program eslint lokalnie i globalnie.
EJ Mason
3
Dla mnie problem polegał na tym, że nie zainstalowałem rozszerzenia ESLint w VSCode.
atulkhatri
65

Jeśli ESLint działa w terminalu, ale nie w VSCode, prawdopodobnie dlatego, że rozszerzenie nie może wykryć zarówno node_modulesfolderów lokalnych, jak i globalnych .

Aby zweryfikować, naciśnij Ctrl+ Shift+ Uw VSCode, aby otworzyć Outputpanel po otwarciu pliku JavaScript ze znanym eslintproblemem. Jeśli wyświetla Failed to load the ESLint library for the document {documentName}.js-lub- Problemskarta pokazuje błąd lub ostrzeżenie, do którego odnosi się eslint, oznacza to , że VSCode ma problem z próbą wykrycia ścieżki.

Jeśli tak, ustaw go ręcznie, konfigurując eslint.nodePathw ustawieniach VSCode ( settings.json). Podaj pełną ścieżkę (na przykład jak "eslint.nodePath": "C:\\Program Files\\nodejs",) - używanie zmiennych środowiskowych nie jest obecnie obsługiwane.
Ta opcja została udokumentowana na stronie rozszerzenia ESLint .

ParaBolt
źródło
dziękuję, spędziłem kilka godzin na zastanawianiu się, dlaczego eslint działa teraz globalnie z vscode
Andrei Voicu
Najlepsza odpowiedź w historii.
Nikola Mihajlović
52

W moim przypadku, ponieważ używałem TypeScript z React, poprawką było po prostu powiedzenie ESLint, aby sprawdził również te pliki. To musi iść w ustawieniach użytkownika:

"eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ],
Simone
źródło
3
Pracował dla mnie. (W systemie Windows)
Ellis
1
Tutaj też TypeScript z Reactem zadziałał. Dzięki
ggat
TypeScript z React w systemie Windows i to też zadziałało.
Peter Boomsma
27

konfiguracja katalogów roboczych rozwiązała to za mnie, ponieważ miałem wiele projektów z własnymi .eslintrcplikami otwieranymi w tym samym oknie.

Umieść to w swoim .vscode/settings.json

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

dzięki temu facetowi na github: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372

PS: przydatne polecenie do wyświetlenia wszystkich podkatalogów zawierających .eslintrcwyjątkiem / node_modules:

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

Karl Adler
źródło
7

W moim przypadku nie zainstalowałem rozszerzenia ESLint w VSCode, co było przyczyną problemu. Zrobiłem to i znowu zaczęło działać.

atulkhatri
źródło
4

Ponowne uruchomienie VSCode zadziałało dla mnie.

thedanotto
źródło
3

Jeśli używasz globalnej instalacji ESLint, wszelkie wtyczki użyte w twojej konfiguracji muszą być również zainstalowane globalnie. Podobnie jak w przypadku instalacji lokalnej. Jeśli zainstalowałeś lokalnie i poprawnie skonfigurowałeś lokalnie, ale eslint nie działa, spróbuj ponownie uruchomić IDE. To właśnie mi się przydarzyło w przypadku VScode.

Onengiye Richard
źródło
Fuj! Nie wiem, dlaczego nie przyszło mi to do głowy wcześniej. VSCode nie rozpoznawał aliasów modułów zdefiniowanych w moim pliku konfiguracyjnym Webpack i wyświetlał błędy Eslint, ale uruchamianie Eslint z wiersza poleceń nie. Ponowne uruchomienie VScode rozwiązało problem!
Jared Knipp
3

Miałem podobny problem z Windows, jednak czasami eslint działał (w vscode), czasami nie. Później zdałem sobie sprawę, że po chwili działa dobrze. Było to związane z tym problemem: serwer eslint potrzebuje około 3-5 minut, zanim będzie dostępny

Ustawienie zmiennej środowiskowej NO_UPDATE_NOTIFIER=1rozwiązało problem

cimak
źródło
3

Udzielam odpowiedzi, zakładając, że zdefiniowałeś już reguły w swoim lokalnym katalogu głównym projektu z .eslintrc i .eslintignore . Po zainstalowaniu rozszerzenia VSCode Eslint kilka konfiguracji, które należy wykonać w settings.json dla vscode

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

Zainstalowanie eslint local jako zależności projektu jest ostatnim składnikiem, aby to zadziałało. rozważ, aby nie instalować eslint jako globalnego, co mogłoby kolidować z lokalnie zainstalowanym pakietem.

LasithaMD
źródło
3

Miałem podobny problem z eslintem mówiącym, że to „..nie sprawdzano jeszcze żadnych plików”, ale nic nie zostało zgłoszone w konsoli problemów VS Code. Jednak po uaktualnieniu VS Code do najnowszej wersji (1.32.1) i ponownym uruchomieniu eslint zaczął działać.

PRS
źródło
3

W moim przypadku ESLint był wyłączony w moim obszarze roboczym. Musiałem to włączyć w ustawieniach rozszerzeń vscode.

Melchia
źródło
3

Ponieważ możesz pomyślnie lintować za pomocą wiersza poleceń, problem najprawdopodobniej dotyczy konfiguracji wtyczki ESLint .

Zakładając, że rozszerzenie jest poprawnie zainstalowane, sprawdź wszystkie właściwości konfiguracyjne związane z ESLint zarówno w projekcie (obszar roboczy), jak i użytkownika (globalnie) zdefiniowanym settings.json.

Jest kilka rzeczy, które mogą zostać błędnie skonfigurowane w twoim konkretnym przypadku; dla mnie JavaScript został wyłączony po pracy z TypeScript w innym projekcie, a moje ustawienia globalne.json wyglądały następująco:

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

Stąd była to prosta poprawka:

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

Jest to tak częste, że ktoś napisał prosty post na blogu o tym, że ESLint nie działa w VS Code . Po prostu dodam, sprawdź globalne ustawienia użytkownika.json przed zastąpieniem konfiguracji lokalnego obszaru roboczego.

dmudro
źródło
Dla mnie oprócz tego, co określiłeś, musiałem dodać, "javascriptreact"a "typescriptreact"ponieważ mój projekt używa React.
oyalhi
Świetna uwaga. javascripti javascriptreactwartościami domyślnymi, ale myślę, że musiałbyś *scriptreactdodać z powrotem dla plików JSX.
dmudro,
2

W moim przypadku ustawienie eslint validate na: "eslint.validate": ["javascript", "javascriptreact", "html", "typescriptreact"] wykonało pracę.

Tomasz Ostroga
źródło
2

Używam razem rozszerzenia Use Prettier Formatter i ESLint VS Code do lintingu i formatowania kodu.

wprowadź opis obrazu tutaj

wprowadź opis obrazu tutaj

teraz zainstaluj niektóre pakiety za pomocą podanego polecenia, jeśli więcej pakietów będzie wymaganych, pokażą się one z poleceniem instalacji jako błąd w terminalu dla ciebie, zainstaluj je również.

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

teraz utwórz nową nazwę pliku .prettierrc w katalogu domowym twojego projektu, używając tego pliku możesz skonfigurować ustawienia ładniejszego rozszerzenia, moje ustawienia są poniżej:

{
  "singleQuote": true
}

teraz jeśli chodzi o ESlint to możesz go skonfigurować zgodnie ze swoimi wymaganiami, radzę wejść na stronę Eslint i zapoznać się z regulaminem ( https://eslint.org/docs/rules/ )

Teraz utwórz nazwę pliku .eslintrc.json w katalogu domowym swojego projektu, używając tego pliku, który możesz skonfigurować eslint, moje konfiguracje są poniżej:

{
  "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" }]
  }
}
Lord
źródło
1

W moim przypadku nie działało, ponieważ dodałem tylko jeden folder monorepo do projektu, mimo że package.jsonskonfigurowałem rozszerzenie i. Pracowałem tylko wtedy, gdy dodałem cały projekt (który zawierał package.jsonplik) do VS Code.

shivangg
źródło
1

Jeśli tworzysz projekt z eslint jako zależnością package.json, upewnij się, że uruchomiłeś npm install. To naprawiło to dla mnie.

JBaczuk
źródło
1

Dla mnie przypadkowo wyłączyłem ESLint, gdy pojawił się jakiś monit.

Wykonanie poniższych czynności naprawiło to dla mnie

  1. Shift + Command + P i wybierz ESLint: Disabled ESLint
  2. Zamknij vscode
  3. Shift + Command + P i wybierz ESLint: Show Output Channel
Abdul Vajid
źródło
0

Przejdź do pliku settings.json, dodaj następujące elementy i napraw plik eslint.nodepath. Dostosuj go do własnych preferencji.

 // 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
źródło
0

W moim przypadku miałem .eslintrc.jsonplik w .vscodefolderze. Po przeniesieniu go do folderu głównego ESLint zaczął działać poprawnie.

Dino Bansigan
źródło