ESLint: Nedir ve Nasıl Kullanılır ?

Herkese merhaba 👋

Bu yazımda sizlere benim başıma gelen bazı problemleri kolayca çözümleyebildiği için ESLint’in ne olduğunu ve basitçe nasıl kullanıldığını anlatacağım.

ESLint Nedir ?

Herkes kod yazabilir fakat herkes kodu aynı şekilde yazamaz, kısaca her yiğidin yoğurt yiyişi farklıdır. ESLint ise tam bu noktada devreye giriyor ve bu farklılıkları çözmeye odaklanıyor. Kodu yazan herkes için bir standart oluşturmamıza yardımcı oluyor.

Örneğin Open Source bir proje başlattınız ve projenizi bir noktaya getirdiniz. Artık farklı farklı geliştiriciler de projenize katkıda bulunabilir. Bu projeye katkıda bulunan geliştirici sayısı arttıkça kod parçalarını okumak, anlamak iyice zorlaşacaktır en azından okunabilirliği artırmak, kodların yazımı sırasında ortaya çıkabilecek hataları erkenden fark etmek için ESLint kullanılabilir. Böylece katkıda bulunan her geliştirici henüz daha PR göndermeden ortaya çıkabilecek hataları düzeltmiş ve kodun okunabilirliğini artırmış olur.

Kısaca ESLint , kodunuzu daha tutarlı hale getirmek ve ortaya çıkabilecek hatalardan sıyrılmak için JavaScript kodlarınızdaki hataları tanımlayan ve raporlayan bir araçtır.

Peki nasıl kullanabiliriz ?

Var olan ya da yeni oluşturduğunuz bir projenize eklemek isterseniz ilk yapmanız gereken; Terminalinizden projenizin olduğu dosyaya erişip

npm i eslint --save-dev

bu kodu yazmak böylece ESLint’i projenize dahil etmiş olursunuz. Sırada ise ESLint kurallarımızı belirmek için bir yapılandırma dosyası oluşturmak var.

eslint --init

yazdığımız zaman karşımıza bizim kendi kodlama stilimize göre karar verebileceğimiz ya da var olan popüler stilleri kullanabileceğimiz bir kurulum yardımcısı çıkacak.

ESLint’i nasıl kullanmak istediğiniz, modülleri nasıl kullanmak istediğiniz, framework, TypeScript kullanıp kullanmadığınız, kodunuzun nerde çalışacağı ve config dosyanızın dışarı hangi dosya türü şeklinde çıkacağı gibi birkaç soru sorunun cevabını verip kurulumu tamamlayabilirsiniz. Aynı zamanda .eslintrc.* adında ESLint kurallarımızı tutan bir dosya oluşturmuş olduk.

Daha sonra ise ESLint’i çalıştırmak var

eslint .

diyerek ESlint’i tüm projemiz içerisinde çalıştırabiliriz fakat bu şekilde çalıştırmak yerine “package.json” dosyamızda ufak bir script hazırlayabiliriz.

"scripts": {
   "lint" : "eslint .",
   "lint:fix" : "eslint . --fix"
},

Artık npm run lint yazdığımızda karşımıza projemizde kaç tane aldığımızı ve bu hataların ne hataları olduklarını görebileceğimiz bir çıktı ile karşılacağız.

Gördüğünüz gibi bir sürü hata almışım şimdi ise sıra bu hataları düzeltmekte. Bunun için npm run lint:fix yazarsam 153 hatanın 149'unu çözebilirim.

Ve elimde son olarak 4 tane hata kaldı. Bu hataları da çözüme kavuşturduktan sonra kodum ESLint kurallarının getirmiş olduğu standartları karşılamış olacak 👌

Böylelikle yazımın sonuna geliyorum. Umarım yazımı beğenmişsinizdir ve ESLint’i bir nebze de olsa anlatabilmişimdir. Şimdilik benden bu kadar görüşmek üzere 👋

GitHub, Findmentor ve Twitter adreslerime de göz atmayı unutmayın :)