Linting ve biçimlendirme yoluyla frontend kod kalitesini artırın. Kod stili uygulamasını otomatikleştirmeyi ve geliştirme ekibiniz genelinde tutarlı, sürdürülebilir kod sağlamayı öğrenin.
Frontend Kod Kalitesi: Tutarlı Geliştirme için Linting ve Biçimlendirme
Frontend geliştirmenin hızlı dünyasında, işlevsel kodu hızlı bir şekilde sunmak genellikle önceliklendirilir. Ancak, kod kalitesini ihmal etmek, ilerleyen zamanlarda birçok soruna yol açabilir. Bu sorunlar arasında artan bakım maliyetleri, azalan ekip üretkenliği ve sinir bozucu bir geliştirici deneyimi yer alır. Yüksek kaliteli frontend kodunun temel taşı, tutarlı stil ve en iyi uygulamalara bağlılıktır; bu da linting ve biçimlendirme araçları aracılığıyla etkili bir şekilde elde edilebilir. Bu makale, frontend projelerinizde linting ve biçimlendirmeyi anlamak ve uygulamak için kapsamlı bir kılavuz sunarak, küresel olarak dağıtılmış ekipler arasında tutarlı ve sürdürülebilir bir kod tabanı sağlar.
Frontend Kod Kalitesi Neden Önemli?
Linting ve biçimlendirmenin özelliklerine dalmadan önce, frontend kod kalitesinin neden bu kadar önemli olduğunu inceleyelim:
- Sürdürülebilirlik: Temiz, iyi biçimlendirilmiş kodun anlaşılması ve değiştirilmesi daha kolaydır, bu da bakımı kolaylaştırır ve güncellemeler sırasında hataların ortaya çıkma riskini azaltır. Hindistan'ın Bangalore kentindeki bir geliştiricinin, İngiltere'nin Londra kentindeki bir meslektaşı tarafından yazılan kodu kolayca anladığını hayal edin.
- Okunabilirlik: Tutarlı kodlama stili, okunabilirliği artırır ve geliştiricilerin kodun mantığını ve amacını hızlı bir şekilde anlamasını kolaylaştırır. Bu, özellikle yeni ekip üyelerini işe alırken veya farklı saat dilimleri ve kıtalarda projelerde işbirliği yaparken önemlidir.
- İşbirliği: Standartlaştırılmış kod stili, biçimlendirme tercihleri hakkındaki subjektif tartışmaları ortadan kaldırır ve geliştirme ekipleri içinde daha sorunsuz bir işbirliğini teşvik eder. Bu, yüz yüze iletişimin sınırlı olabileceği dağıtılmış ekipler için çok önemlidir.
- Azaltılmış Hatalar: Linter'lar, çalışma zamanından önce potansiyel hataları ve anti-pattern'leri belirleyebilir, hataları önleyebilir ve uygulamanın genel kararlılığını artırabilir. Basit bir sözdizimi hatasını erken yakalamak, saatlerce süren hata ayıklama süresinden tasarruf sağlayabilir.
- Geliştirilmiş Performans: Her zaman doğrudan ilişkili olmasa da, kod kalitesi uygulamaları genellikle daha verimli ve optimize edilmiş kod yazmayı teşvik eder ve bu da uygulama performansının artmasına yol açar.
- İşe Alım Verimliliği: Yeni ekip üyeleri, tutarlı bir stil uygulanıyorsa, kod tabanına hızla uyum sağlayabilir. Bu, öğrenme eğrisini azaltır ve daha erken etkili bir şekilde katkıda bulunmalarını sağlar.
- Bilgi Paylaşımı: Standartlaştırılmış kod, projeler ve ekipler arasında kod parçacıklarının ve kütüphanelerin daha iyi paylaşılmasını sağlar.
Linting ve Biçimlendirme Nedir?
Linting ve biçimlendirme, kod kalitesine katkıda bulunan iki ayrı ancak birbirini tamamlayan süreçtir:
Linting
Linting, kodu potansiyel hatalar, stil ihlalleri ve şüpheli yapılar açısından analiz etme işlemidir. Linter'lar, belirlenmiş en iyi uygulamalardan ve kodlama kurallarından sapmaları belirlemek için önceden tanımlanmış kurallar kullanır. Aşağıdakiler dahil olmak üzere çok çeşitli sorunları tespit edebilirler:
- Sözdizimi hataları
- Bildirilmemiş değişkenler
- Kullanılmayan değişkenler
- Potansiyel güvenlik açıkları
- Stil ihlalleri (örneğin, tutarsız girinti, adlandırma kuralları)
- Kod karmaşıklığı sorunları
Popüler frontend linter'ları şunlardır:
- ESLint: JavaScript ve JSX için yaygın olarak kullanılan, kapsamlı özelleştirme ve eklenti desteği sunan bir linter. Son derece yapılandırılabilir ve çeşitli kodlama stillerine uyarlanabilir.
- Stylelint: CSS, SCSS ve diğer stil dilleri için güçlü bir linter, tutarlı stil ve en iyi uygulamalara bağlılık sağlar.
- HTMLHint: HTML için bir linter, yapısal sorunları ve erişilebilirlik sorunlarını belirlemeye yardımcı olur.
Biçimlendirme
Biçimlendirme, kod güzelleştirme olarak da bilinir, kodun düzenini ve stilini önceden tanımlanmış bir standarda uyacak şekilde otomatik olarak ayarlama işlemidir. Biçimlendiriciler aşağıdaki gibi konuları ele alır:
- Girinti
- Satır aralığı
- Satır kaydırma
- Tırnak stilleri
- Noktalı virgül kullanımı
Popüler bir frontend biçimlendiricisi şudur:
- Prettier: JavaScript, TypeScript, CSS, HTML ve JSON dahil olmak üzere çok çeşitli dilleri destekleyen, fikir sahibi bir kod biçimlendiricisidir. Prettier, kodunuzu önceden tanımlanmış stiline uyması için otomatik olarak yeniden biçimlendirerek, subjektif biçimlendirme tartışmalarını ortadan kaldırır.
Bir Frontend Projesi için ESLint ve Prettier'ı Kurma
Tipik bir frontend projesinde ESLint ve Prettier'ı kurma sürecinde adım adım ilerleyelim. Bir JavaScript/React projesine odaklanacağız, ancak ilkeler diğer çerçeveler ve diller için de geçerlidir.
Ön Koşullar
- Node.js ve npm (veya yarn) kurulu
- Bir frontend projesi (örneğin, bir React uygulaması)
Kurulum
İlk olarak, ESLint, Prettier ve gerekli eklentileri geliştirme bağımlılıkları olarak yükleyin:
npm install eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier --save-dev
Paketlerin açıklaması:
- eslint: Çekirdek ESLint kütüphanesi.
- prettier: Prettier kod biçimlendiricisi.
- eslint-plugin-react: React geliştirmesine özgü ESLint kuralları.
- eslint-plugin-react-hooks: React Hooks en iyi uygulamalarını zorlamak için ESLint kuralları.
- eslint-config-prettier: Prettier ile çakışan ESLint kurallarını devre dışı bırakır.
Yapılandırma
Projenizin kökünde bir ESLint yapılandırma dosyası (.eslintrc.js veya .eslintrc.json) oluşturun. İşte örnek bir yapılandırma:
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'prettier',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
'react/react-in-jsx-scope': 'off',
},
};
Bu yapılandırmanın temel yönleri:
env: Kodun çalışacağı ortamı tanımlar (tarayıcı, Node.js, ES2021).extends: Devralınacak önceden tanımlanmış yapılandırmalar kümesini belirtir.eslint:recommended: Önerilen bir ESLint kuralları kümesini etkinleştirir.plugin:react/recommended: React için önerilen ESLint kurallarını etkinleştirir.plugin:react-hooks/recommended: React Hooks için önerilen ESLint kurallarını etkinleştirir.prettier: Prettier ile çakışan ESLint kurallarını devre dışı bırakır.parserOptions: ESLint tarafından kullanılan JavaScript ayrıştırıcısını yapılandırır.plugins: Kullanılacak eklentilerin listesini belirtir.rules: Bireysel ESLint kurallarını özelleştirmenize olanak tanır. Bu örnekte, modern React projeleri her bileşen dosyasında React'i içe aktarmayı gerektirmediğinden, `react/react-in-jsx-scope` kuralını devre dışı bırakıyoruz.
Projenizin kökünde bir Prettier yapılandırma dosyası (.prettierrc.js, .prettierrc.json veya .prettierrc.yaml) oluşturun. İşte örnek bir yapılandırma:
module.exports = {
semi: false,
trailingComma: 'all',
singleQuote: true,
printWidth: 120,
tabWidth: 2,
};
Bu yapılandırma aşağıdaki Prettier seçeneklerini belirtir:
semi: İfadelerin sonuna noktalı virgül eklenip eklenmeyeceği (falsenoktalı virgül yok anlamına gelir).trailingComma: Çok satırlı nesnelerde ve dizilerde sondaki virgüllerin eklenip eklenmeyeceği (allmümkün olan yerlerde ekler).singleQuote: Dizeler için çift tırnak yerine tek tırnak kullanılıp kullanılmayacağı.printWidth: Prettier'ın kodu kaydırmadan önceki maksimum satır uzunluğu.tabWidth: Girinti için kullanılacak boşluk sayısı.
Tercih ettiğiniz kodlama stiline uyacak şekilde bu seçenekleri özelleştirebilirsiniz. Kullanılabilir seçeneklerin tam listesi için Prettier belgelerine bakın.
IDE'nizle entegre etme
ESLint ve Prettier'dan en iyi şekilde yararlanmak için bunları IDE'nizle entegre edin. Çoğu popüler IDE (örneğin, VS Code, WebStorm, Sublime Text), yazdıkça gerçek zamanlı linting ve biçimlendirme sağlayan uzantılara veya eklentilere sahiptir. Örneğin, VS Code, kaydettiğinizde kodunuzu otomatik olarak biçimlendirebilen ESLint ve Prettier için uzantılar sunar. Bu, kod kalitesini otomatikleştirmenin önemli bir adımıdır.
npm komut dosyaları ekleme
ESLint ve Prettier'ı komut satırından kolayca çalıştırmak için package.json dosyanıza npm komut dosyaları ekleyin:
"scripts": {
"lint": "eslint . --ext .js,.jsx",
"format": "prettier --write .",
"lint:fix": "eslint . --ext .js,.jsx --fix",
"format:check": "prettier --check ."
}
Komut dosyalarının açıklaması:
lint: Projedeki tüm.jsve.jsxdosyalarında ESLint'i çalıştırır.format: Projedeki tüm dosyaları biçimlendirmek için Prettier'ı çalıştırır. `--write` işareti, Prettier'a dosyaları doğrudan değiştirmesini söyler.lint:fix: Düzeltilebilir linting hatalarını otomatik olarak düzelten `--fix` işaretiyle ESLint'i çalıştırır.format:check: Tüm dosyaların yapılandırmaya göre biçimlendirilip biçimlendirilmediğini kontrol etmek için Prettier'ı çalıştırır. Bu, CI/CD ardışık düzenleri için kullanışlıdır.
Artık bu komut dosyalarını komut satırından çalıştırabilirsiniz:
npm run lint
npm run format
npm run lint:fix
npm run format:check
Dosyaları yoksayma
Belirli dosyaları veya dizinleri linting ve biçimlendirmeden hariç tutmak isteyebilirsiniz (örneğin, node_modules, build dizinleri). Bu hariç tutmaları belirtmek için projenizin kökünde .eslintignore ve .prettierignore dosyaları oluşturun. Örneğin:
.eslintignore:
node_modules/
dist/
build/
.prettierignore:
node_modules/
dist/
build/
CI/CD ile Kod Kalitesini Otomatikleştirme
Tüm geliştirme ekibinizde tutarlı kod kalitesi sağlamak için linting ve biçimlendirmeyi CI/CD ardışık düzeninize entegre edin. Bu, kodunuzu ana dala birleştirilmeden önce stil ihlalleri ve potansiyel hatalar açısından otomatik olarak kontrol edecektir.
İşte ESLint ve Prettier'ı bir GitHub Actions iş akışına nasıl entegre edeceğinize dair bir örnek:
name: CI
on:
push:
branches: [ main ]
pull_request:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js 16
uses: actions/setup-node@v3
with:
node-version: 16
- name: Install dependencies
run: npm install
- name: Run linters
run: npm run lint
- name: Run format check
run: npm run format:check
Bu iş akışı aşağıdaki adımları gerçekleştirir:
- Kodu kontrol eder.
- Node.js'yi kurar.
- Bağımlılıkları yükler.
- ESLint'i çalıştırır.
- Prettier'ı kontrol modunda çalıştırır.
ESLint veya Prettier herhangi bir hata algılarsa, iş akışı başarısız olur ve kodun birleştirilmesi engellenir.
Linting ve Biçimlendirme için En İyi Uygulamalar
Linting ve biçimlendirme uygularken izlenecek bazı en iyi uygulamalar şunlardır:
- Tutarlı bir kodlama stili oluşturun: Projeniz için net ve tutarlı bir kodlama stili kılavuzu tanımlayın. Bu, girinti, satır aralığı, adlandırma kuralları ve açıklama uygulamaları gibi konuları kapsamalıdır. Başlangıç noktası olarak Airbnb'nin JavaScript Stil Kılavuzu gibi yaygın olarak benimsenmiş bir stil kılavuzu kullanmayı düşünün.
- Süreci otomatikleştirin: Linting ve biçimlendirmeyi geliştirme iş akışınıza ve CI/CD ardışık düzeninize entegre edin. Bu, tüm kodun belirlenmiş stil kurallarına uymasını sağlayacaktır.
- Kuralları özelleştirin: ESLint ve Prettier kurallarını projenizin özel gereksinimlerine ve tercihlerine uyacak şekilde ayarlayın. Alakalı olmayan veya kodlama stilinizle çakışan kuralları devre dışı bırakmaktan çekinmeyin.
- Editör Entegrasyonunu Kullanın: Gerçek zamanlı geri bildirim için linter'ları ve biçimlendiricileri doğrudan IDE'nize entegre edin. Bu, hataları erken yakalamaya ve stili tutarlı bir şekilde uygulamaya yardımcı olur.
- Ekibi eğitin: Tüm ekip üyelerinin linting ve biçimlendirme kurallarının farkında olduğundan ve araçları nasıl kullanacaklarını anladığından emin olun. Gerekli eğitimleri ve belgeleri sağlayın.
- Yapılandırmayı düzenli olarak gözden geçirin: ESLint ve Prettier yapılandırmalarınızı hala alakalı ve etkili olduklarından emin olmak için periyodik olarak gözden geçirin. Projeniz geliştikçe, yeni en iyi uygulamaları veya kodlama kurallarını yansıtmak için kuralları ayarlamanız gerekebilir.
- Varsayılanlarla başlayın ve yavaş yavaş özelleştirin: ESLint ve Prettier için önerilen veya varsayılan yapılandırmalarla başlayın. Kuralları ve ayarları ekibinizin tercihlerine ve proje gereksinimlerine uyacak şekilde yavaş yavaş özelleştirin.
- Erişilebilirliği göz önünde bulundurun: Geliştirme sürecinin başlarında yaygın erişilebilirlik sorunlarını yakalamak için erişilebilirlik linting kurallarını dahil edin. Bu, uygulamanızın engelli kişiler tarafından kullanılabilir olmasını sağlamaya yardımcı olur.
- Commit kancaları kullanın: Commit kancalarını kullanarak linting ve biçimlendirmeyi Git iş akışınıza entegre edin. Bu, her commit'ten önce kodunuzu otomatik olarak kontrol edecek ve stil kurallarını ihlal eden kodu commit etmenizi engelleyecektir. Husky ve lint-staged gibi kütüphaneler bu süreci otomatikleştirmeye yardımcı olabilir.
- Teknik borcu artımlı olarak ele alın: Mevcut bir projeye linting ve biçimlendirme eklerken, teknik borcu artımlı olarak ele alın. Önce yeni koda odaklanın ve mevcut kodu stil kurallarına uyması için yavaş yavaş yeniden düzenleyin.
Zorluklar ve Dikkat Edilmesi Gerekenler
Linting ve biçimlendirme önemli faydalar sunarken, akılda tutulması gereken bazı zorluklar ve hususlar da vardır:
- İlk kurulum ve yapılandırma: ESLint ve Prettier'ı kurmak, özellikle karmaşık projeler için zaman alıcı olabilir. Özel ihtiyaçlarınızı karşılamak için dikkatli yapılandırma ve özelleştirme gerektirir.
- Öğrenme eğrisi: Geliştiricilerin yeni araçlar ve kodlama kuralları öğrenmesi gerekebilir, bu da zaman ve çaba gerektirebilir.
- Potansiyel çakışmalar: ESLint ve Prettier bazen birbiriyle çakışabilir ve beklenmedik davranışlardan kaçınmak için dikkatli yapılandırma gerektirir.
- Uygulama: Özellikle küresel olarak dağıtılmış ortamlarda, linting ve biçimlendirme kurallarını büyük bir geliştirme ekibinde tutarlı bir şekilde uygulamak zor olabilir. Açık iletişim, eğitim ve otomatik kontroller esastır.
- Aşırı özelleştirme: Katı ve esnek olmayan bir kodlama stiline yol açabilecek kuralları aşırı özelleştirmekten kaçının. Mümkün olduğunda yaygın olarak kabul görmüş en iyi uygulamalara ve kodlama kurallarına bağlı kalın.
- Performans etkisi: Linting ve biçimlendirme, özellikle büyük projelerde hafif bir performans etkisine sahip olabilir. Bu etkiyi en aza indirmek için yapılandırmanızı ve iş akışınızı optimize edin.
Sonuç
Linting ve biçimlendirme, özellikle küresel olarak dağıtılmış ekiplerle çalışırken, yüksek kaliteli frontend kodunu korumak için temel uygulamalardır. Kod stili uygulamasını otomatikleştirerek ve potansiyel hataları erken belirleyerek, kodun okunabilirliğini, sürdürülebilirliğini ve işbirliğini artırabilirsiniz. Dikkat edilmesi gereken bazı zorluklar olsa da, linting ve biçimlendirmenin faydaları dezavantajlarından çok daha ağır basar. Bu makalede özetlenen en iyi uygulamaları izleyerek, ekip üyelerinizin nerede bulunduğuna bakılmaksızın, tutarlı bir kodlama stili oluşturabilir, hataları azaltabilir ve frontend uygulamalarınızın genel kalitesini artırabilirsiniz.
Kod kalitesine yatırım yapmak, projenizin uzun vadeli başarısına ve geliştirme ekibinizin üretkenliğine yapılan bir yatırımdır. Geliştirme iş akışınızın bir parçası olarak linting ve biçimlendirmeyi benimseyin ve daha temiz, daha sürdürülebilir bir kod tabanının faydalarını elde edin.