ESLint ve @typescript-eslint
Tür farkındalığı gerektiren sorunları yakalamak ve tutarlı bir biçim uygulamak için ESLint'i @typescript-eslint eklentisiyle kurun.
ESLint ve @typescript-eslint, CoddyKit'te ücretsiz bir TypeScript Academy dersidir. Bu, 3 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, TypeScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. TypeScript Academy kursu toplamda 3 dersten oluşur.
Giriş
Hedef: TypeScript projelerinde hataları yakalamak ve biçemi zorunlu kılmak için ESLint ile @typescript-eslint'i bir arada kullanın.
Yükleme
Temel ESLint'i, @typescript-eslint/parser ve @typescript-eslint/eslint-plugin paketlerini yükleyin.
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-pluginYapılandırma
ESLint'i TS ayrıştırıcısını ve önerilen kuralları kullanacak şekilde yapılandırın. Gerektikçe projeye özgü kurallar ekleyin.
// .eslintrc.js
module.exports = {
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
rules: {
"@typescript-eslint/no-unused-vars": "warn"
}
};Örnek kod denetimi
TS'yi anlayan ayrıştırıcı kullanıldığında ESLint, eksik bağımsız değişkenleri, kullanılmayan değişkenleri ve biçem sorunlarını vurgular.
// demo.ts
function greet(name: string) {
console.log("Hello", name)
}
greet("Ada")
greet() // ESLint error: missing arg
Tür bilgisine duyarlı kurallar
Tür bilgisine ihtiyaç duyan kurallar için tsconfig.json dosyasını parserOptions içinde belirtin; örneğin işlenmemiş vaatleri algılamak için.
// tsconfig.json must be linked for type-aware rules
{
"parserOptions": {
"project": "./tsconfig.json"
}
}
// Example: no-floating-promises
async function f() {
fetch("/api") // ESLint error: unhandled promise
}Kod denetimini çalıştırma
ESLint'i kod tabanınızda çalıştırın. Güvenli düzeltmeleri otomatik olarak uygulamak için --fix ekleyin.
npx eslint "src/**/*.{ts,tsx}" --fixSoru
Hızlı kontrol: Temel ESLint'e ek olarak @typescript-eslint neden kullanılır?
Özet
Özet: ESLint + @typescript-eslint'i yükleyin, ayrıştırıcıyı yapılandırın, önerilen kuralları genişletin ve temiz kod için tür bilgisine duyarlı kurallarla kod denetleyicisini çalıştırın.
Sıkça Sorulan Sorular
“ESLint ve @typescript-eslint” dersi ücretsiz mi?
Evet — “ESLint ve @typescript-eslint” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve TypeScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. TypeScript Academy kursu toplamda 3 dersten oluşur.
“ESLint ve @typescript-eslint” dersinde ne öğreneceğim?
Tür farkındalığı gerektiren sorunları yakalamak ve tutarlı bir biçim uygulamak için ESLint'i @typescript-eslint eklentisiyle kurun. TypeScript Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
TypeScript Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te TypeScript Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 1. dersidir.
“ESLint ve @typescript-eslint” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu TypeScript Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her TypeScript Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- ESLint ve @typescript-eslint
- Prettier entegrasyonu ve kural çakışmaları
- Yaygın gerçek dünya kural kümeleri