Visual Studio Code ve React Uygulamalarında Eslint ve Prettier Kullanımı

Bu yazımda yazılım dünyasında sürekli kullanılan ve yazdığınız kodu düzenleyip belirli kurallar oluşturmanızı sağlayan Eslint ve Prettier araçlarından bahsedeceğim.

Özellikle javascript dünyasında önemli bir yer kaplayan bu iki araç kodunuzun daha düzenli ve anlaşılır olmasına olanak sağlar. İlk önce Eslint ve Prettier nedir ona bakalım.

Eslint : ECMAScript/JavaScript kodunuzu statik olarak analiz ederek kodunuzdaki problemleri bulmayı sağlayan bir araçtır. Temel çalışma mantığı belirlenen kurallar doğrultusunda kodunuzdaki hataları bulur ve size geri bildirim yapar.

Prettier : kod biçimlendirici veya şekillendirici olarak geçer, prettier kullanarak kodunuzun style’daki sorunları gidermiş olursunuz. Size kodlama yaparken zaman kazandırır.

Konuyu daha iyi anlamak için Eslink ve Prettier’i bir React app’inde ve Visiual Studio Code ortamımda kullanalım.

İlk olarak Visual Studio Code ortamında Eslint ve Prettier uzantılarını indirelim.

Daha sonra bu iki aracın Visiual Studio Code’da çalışabilmesi için birkaç ayar yapmamız gerekiyor.

Windows/Linux — File > Preferences > Settings.

macOS — Code > Preferences > Settings.

Ayarlar Kısmındaki arama bölümüne “format” yazalım ve “Editor:format On Save” kutucuğunu işaretleyelim. Yine aynı bölümden “Editor:Default Formatter” kısmını “Prettier-Code formatter (esbenp.prettier-vscode)” yapalım. Bu sayede kodumuzu kaydettiğimiz her anda prettier eklentisi çalışmış olacak ve kodumuzun düzenli hale gelmesini sağlayacak.

Şimdi bir React app’i oluşturalım.

npx create-react-app myapp

Şimdi app.js dosyasını html kodlarını düzensiz hale getirelim.

Yaptığımız değiklikleri kaydettiğimiz an prettier dosyalarımız üstünde çalışacak ve kendi default kurallarına göre kodumuzu düzenlemiş olacak.

Şimdi custom bir prettier dosyası oluşturup default birkaç değeri değiştirelim.

Kök dizinde .prettierrc adında bir dosya oluşturalım, bu dosyayı json formatında yazacağız. Daha sonra dosyamızın içinde şu değerleri girelim.

{
  “tabWidth”: 4,
  “singleQuote”: true
}

Şimdi App.js dosyasına gidip bir kaydetme işlemi yaptığımızda karşımıza şu düzende bir dosya çıkmış olacak.

Yaptığımız değişiklikte kodumuzda tabWidth 4 yaparak girinti düzeyi başına 2 olan boşluk sayısını 4 olarak ayarladık ve singleQuote:true ile de kodumuzda stringler çift tırnak yerine tek tırnak kullanılmasını sağladık. Yapılan değişiklikleri import kısmına bakarak görebilirsiniz. Prettier kullandıkça kodunuzun temiz ve düzenli bir şekilde yazıldığını göreceksiniz, zaman ve efordan tasarruf edeceksiniz. Prettier dosyasına daha fazla seçeneği eklemek için şu linke bakabilirsiniz.

Şimdi ise kodumuzu belli kurallara göre yazmamızı sağlayan eslint dosyası oluşturalım. Bunun için Eslint Cli’nı kullacağız. Bu tool size belli sorular sorarak bir custom .eslintrc dosyası oluşturmanızı sağlıyor. Şimdi terminale şu ifadeyi yazalım.

npx eslint --init

How would you like to use ESLint? …
To check syntax only
❯ To check syntax and find problems
To check syntax, find problems, and enforce code style

What type of modules does your project use? …
❯ JavaScript modules (import/export)
CommonJS (require/exports)
None of these

Which framework does your project use? …
❯ React
Vue.js
None of these

Does your project use TypeScript? › No / Yes

Where does your code run?
❯ Browser
Node

What format do you want your config file to be in? …
JavaScript
YAML
❯ JSON

Would you like to install them now with npm? No / Yes

Sorulara yukarıdaki gibi cevap verdiğimizde kök dizinizmizde .eslintrc.json adında bir dosya oluşacak.

{
"env": {  
 
  "browser": true,
  "es2021": true
},
"extends": [
  "eslint:recommended",
  "plugin:react/recommended"
],
"parserOptions": {
  "ecmaFeatures": {
  "jsx": true
},
  "ecmaVersion": 12,
  "sourceType": "module"
},
"plugins": [
  "react"
],
"rules": {
}
}

Environments (env) : Bir ortam, önceden tanımlanmış global değişkenler sağlar.

Extends : Standart kuralları kullanmak veya kendinizin bütün kuralları belirlemesi yerine kural setinizi başka setlerden extend edebilirsiniz. Buna örnek eklentiler airbnb ve react-app paketidir.

Globals: (parserOptions) ESLint, desteklemek istediğiniz JavaScript dil seçeneklerini belirlemenize olanak tanır. Varsayılan olarak ESLint, ECMAScript 5 sözdizimini bekler. Ayrıştırıcı seçeneklerini kullanarak JSX’in yanı sıra diğer ECMAScript sürümleri için desteği etkinleştirebilirsiniz.

Plugins : ESLint, üçüncü taraf eklentilerin kullanımını destekler. Eklentileri bir yapılandırma dosyasının içinde yapılandırmak için, eklenti adlarının bir listesini içeren plugin anahtarı kullanılır.

Rules : ESLint çok sayıda yerleşik kuralla birlikte gelir ve eklentiler aracılığıyla daha fazla kural ekleyebilirsiniz. Projenizin hangi kuralları kullanacağını bu bölümden ayarlayabilirsiniz. Kuralların ayarları yapılırken şu değişkenleri kullanmamız gerekiyor.

"off” veya 0 : kuralı kapatır

“warn” veya 1 : kuralı uyarı olarak gösterir ( kodu etkilemez )

“error” veya 2 : kurala uyulmayan bir kod varsa hata raporu gösterir.

Şimdi react app’imizi ayağa kaldırdığımız (npm start) terminalde şu hataları göreceğiz.

• eğer npm start komutunu çalıştırmada hata alırsanız eslintin 7.11.0 paketini indirebilirsiniz. npm i -D eslint@7.11.0

src/App.js
  Line 6:5: ‘React’ must be in scope when using JSX react/react-in-jsx-scope
  Line 7:7: ‘React’ must be in scope when using JSX react/react-in-jsx-scope
  Line 8:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope
  Line 9:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope
  Line 10:16: ‘React’ must be in scope when using JSX react/react-in-jsx-scope
  Line 12:9: ‘React’ must be in scope when using JSX react/react-in-jsx-scope

Bunun sebebi default olarak create-react-app ile oluşturduğumuz app’lerde React ‘ı import etmesine gerek kalmadan uygulamayı hatasız ayağa kaldırabiliyoruz. Fakat .eslintrc dosyasında extend ettiğimiz yapılarda React’ın javascript dosyalarında import edilmesi gerektiğini içeren kurallar bulunuyor. Bu kuralları kendimiz .eslintrc de rules anahtarından değiştirebiliriz.

"rules": {
  "react/react-in-jsx-scope": "off"
}

Rules kısımını yukarıdaki gibi değiştirdiğimizde ve tekrar uygulamayı ayağa kaldırdığımızda sorun ortadan kalkacaktır. Gördüğünüz gibi eğer kodunuz .eslintrc.json dosyasında bulunan kurallara uymaz ise hata verecektir.

Şimdi ise eslinte popüler bir eklenti olan .eslint-config-airbnb paketini entegre edelim. Bunun için komut satırına şu ifadeyi yazıp çalıştıralım.

npx install-peerdeps -D eslint-config-airbnb

Bu ifadeyle gerekli tüm paketleri indirmiş olacağız. Daha sonra airbnb eklentisini kullanmak için .eslintrc.json dosyasındaki extends anahtarına airbnb yi eklicez.

"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"]

Daha sonra tekrar npm start ile uygulamamızı ayağa kaldırdığımızda aşağıdaki gibi hatalar alacağız.

Line 6:5:JSX not allowed in files with extension '.js'                react/jsx-filename-extension
  Line 10:16:  `code` must be placed on a new line                          react/jsx-one-expression-per-line
  Line 10:39:  ` and save to reload.        ` must be placed on a new line  react/jsx-one-expression-per-line

src/index.js
  Line 8:3:    JSX not allowed in files with extension '.js'  react/jsx-filename-extension
  Line 11:34:  Missing trailing comma     comma-dangle

src/reportWebVitals.js
  Line 1:25:  Expected parentheses around arrow function argument  arrow-parens
  Line 3:32:  Expected a line break after this opening brace       object-curly-newline
  Line 3:74:  Expected a line break before this closing brace      object-curly-newline

Yine javascript dosyalarımızın içinde kurallara uymayan kodlar bulunuyor. Örnek olarak ‘.js’ uzantılı dosyalarda JSX’e izin verilmez die bir hata alıyoruz. Bu durumu rules kısmına bazı kurallar ekleyerek giderebiliriz.

"rules": {
  "react/react-in-jsx-scope": "off",
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
  "object-curly-newline": ["error", { "multiline": true }],
  "comma-dangle": "off",
  "arrow-parens": "off"
}

Bu kısmı da değiştirdikten sonra dosyamızın son hali şu şekilde olacak.

{
"env": {
  "browser": true,
  "es2021": true
},
"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"],
"parserOptions": {
  "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": 12,
  "sourceType": "module"
},
"plugins": ["react"],
"rules": {
  "react/react-in-jsx-scope": "off",
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
 "object-curly-newline": ["error", { "multiline": true }],
 "arrow-parens": "off"
 }
}

• Yukarıdaki koddaki tüm kuralları off yapmadan da prettierrc dosyasına belirli kurallar koyarak kodumuzdaki hataları giderebiliriz.

Örnek olarak rules kısmındaki comma-dangle kurallarını silip, .prettierrc dosyasına trailingComma:”all” ifadesini ekleyebiliriz. Bu şekilde dosyalarımızı kaydettiğimizde comma-dangle sorunu çözülmüş olacaktır. Dosyalarımız son hali aşağıdaki gibi olacaktır.

.eslintrc.json

{
"env": {
  "browser": true,
  "es2021": true
},
"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks"],
"parserOptions": {
  "ecmaFeatures": {
    "jsx": true
  },
  "ecmaVersion": 12,
  "sourceType": "module"
},
"plugins": ["react"],
"rules": {
  "react/react-in-jsx-scope": "off",
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
  "object-curly-newline": ["error", { "multiline": true }],
  "no-console": [0]
}
}

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2
}

Gördüğümüz gibi eslint ve prettier birbirleriyle senkronize çalışabiliyor. Eslint ve prettier kullanarak kodumuzun daha düzenli ve belli kurallara göre yazılmasını sağlayabilirsiniz.

Daha fazla bilgi için Eslint ve Prettier siteleriniz ziyaret edebiliriz.