ESLint ve Prettier ile Daha Güçlü

ESLint ve Prettier ile Daha Güçlü

2019-12-30    

Kaliteli (Ölçeklenebilirlik, Esneklik vs) yazılım üretmek birçok nedenden dolayı zordur. Hele ki Javascript standartlarına alışkın yazılım geliştiriciler bu konudan dolayı çok acı çeker.

React kullanan yazılımcılar artık o kadar hızlı kodlama yapıyorlar ki birçoğu aslında Javascript yazdığını unutuyor. Durum böyle olunca kod kalitesini kod bittikten sonra veya en azından sonlarına doğru test etmek istiyor. Geliştirme ekipleri arasında daha az çaba (code review, debugging gibi) göstererek tutarlı ve temiz kod üretmek için kesinlikle kullanmasını tavsiye ettiğim bir araç seti var. ESLint + Prettier

ESLint

"Javascript dinamik ve gevşek tipli olduğundan geliştirici hatalarına eğilimli bir dildir. Bir derleme işlemine tabi olmadığı için genellikle sözdizimi ve diğer hataları bulmak için execute edilir.ESLint, yazılımcıların Javascript kodlarıyla ilgili sorunlarını execute etmeden keşfetmelerini sağlar”. - ESLint Site

ESLint, uyulmasını istediğiniz spesifik kod stilleri için mükemmeldir. Özel olarak yapılandırmadıysanız, kodu sizin için düzeltmez sadece kuralların ihlal edildiğini yazılımcıya bildirir. ESLint projenin Javascript kodunu kullanır ve .eslintrc adlı bir yapılandırma dosyası ile belirlenen yönergeler dahilinde sorunlu kod bloklarını bulur ve uyarır. Eğer istenirse kendiniz özel kod stilleri yapılandırma dosyası ile belirtebilerisiniz. VS Code için ESLint eklentisi, Google, Facebook, AirBnb gibi büyük teknoloji firmalarının desteklediği açık kaynaklı ESLint yardımcı programının bir uzantısıdır. AirBnb’nin sunduğu ESLint kuralları React için üst düzey standart olarak kabul edilir. Çok sıkı ve titiz kurallar bütünüdür. O kadar çok popüler bir pakettir ki haftalık 1 milyondan fazla indirme yapılır.

Kurulum

ESLint başlarken projenize bazı geliştirme paketleri (dev-dependency) kurmanız gerekmektedir. Daha sonra proje klasörü içine .eslintrc ayar dosyası oluşturmalısınız.

npm install eslint --save-dev

Yüklendikten sonra yapılandırma dosyamızı oluşturmamız gerekiyor.Yapılandırma dosyası hangi özellikleri ve kuralları kullandığımızı tanımlamamıza izin verir. Linter'mızın ES6 sözdizimini tanımasını, ancak tanımsız bir değişkenimiz olduğunda kırılmasını istiyorsak, bir yapılandırma dosyasına ihtiyacımız vardır. Bir tane oluşturmak için eslint --init komutunu çalıştırabiliriz. Yapılandırma için daha fazla bilgi istiyorsanız buraya awesome-eslint tıklayabilirsiniz.

Eslint kodunuzda kullanmak için komut satırında eslint . yapmanız yeterlidir. Fakat package.json içerisinde aşağıdaki gibi bir kullanım daha verimli olacaktır.

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

Örnek bir yapılandırma dosyası aşağıdaki gibidir.

{
  "env": {
    "browser": true,
    "jest": true,
    "es6": true
  },
  "plugins": ["import"],
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
    "no-console": "warn",
    "no-eval": "error",
    "import/first": "error"
  }
}

Prettier

Projenizde ESLint ile ortak tuzaklardan nasıl kaçınacağınızı biliyorsunuz. Peki şimdi ne yapmak gerekir? Tabi ki kodu biçimlendirmek. Aynı projede ikiden fazla kişi çalıştığını varsayarsak;

  • Bir geliştirici tek tırnak yerine hep çift tırnak kullanır.
  • Ayrıca soldan girinti için dört boşluk kullanır.
  • Siz ise iki boşluk ve tek tırnak tercih edersiniz.

Kurulum

Sonuç ise karmaşa ve başkasının kodunu kendi stilinize uydurmaya ve okumaya çalışırsınız. Bu sorun ortak bir stil kullanarak çözümlenebilir. Nasıl yapılır? Prettier belirtilen stillere göre kod formatlayıcı olarak kullanılır. Birçok dosya formatına desteği vardır. Örn; JS; JSX, CSS, JSON gibi.

npm install prettier --save-dev

Bir .prettierrc dosyası veya package.json dosyanız içine prettier anahtar aracılığıyla yapılandırabilirsiniz. Örnek olarak yapılandırabileceğiniz bazı kurallar şunlardır:

  • singleQuote :Tek tırnak kullanmak için true değeri kullanılır.
  • semi :Her satır sonuna noktalı virgül kullanmak için true değeri kullanılır.

Daha ayrıntılı seçeneklere ulaşmak için prettier tıklayınız.

Prettier ve ESLint Entegrasyon

Prettier kodumuzu biçimlendirir. Ayrıca belirtmek gerekir ESLint'de bazı basit biçimlendirme kuralları içerir. Prettier kullanırsak bunlara ihtiyacımız olmaz, hatta ESLint yapılandırmamıza entegrge edebilirir.

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier paketi Prettier ile çakışan kuralları devre dışı bırakır.eslint-plugin-prettier paketi Prettier kullanarak formatlayan kuralı ekler. Bu yapılandırmayı ESLint için aşağıdaki şekilde etkinleştirebilirsiniz:

{
  "extends": ["plugin:prettier/recommended"]
}

Prettier yapılandırması için aşağıdaki yapılandırmayı kullanabiliriz.

{
  "printWidth": 85,
  "arrowParens": "always",
  "semi": false,
  "tabWidth": 2
}

Önemli Not

VSCode kullanıcıları için hem Prettier hem ESLint için extension mevcuttur.

TwitterFacebookGoogle+
# Javascript