ESLint VS Code'da çalışmıyor mu?

ESLint VS Code'da benim için çalışmıyor. Eklenti VS Code'da yüklü ve ESLint'in kendisi de kurduğum package.json'da bir geliştirici bağımlılığı olarak var.

VS Code Kullanıcı Ayarlarında aşağıdaki seçeneği değiştirdim:

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

eslint --initTemel .eslintrc.jsondizini paketimin ana dizinine eklemek için komutu kullanıyorum .

Diğer kişiler, aynı ESLint yapılandırma dosyasıyla tam olarak aynı paketi kullanarak VS Code'dan ESLint geri bildirimi alabildiler.

Varsayılan olarak kural kümesinin içinde bulunan ve önerilen kural kümesine dahil edilen birden çok kuralı doğrudan kırdığımda hiçbir geri bildirim almadım. .eslintrc.json dosyanın .

Neyi kaçırıyorum?

Düzenleme: ESLint kullanarak komut satırı aracılığıyla test ettim ve her şey beklendiği gibi çalıştı, olması gereken yerde hatalar bulundu, ancak bu aynı hatalar VS Code'da hiç görünmedi. Sorun ESLint değil VS Code tarafında görünüyor.

ESLint'in size geri bildirim vermemesinin birkaç nedeni vardır. ESLint önce projenizde konfigürasyon dosyanızı arayacak ve eğer orada bir .eslintrc.json bulamazsa, global bir konfigürasyon arayacaktır. Kişisel olarak, her projeye sadece ESLint kuruyorum ve her projeye göre bir konfigürasyon oluşturuyorum.

Geri bildirim almamanızın ikinci nedeni, geri bildirimi almak için .eslintrc.json'da linting kurallarınızı tanımlamanız gerektiğidir. Orada kural yoksa veya kurulu eklentiniz yoksa, bunları tanımlamanız gerekir.

ESLint, terminalde çalışıyorsa ancak VSCode içinde çalışmıyorsa, bunun nedeni büyük olasılıkla uzantının hem yerel hem de genel node_modulesklasörleri algılayamamasıdır .

Doğrulamak için, bilinen bir sorunu olan bir JavaScript dosyasını açtıktan sonra paneli açmak için VSCode'da Ctrl+ Shift+ tuşuna basın . Eğer sekme bir hata veya bir uyarı gösteriyorsa , -veya- gösteriliyorsa , VSCode yolu algılamaya çalışırken bir sorun yaşıyor demektir.UOutputeslintFailed to load the ESLint library for the document {documentName}.jsProblemseslint

Evetse, eslint.nodePathVSCode ayarlarında ( settings.json) yapılandırarak manuel olarak ayarlayın . Tam yolu verin (örneğin, gibi "eslint.nodePath": "C:\\Program Files\\nodejs",) - ortam değişkenlerinin kullanılması şu anda desteklenmemektedir.
Bu seçenek ESLint uzantı sayfasında belgelenmiştir .

Benim durumumda, TypeScript'i React ile kullandığım için, düzeltme sadece ESLint'e bu dosyaları da doğrulamasını söylemekti. Bunun kullanıcı ayarlarınıza girmesi gerekiyor:

"eslint.validate": [ "javascript", "javascriptreact", "html", "typescriptreact" ],

kendi başıma birden fazla projem olduğu için çalışma dizinlerini yapılandırmak sorunu çözdü. .eslintrc aynı pencerede dosyaları açık uçlu .

Bunu senin .vscode/settings.json

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

github'daki bu adama teşekkürler: https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-542592372

Not: .eslintrc/ node_modules hariç tüm alt dizinleri listelemek için kullanışlı komut :

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

Benim durumumda, VSCode'a ESLint uzantısını yüklemedim, bu da soruna neden oldu. Yaptı ve tekrar çalışmaya başladı.

VSCode'u yeniden başlatmak benim için çalıştı.

Komut satırı aracılığıyla başarılı bir şekilde tüy bırakabildiğiniz için, sorun büyük olasılıkla ESLint eklentisinin yapılandırmasındadır .

Uzantının düzgün şekilde yüklendiğini varsayarak, hem proje (çalışma alanı) hem de kullanıcı (global) tanımlı settings.json içindeki ESLint ile ilgili tüm yapılandırma özelliklerini kontrol edin .

Özel durumunuzda yanlış yapılandırılabilecek birkaç şey vardır; benim için başka bir projede TypeScript ile çalıştıktan sonra JavaScript devre dışı bırakıldı ve global settings.json'um aşağıdakilere bakmaya başladı:

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

Buradan basit bir düzeltmeydi:

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

Bu o kadar yaygındır ki, birisi ESLint'in VS Code'da çalışmadığı hakkında basit bir blog yazısı yazmıştır . Yerel çalışma alanı yapılandırmasını geçersiz kılmadan önce yalnızca genel kullanıcı ayarlarınızı kontrol edin.json eklerim.

Genel bir ESLint yüklemesi kullanıyorsanız, yapılandırmanızda kullanılan tüm eklentilerin de küresel olarak yüklenmesi gerekir. Yerel kurulum için akıllıca gibi. Yerel olarak yüklediyseniz ve yerel olarak doğru şekilde yapılandırdıysanız, ancak eslint çalışmıyorsa, IDE'nizi yeniden başlatmayı deneyin. Bu sadece VScode ile başıma geldi.

Benim durumumda ESLint , çalışma alanımda devre dışı bırakıldı. Vscode uzantı ayarlarında etkinleştirmem gerekiyordu.

Windows'ta benzer bir sorun yaşadım, ancak bazen eslint çalıştı (vscode'da) bazen çalışmadı. Daha sonra bir süre sonra iyi çalıştığını anladım. Bu sorunla ilgiliydi : eslint sunucusunun kullanılabilir olması yaklaşık 3-5 dakika sürer

Çevre değişkenini ayarlamak NO_UPDATE_NOTIFIER=1sorunu çözdü

Yerel proje kökünüzde .eslintrc ve .eslintignore ile kuralları zaten tanımladığınızı varsayarak yanıt veriyorum . VSCode Eslint Uzantısını Kurduktan sonra vscode için settings.json'da yapılması gereken birkaç yapılandırma

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

Eslint local'i bir proje bağımlılığı olarak kurmak, bunun işe yaraması için son bileşendir. eslint'i global olarak kurmamayı düşünün; bu, yerel kurulu paketinizle çakışabilir.

Eslint'in '.. henüz herhangi bir dosyayı doğrulamadığını' söyleyen benzer bir sorun yaşadım, ancak VS Code sorun konsolunda hiçbir şey bildirilmedi. Ancak VS Code'u en son sürüme (1.32.1) yükselttikten ve yeniden başlattıktan sonra eslint çalışmaya başladı.

Benim durumumda eslint ayarı şu şekilde: "eslint.validate": ["javascript", "javascriptreact", "html", "typescriptreact"], işi yaptı.

Kod yazma ve biçimlendirme için Prettier Formatter ve ESLint VS Code uzantısını birlikte kullanıyorum.

şimdi verilen komutu kullanarak bazı paketleri kurun, eğer daha fazla paket gerekiyorsa, bunlar yükleme komutu ile sizin için terminalde bir hata olarak gösterilecektir, lütfen bunları da kurun.

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

şimdi proje ana dizininizde .prettierrc yeni bir dosya adı oluşturun , bu dosyayı kullanarak daha güzel uzantının ayarlarını yapılandırabilirsiniz, ayarlarım aşağıdadır:

{
  "singleQuote": true
}

şimdi ESlint'e gelince, ihtiyacınıza göre yapılandırabilirsiniz, Eslint web sitesine gitmenizi tavsiye ediyorum, kuralları görün ( https://eslint.org/docs/rules/ )

Şimdi proje ana dizininizde bir .eslintrc.json dosya adı oluşturun , bu dosyayı kullanarak eslint'i yapılandırabilirsiniz, yapılandırmalarım aşağıdadır:

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

Benim için, ESLint tarafından bazı istemler gösterildiğinde yanlışlıkla devre dışı bıraktım.

Aşağıdaki adımları yapmak benim için sorunu çözdü

1. Shift + Command + P ve seçin ESLint: Disabled ESLint
2. Vscode'u kapat
3. Shift + Command + P ve seçin ESLint: Show Output Channel

Benim durumumda, çalışmıyordu çünkü projeye monorepo'nun yalnızca bir klasörünü ekledim, package.jsonve uzantısını yapılandırmış olmama rağmen . Sadece tüm projeyi ( package.jsondosyayı içeren) VS Code'a eklediğimde çalıştım .

Package.json bağımlılığı olarak eslint ile bir proje geliştiriyorsanız, çalıştırdığınızdan emin olun npm install. Bu benim için sorunumu çözdü.

Settings.json dosyanıza gidin, aşağıdakileri ekleyin ve eslint.nodepath'i düzeltin. Kendi tercihlerinize göre uyarlayın.

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

Benim durumumda, .eslintrc.jsondosya .vscodeklasörün içindeydi . Kök klasöre taşıdığımda ESLint düzgün çalışmaya başladı.

Genel Konular

Terminali açın Ctrl+`

Çıktı ESLint açılır menüsü altında , yararlı hata ayıklama verilerini bulabilirsiniz (Hatalar, uyarılar, bilgiler).

Örneğin, eksik .eslintrc-.jsonbu hatayı atar:

Error: ENOENT: no such file or directory, realpath

Ardından, eklentinin etkin olup olmadığını kontrol edin:

Son olarak, v 2.0.4'ten beri - eslint.validatenormal durumlarda artık gerekli değil ( eski eski ayar ):

eslint.probe= ESLint uzantısının etkinleştirilmesi ve dosyayı doğrulamaya çalışması gereken dil tanımlayıcıları için bir dizi. İncelenen diller için doğrulama başarısız olursa, uzantı sessiz diyor. Varsayılan için [ javascript, javascriptreact, typescript, typescriptreact, html, vue, markdown].

Belirli Sorun - İlk kez eklenti kurulumu

Sorunum ESLint eklentisi "şu anda engelli " durum çubuğuyla ilgiliydi Yeni / İlk kurulumda (v2.1.14) ilgiliydi.

ESLint eklentisi Sürüm 2.1.10'dan (08/10/2020) itibaren

ESLint uzantısı bir ESLint kitaplığını ilk kez yüklemeye çalıştığında ve bir onay gerektiğinde kalıcı iletişim kutusu gösterilmez. Bunun yerine ESLint durum çubuğu öğesi, yürütmenin şu anda engellendiğini belirten ESLint durum simgesine dönüşür.

status-bar(Sağ Alt köşe) seçeneğine tıklayın :

Bu açılır pencereyi açar:

Onay ==> Allows Everywhere

-veya- komutlarla:

ctrl+ Shift+ p -ESLint: Manage Library Execution

"Sürüm Notları" altında daha fazlasını okuyun:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint