Ulaşım
- Adres:Batıkent Mh. 8910 Sk. 6. Etap 1H No: 18 Yeni Toki Eyyübiye / Şanlıurfa (Yeni Alım Satım Karşısı)
- Telefon:0 (545) 528 88 93
- eMail: info@alestaweb.com
ESLint 9'a geçiş yaparken "extends" key not supported veya "plugins array format" hatası mı alıyorsunuz? Alesta Web olarak ESLint 9 flat config migration sürecinde karşılaşılan tüm hataları ve çözümlerini bu kapsamlı rehberde topladık. eslintrc formatından flat config'e geçiş artık çok kolay!
Alesta Web ekibi olarak ESLint 9'un en büyük değişikliğini açıklayalım: Flat Config!
ESLint 9.0.0 ile birlikte eski .eslintrc.js formatı deprecated (kullanımdan kaldırıldı) oldu. Yerine eslint.config.js adlı yeni flat config formatı geldi.
// .eslintrc.js (DEPRECATED!)
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
],
plugins: ['react', 'import'],
rules: {
'no-unused-vars': 'warn',
},
}
// eslint.config.js (NEW!)
import js from '@eslint/js'
import react from 'eslint-plugin-react'
export default [
js.configs.recommended,
{
files: ['**/*.{js,jsx}'],
plugins: {
react: react,
},
languageOptions: {
ecmaVersion: 2024,
sourceType: 'module',
globals: {
window: 'readonly',
document: 'readonly',
},
},
rules: {
'no-unused-vars': 'warn',
},
},
]
Flat config'in en büyük avantajı: daha explicit (açık), daha predictable (öngörülebilir) ve cascade inheritance sorunlarından arınmış olması. Alesta Web olarak yeni projelerde flat config kullanmanızı öneriyoruz.
ESLint 9'a geçerken Alesta Web ekibi olarak en sık karşılaştığımız hatalar:
| Hata / Error | Nedeni / Cause |
|---|---|
extends key not supported |
Flat config'de extends kullanılamaz |
plugins array format |
Plugins artık object olmalı, array değil |
context.getScope is not a function |
Plugin ESLint 9 ile uyumsuz |
Class extends value undefined |
typescript-eslint paketleri eski |
env is not supported |
env yerine globals kullanılmalı |
En yaygın hata: "A config object is using the 'extends' key, which is not supported in flat config system."
ESLintError: A config object is using the "extends" key, which is not supported in flat config system. Instead of "extends", you can include config objects that you'd like to extend from directly in the flat config array.
// eslint.config.js
import js from '@eslint/js'
import reactPlugin from 'eslint-plugin-react'
import reactHooksPlugin from 'eslint-plugin-react-hooks'
export default [
// extends yerine direkt config array'e ekle
js.configs.recommended,
// React plugin config
{
files: ['**/*.{js,jsx,ts,tsx}'],
plugins: {
react: reactPlugin,
'react-hooks': reactHooksPlugin,
},
rules: {
...reactPlugin.configs.recommended.rules,
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
},
settings: {
react: {
version: 'detect',
},
},
},
]
ESLint 9.5'ten itibaren defineConfig() fonksiyonu ile extends tekrar kullanılabilir!
// eslint.config.js
import { defineConfig } from 'eslint/config'
import js from '@eslint/js'
import react from 'eslint-plugin-react'
export default defineConfig([
{
// defineConfig içinde extends kullanılabilir!
extends: [js.configs.recommended],
files: ['**/*.{js,jsx}'],
plugins: {
react,
},
rules: {
'no-unused-vars': 'warn',
},
},
])
defineConfig() fonksiyonu ESLint 9.5+ ile geldi. Eski projelerde extends kullanmak istiyorsanız ESLint'i en son sürüme güncelleyin.
İkinci en yaygın hata: "Key 'plugins': This appears to be in eslintrc format (array of strings) rather than flat config format (object)."
// ❌ YANLIŞ - eslintrc formatı
export default [
{
plugins: ['react', 'import'], // Array of strings = HATA!
rules: { ... }
}
]
// ✅ DOĞRU - flat config formatı
import react from 'eslint-plugin-react'
import importPlugin from 'eslint-plugin-import'
export default [
{
plugins: {
react: react, // Object format
import: importPlugin, // Key: plugin instance
},
rules: {
'react/jsx-uses-react': 'error',
'import/no-unresolved': 'error',
}
}
]
Flat config'de plugin'ler import edilmeli ve object olarak tanımlanmalı. String array formatı artık çalışmıyor!
TypeScript projelerinde "TypeError: Class extends value undefined is not a constructor or null" hatası alabilirsiniz.
# Eski paketleri kaldır npm uninstall @typescript-eslint/eslint-plugin @typescript-eslint/parser # Yeni birleşik paketi yükle npm install typescript-eslint --save-dev
// eslint.config.js
import eslint from '@eslint/js'
import tseslint from 'typescript-eslint'
export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.recommended,
{
files: ['**/*.ts', '**/*.tsx'],
languageOptions: {
parserOptions: {
project: './tsconfig.json',
},
},
rules: {
'@typescript-eslint/no-unused-vars': 'warn',
'@typescript-eslint/explicit-function-return-type': 'off',
},
},
)
typescript-eslint paketi v7+ sürümünden itibaren ESLint 9 ile tam uyumlu. Eski @typescript-eslint/ paketleri yerine yeni birleşik paketi kullanın.
Next.js projelerinde ESLint 9 flat config kullanmak için özel yapılandırma gerekiyor. Alesta Web olarak çalışan bir örnek paylaşıyoruz:
// eslint.config.mjs
import { FlatCompat } from '@eslint/eslintrc'
import js from '@eslint/js'
import path from 'path'
import { fileURLToPath } from 'url'
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
})
export default [
...compat.extends('next/core-web-vitals'),
{
files: ['**/*.{js,jsx,ts,tsx}'],
rules: {
'react/no-unescaped-entities': 'off',
'@next/next/no-img-element': 'warn',
},
},
{
ignores: ['.next/*', 'node_modules/*'],
},
]
npm install eslint@9 @eslint/eslintrc @eslint/js eslint-config-next --save-dev
Next.js 15+ sürümlerinde next lint komutu deprecation warning verebilir. eslint . komutunu direkt kullanmanızı öneriyoruz.
ESLint ekibi, eski config'leri otomatik olarak flat config'e çeviren bir tool sağlıyor:
# Otomatik migration çalıştır npx @eslint/migrate-config .eslintrc.json # Veya .eslintrc.js için npx @eslint/migrate-config .eslintrc.js # Çıktı: eslint.config.mjs dosyası oluşturulur
# Eğer hala eslintrc formatı kullanmanız gerekiyorsa
# (önerilmez, sadece geçici çözüm!)
# Environment variable ile eski format aktif et
ESLINT_USE_FLAT_CONFIG=false npx eslint .
# package.json'da script olarak
{
"scripts": {
"lint": "ESLINT_USE_FLAT_CONFIG=false eslint ."
}
}
npx @eslint/migrate-config çalıştırıldınpm run lint başarılıAlesta Web olarak tüm çözümleri test ettik ve production projelerinde kullandık.
ESLint 9 flat config migration artık tamamlandı! Alesta Web olarak en yaygın hataları ve çözümlerini bu rehberde topladık.
Hızlı Özet / Quick Summary:
npx @eslint/migrate-configFaydalı Linkler / Useful Links:
© 2026 AlestaWeb - Tüm hakları saklıdır. | alestaweb.com