ESLintrc Üreticisi

Oluşturulan yapılandırma neleri içerir

Üretici her zaman eslint:recommended ile başlar ve seçimlerinizin gerektirdiği şeyleri tam olarak ekler:

• browser ve/veya node içeren env, ayrıca es2022
• TypeScript açıkken @typescript-eslint/parser ve plugin:@typescript-eslint/recommended
• React açıkken plugin:react/recommended
• warn olarak ayarlanan no-console ve no-unused-vars

Çıktı, klasik .eslintrc.json biçiminde sade bir JSON nesnesidir; yapıştırıp kendi kurallarınızla genişletebilirsiniz.

Düz yapı vs. Eski yapı

ESLint, .eslintrc.* formatını yerine düz yapılandırma (eslint.config.js) benimseyerek geri çekti. Ana farklar şunlardır:

Yeni projeler düz yapıyı kullanmalıdır. Mevcut projeler 10.x serisi boyunca eski yapıda kalabilir; ancak migrasyon önerilir.

Eklenti ekosistemi

Tipik React/TS proje eklentileri:

@typescript-eslint/eslint-plugin
@typescript-eslint/parser
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
eslint-plugin-import
eslint-config-prettier

Bu, orta düzeyde bir görüşe sahip bir yapı için altı paketten oluşur. Üretici yalnızca seçtiklerinizi ekler; böylece yapılandırmanın referans verdiği şeyleri kurarsınız.

Prettier ile bir arada çalışma

Prettier biçimlendirmeyi yönetir; ESLint ise biçimlendirmenin ötesinde doğruluk ve stil konularını ele alır. Çakışmaları önlemek için:

1. eslint-config-prettier paketini yükleyin ve onu extends/config dosyanızdaki SON öğe olarak ekleyin.
2. Prettier’in çıktısıyla çelişen tüm ESLint kurallarını devre dışı bırakır.
3. Prettier’i ayrı olarak çalıştırın (düzenleyicide kaydederken, pre-commit kancasında veya CI sürecinde).

eslint-plugin-prettier paketini yeni projelerde kullanmayın; bu araç ESLint içinde Prettier’i çalıştırarak ESLint’i yavaşlatır. İki aracı birbirinden ayrı tutun.

Kuralların ayarlanması için ipuçları

• Gevşek başlayın, kademeli olarak sıkılaştırın. Hatalardan önce uyarıları etkinleştirin.
• Testler için geçersiz kılın. Test dosyaları genellikle no-unused-expressions kuralının gevşetilmesini ve Jest global değişkenlerinin kullanılabilir olmasını gerektirir.
• Betikler için geçersiz kılın. Derleme betikleri, env: node genel olarak eklenmeden Node global değişkenlerine ihtiyaç duyabilir.
• Geçersiz kılmaları belgeleyin. Her kural geçersiz kılma, nedenini açıklayan bir yorumu hak eder.

Düzenleyicinizle uyumlu yapılandırma

VS Code için ESLint uzantısının yüklü ve yapılandırılmış olması gerekir. Kaydederken otomatik düzeltme için bunları çalışma alanı ayarlarınıza ekleyin:

{
  "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" },
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}