Herkese merhaba arkadaşlar, ESLint javascript, node, react, angular gibi şeylere uğraşırken mutlaka duymuşsunuzdur. Bu aracımız aslında yazdığınız projeyi bir standarta göre yazmanızı sağlıyor. Mesela siz bir proje yazmaya başladınız ve sonradan dahil olan bir arkadaşınız var ama arkadaşınızın kod yazım stili farklı siz if bloğunu
yazarken arkadaşınız
Şeklinde yazıyor. Bu ve buna benzer yazım stillerini bir kurala göre yazmanıza olanak sağlayan ESLint kullanacağız. İlk önce proje klasörü oluşturalım. İçine bir package.json oluşturalım.
Hızlıca bir package.json oluşturması için -f parametresi girdim. Siz isterseniz sorulara yanıt vererek oluşturabilirsiniz. Şimdi ise ESLint kuralım. global olarak.
index.js dosyası oluşturdum ben bunun içinde kodlarım olacak bunları kontrol edeceğim. Şimdi ise ESLint kurallarımızı oluşturmaya geldi sıra.
Diyerek kuralları oluşturmaya başlayacağız. Size birkaç soru soracak o sorulardan sonra artık eslint hazırdır. Şimdi sorulara bakalım.
1) How would you like to configure ESLint? (ESLint nasıl yapılandırmak istersiniz ben kendim yapılandıracağım için 2. şıkkı seçtim isterseniz google airbnb gibi ünlü firmaların kurallarını yapabilirsiniz.)
2) Which version of ECMAScript do you use? (ES6 sürümünü soruyor.)
3) Are you using ES6 modules? (ES6 modülü kullanacak mısınız diyor.)
4) Where will your code run? (Kodunuz nerede çalışır diyor node mu browser da mı?)
5) Do you use CommonJS? (Commonjs kullanacakmısınız diyor ben hayır dedim.)
6) Do you use JSX? (jsx kullanacakmısınız diyor react için eveti seçin. )
7) What style of indentation do you use? (Hangi girinti stilini kullanıyorsunuz diyor ben space kullanıyorum.)
7) What quotes do you use for strings? (Diziler için hangi tırnak kullanıyorsunuz diyor tek mi çift mi ben tek kullanıyorum.)
8) What line endings do you use? (Hangi satır sonlarını kullanıyorsunuz diyor ben unix kullanıyorum.)
9) Do you require semicolons? (Noktalı virgüllere ihtiyacınız varmı diyor ben var dedim.)
10) What format do you want your config file to be in? (Config dosyanız hangi formatta kayıt edilsin diyor ben json seçtim.)
Ben bu şekilde cevap verdim sizde kendinize göre seçeceksiniz. Şimdi gelelim package.json dosyamıza bir nevi kısayol olarak ayarlamaya ESLnit hızlıca çalıştırmak için.
eslint . bulunduğu klasördeki tüm dosyaları tarar ve hata kurala uymayanları tespit edip size bildirir. eslint . --fix ise bulunduğun klasörde ESLint tarafından fixlenebilen hatalar ise boşluklar girintiler noktalı virgül gibi bunları çözmeye yarıyor.
ESLint çalıştırmak için:
ESLint hataları fixlemek için(Fixlenebilecek hataları fixlemek):
Yazarak fixleyebilirsiniz.
Bakın birkaç hata yaptım ve bunları gösteriyor satırı satırına. ESLint hakkında birsürü kural ve ayarlanacak şey bulabilirsiniz internetten ben sadece basit olarak ESLint girişi anlattım. Mesela şu kodum bu kurala dahil olmasın şu klasör bu kurala dahil olmasın gibi bunları ihtiyacınız oldukça internetten bulabilirsiniz. Bu konuda anlatmak istemedim hem konu uzamasın hemde okuyanlar sıkılmasın diye sağlıcakla kalın.
Kod:
[COLOR="white"]if (condition) {
...
[/COLOR]}yazarken arkadaşınız
Kod:
[COLOR="white"]if (condition)
{
...
}[/COLOR]Şeklinde yazıyor. Bu ve buna benzer yazım stillerini bir kurala göre yazmanıza olanak sağlayan ESLint kullanacağız. İlk önce proje klasörü oluşturalım. İçine bir package.json oluşturalım.
Kod:
[COLOR="white"]npm init -f[/COLOR]Hızlıca bir package.json oluşturması için -f parametresi girdim. Siz isterseniz sorulara yanıt vererek oluşturabilirsiniz. Şimdi ise ESLint kuralım. global olarak.
Kod:
[COLOR="white"]npm install eslint -g[/COLOR]index.js dosyası oluşturdum ben bunun içinde kodlarım olacak bunları kontrol edeceğim. Şimdi ise ESLint kurallarımızı oluşturmaya geldi sıra.
Kod:
[COLOR="white"]eslint --init[/COLOR]Diyerek kuralları oluşturmaya başlayacağız. Size birkaç soru soracak o sorulardan sonra artık eslint hazırdır. Şimdi sorulara bakalım.
1) How would you like to configure ESLint? (ESLint nasıl yapılandırmak istersiniz ben kendim yapılandıracağım için 2. şıkkı seçtim isterseniz google airbnb gibi ünlü firmaların kurallarını yapabilirsiniz.)
2) Which version of ECMAScript do you use? (ES6 sürümünü soruyor.)
3) Are you using ES6 modules? (ES6 modülü kullanacak mısınız diyor.)
4) Where will your code run? (Kodunuz nerede çalışır diyor node mu browser da mı?)
5) Do you use CommonJS? (Commonjs kullanacakmısınız diyor ben hayır dedim.)
6) Do you use JSX? (jsx kullanacakmısınız diyor react için eveti seçin. )
7) What style of indentation do you use? (Hangi girinti stilini kullanıyorsunuz diyor ben space kullanıyorum.)
7) What quotes do you use for strings? (Diziler için hangi tırnak kullanıyorsunuz diyor tek mi çift mi ben tek kullanıyorum.)
8) What line endings do you use? (Hangi satır sonlarını kullanıyorsunuz diyor ben unix kullanıyorum.)
9) Do you require semicolons? (Noktalı virgüllere ihtiyacınız varmı diyor ben var dedim.)
10) What format do you want your config file to be in? (Config dosyanız hangi formatta kayıt edilsin diyor ben json seçtim.)
Ben bu şekilde cevap verdim sizde kendinize göre seçeceksiniz. Şimdi gelelim package.json dosyamıza bir nevi kısayol olarak ayarlamaya ESLnit hızlıca çalıştırmak için.
Kod:
[COLOR="white"]"eslint": "eslint .",
"eslint:fix": "eslint . --fix"[/COLOR]eslint . bulunduğu klasördeki tüm dosyaları tarar ve hata kurala uymayanları tespit edip size bildirir. eslint . --fix ise bulunduğun klasörde ESLint tarafından fixlenebilen hatalar ise boşluklar girintiler noktalı virgül gibi bunları çözmeye yarıyor.
ESLint çalıştırmak için:
Kod:
[COLOR="white"]npm run eslint[/COLOR]ESLint hataları fixlemek için(Fixlenebilecek hataları fixlemek):
Kod:
[COLOR="white"]npm run eslint:fix[/COLOR]Yazarak fixleyebilirsiniz.
Bakın birkaç hata yaptım ve bunları gösteriyor satırı satırına. ESLint hakkında birsürü kural ve ayarlanacak şey bulabilirsiniz internetten ben sadece basit olarak ESLint girişi anlattım. Mesela şu kodum bu kurala dahil olmasın şu klasör bu kurala dahil olmasın gibi bunları ihtiyacınız oldukça internetten bulabilirsiniz. Bu konuda anlatmak istemedim hem konu uzamasın hemde okuyanlar sıkılmasın diye sağlıcakla kalın.
