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.


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ć.


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 .


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" ],

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


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ć.



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.


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

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.


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ć.


3

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


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.


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 javascriptreactsą wartoś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ę.


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" }]
  }
}

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.


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.


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

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"],

0

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.