ESLint Nedir? Kurulum ve Kullanım Rehberi [2026]
Yazar: Burak Balkı | Kategori: Mobile Development | Okuma Süresi: 9 dk
ESLint nedir, nasıl kurulur? JavaScript ve TypeScript projelerinde kod kalitesini artıran kurallar ve best practices.
## ESLint Nedir? Temel Kavramlar ve Önemi
**ESLint**, JavaScript ve TypeScript kod tabanlarında statik kod analizi yaparak hataları tespit eden ve kod standartlarını denetleyen açık kaynaklı bir araçtır. Modern yazılım geliştirme süreçlerinde, özellikle **Mobile Development** projelerinde kodun tutarlılığını sağlamak, potansiyel hataları çalışma zamanından (runtime) önce yakalamak için kritik bir rol oynar.
Linting işlemi, kodun çalıştırılmadan analiz edilmesidir. ESLint, tanımlanan kurallar (rules) çerçevesinde kodu tarar ve belirlenen standartlara uymayan satırları raporlar. Bu süreç, ekiplerin ortak bir kod yazım stili (code style) benimsemesini sağlar ve teknik borcun (technical debt) birikmesini engeller.
## Mobil Uygulama Geliştirmede ESLint Neden Gereklidir?
Mobil uygulama geliştirme süreçleri, özellikle React Native veya Flutter (JS/TS tabanlı köprüler ile) gibi teknolojilerde karmaşık bir yapıya sahiptir. **ESLint** kullanımının temel avantajları şunlardır:
- **Hata Önleme:** Tanımlanmamış değişkenlerin kullanımı veya yanlış fonksiyon çağrıları gibi hataları anında tespit eder.
- **Kod Tutarlılığı:** Farklı geliştiricilerin aynı projede benzer kod blokları yazmasını sağlar.
- **Performans:** Gereksiz bellek kullanımı veya verimsiz döngüler gibi performans düşürücü yapıları belirler.
- **Öğrenme Süreci:** Yeni başlayan geliştiriciler için en iyi pratikleri (best practices) zorunlu kılarak bir eğitim aracı görevi görür.
## ESLint Kurulumu: Adım Adım Başlangıç Rehberi
Bir mobil geliştirme projesine (örneğin bir React Native projesi) ESLint eklemek için öncelikle projenizin kök dizininde bir terminal açmanız gerekir. İlk adım, paketi projenize geliştirme bağımlılığı (dev dependency) olarak eklemektir.
```bash
npm install eslint --save-dev
```
Paket yüklendikten sonra, ESLint'i yapılandırmak için etkileşimli kurulum sihirbazını başlatabilirsiniz:
```bash
npx eslint --init
```
Bu komutu çalıştırdığınızda size projenizin yapısı hakkında sorular sorulacaktır. Tipik bir mobil projesi için şu seçimleri yapmanız önerilir:
1. **How would you like to use ESLint?** -> To check syntax, find problems, and enforce code style
2. **What type of modules does your project use?** -> JavaScript modules (import/export)
3. **Which framework does your project use?** -> React (Mobil projeler için genelde budur)
4. **Does your project use TypeScript?** -> Yes
5. **Where does your code run?** -> Browser (Mobil için tarayıcı API'ları kullanılmasa da bu seçilir)
## .eslintrc.json Yapılandırması ve Detayları
Kurulum tamamlandığında projenizde bir `.eslintrc.json` (veya .js, .yaml) dosyası oluşacaktır. Bu dosya, ESLint'in beynidir. İşte profesyonel bir mobil projesi için temel bir yapılandırma örneği:
```json
{
"env": {
"browser": true,
"es2021": true,
"node": true,
"react-native/react-native": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": [
"react",
"react-native",
"@typescript-eslint"
],
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "always"],
"no-console": "warn",
"react-native/no-unused-styles": 2,
"react-native/split-platform-components": 2,
"react-native/no-inline-styles": 1,
"react-native/no-color-literals": 2
}
}
```
| Kural Seviyesi | Değer | Açıklama |
| :--- | :--- | :--- |
| **Off** | 0 | Kural devre dışı bırakılır. |
| **Warn** | 1 | Uyarı verir ancak süreci durdurmaz. |
| **Error** | 2 | Hata verir ve CI/CD süreçlerini durdurur. |
## Popüler ESLint Pluginleri ve Mobil Geliştirme Eklentileri
Mobil uygulama geliştirirken standart kurallar yetersiz kalabilir. Bu durumda topluluk tarafından geliştirilen eklentileri kullanmak gerekir. En popüler eklentiler şunlardır:
- **eslint-plugin-react-native:** React Native'e özgü kurallar (inline style kontrolü vb.) ekler.
- **eslint-plugin-react-hooks:** React Hook kullanım kurallarını denetler.
- **@typescript-eslint/eslint-plugin:** TypeScript projeleri için statik analiz sağlar.
Bu eklentileri kurmak için:
```bash
npm install eslint-plugin-react-native eslint-plugin-react-hooks @typescript-eslint/plugin --save-dev
```
## Prettier ile ESLint Entegrasyonu: Kusursuz Formatlama
ESLint kodun mantıksal hatalarıyla ilgilenirken, **Prettier** kodun görsel formatıyla (boşluklar, satır uzunluğu vb.) ilgilenir. İkisini birlikte kullanmak için çakışmaları önleyen eklentileri kurmalısınız:
```bash
npm install eslint-config-prettier eslint-plugin-prettier --save-dev
```
Yapılandırma dosyanıza (`.eslintrc.json`) şu eklemeyi yapın:
```json
{
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
]
}
```
Bu sayede Prettier kuralları ESLint üzerinden çalıştırılır ve format hataları ESLint uyarısı olarak görünür.
## React Native Projelerinde ESLint Kullanımı
React Native projelerinde stil tanımlamaları genellikle `StyleSheet.create` ile yapılır. ESLint, bu tanımlamalarda kullanılmayan stilleri tespit edebilir. Aşağıdaki örnekte hatalı ve doğru kullanım gösterilmiştir:
**Hatalı Kullanım (ESLint Uyarısı Verir):**
```javascript
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
unusedStyle: {
color: 'red',
},
});
export default function App() {
return Hello