Visual Studio Code ve ESLint ile Kaydetmede Linting’i Etkinleştirme Rehberi
Modern web geliştirme süreçlerinde kod kalitesi, tutarlılık ve hata tespiti, projelerin sürdürülebilirliği ve ekip çalışmasının verimliliği açısından hayati öneme sahiptir. Bu hedeflere ulaşmanın en etkili yollarından biri de “linting” kullanmaktır. Linting, kodunuzdaki potansiyel hataları, stil ihlallerini ve şüpheli yapıları statik analiz yoluyla otomatik olarak tespit eden bir süreçtir. Bu makalede, Visual Studio Code (VS Code) ortamında ESLint kullanarak kodunuzu her kaydettiğinizde otomatik olarak linting’i nasıl etkinleştireceğinizi adım adım, kapsamlı bir şekilde inceleyeceğiz. Bu sayede, geliştirme akışınızda anında geri bildirim alarak çok daha temiz, tutarlı ve hatasız kodlar yazabileceksiniz.
Linting Nedir ve Neden Önemlidir?
Linting, yazılım geliştirme sürecinde kodunuzu belirli kurallar setine göre analiz eden ve bu kurallara uymayan durumları (hatalar, uyarılar, stil ihlalleri) raporlayan bir araç veya süreçtir. Bu araçlar, kodun çalışma zamanında ortaya çıkabilecek sorunları, daha kod derlenmeden veya çalıştırılmadan önce tespit etmeye yardımcı olur.
Linting’in temel faydaları şunlardır:
* Hata Önleme: Sözdizimi hataları, kullanılmayan değişkenler, potansiyel null referanslar gibi yaygın programlama hatalarını erkenden yakalar.
* Kod Tutarlılığı: Tüm ekip üyelerinin aynı kodlama stilini ve standartlarını benimsemesini sağlar, bu da kod tabanının okunabilirliğini ve bakımını kolaylaştırır.
* Kod Kalitesi: Karmaşık veya kötü tasarlanmış kod yapılarını belirterek daha iyi kod yazımına teşvik eder.
* Öğrenme ve Gelişim: Özellikle yeni başlayanlar için, iyi pratikleri ve dilin inceliklerini öğrenmeleri için değerli geri bildirimler sunar.
* Refactoring Kolaylığı: Tutarlı bir kod tabanı, gelecekteki değişiklikleri ve yeniden yapılandırmaları daha az riskli hale getirir.
ESLint, özellikle JavaScript ve TypeScript projeleri için en popüler ve güçlü linting aracıdır. Son derece yapılandırılabilir olması sayesinde, neredeyse her türlü proje gereksinimine ve kodlama stiline uyarlanabilir.
Temel Kavramlar ve Ön Gereksinimler
Bu rehbere başlamadan önce, sisteminizde bazı temel araçların kurulu olması gerekmektedir.
Node.js ve npm/Yarn Kurulumu
ESLint, Node.js tabanlı bir araçtır ve npm (Node Package Manager) veya Yarn aracılığıyla yönetilir. Eğer sisteminizde Node.js kurulu değilse, resmi web sitesinden (nodejs.org) indirip kurmanız gerekmektedir. Kurulum ile birlikte npm de otomatik olarak yüklenecektir. Kurulumu kontrol etmek için terminalinizde şu komutları çalıştırabilirsiniz:
node -v
npm -vEğer bu komutlar versiyon numaralarını döndürüyorsa, Node.js ve npm başarıyla kurulmuş demektir.
Visual Studio Code Kurulumu
Visual Studio Code, modern web geliştiricileri arasında en popüler kod düzenleyicilerinden biridir. Eğer kurulu değilse, code.visualstudio.com adresinden indirip kurmanız gerekmektedir.
Proje Klasörü Oluşturma ve Başlatma
Yeni bir proje için bir klasör oluşturun ve terminalinizde bu klasöre gidin. Ardından, bir package.json dosyası oluşturarak projeyi başlatın:
mkdir my-eslint-project
cd my-eslint-project
npm init -ynpm init -y komutu, varsayılan ayarları kullanarak hızlıca bir package.json dosyası oluşturur. Bu dosya, projenizin bağımlılıklarını ve betiklerini yöneteceğiniz yerdir.
ESLint Kurulumu ve Yapılandırması
Projenize ESLint’i entegre etmenin ilk adımı, onu bir geliştirme bağımlılığı olarak kurmaktır.
ESLint’i Projeye Ekleme
Terminalinizde proje klasörünüzdeyken aşağıdaki komutu çalıştırın:
npm install eslint --save-devBu komut, ESLint paketini indirir ve package.json dosyanızdaki devDependencies bölümüne ekler. --save-dev bayrağı, bu bağımlılığın yalnızca geliştirme aşamasında gerektiğini belirtir.
ESLint Yapılandırma Dosyası Oluşturma
ESLint’i kurduktan sonra, projeniz için bir yapılandırma dosyası oluşturmanız gerekir. Bu dosya, ESLint’in hangi kuralları uygulayacağını ve nasıl davranacağını belirler. ESLint, bu dosyayı oluşturmanız için interaktif bir komut sunar:
npx eslint --initnpx komutu, yerel olarak kurulu paketleri çalıştırmak için kullanılır. Bu komutu çalıştırdığınızda, ESLint size bir dizi soru soracaktır:
1. How would you like to use ESLint? (ESLint’i nasıl kullanmak istersiniz?)
* To check syntax, find problems, and enforce code style (Sözdizimini kontrol etmek, sorunları bulmak ve kod stilini uygulamak için) – Bu seçeneği tercih edin.
2. What type of modules does your project use? (Projeniz ne tür modüller kullanıyor?)
* JavaScript modules (import/export) (ESM)
* CommonJS (require/exports) (CJS)
* None of these
Projenizin modül yapısına göre uygun olanı seçin. Çoğu modern web projesi için JavaScript modules uygun olacaktır.
3. Which framework does your project use? (Projeniz hangi çatıyı kullanıyor?)
* React
* Vue.js
* None of these
Eğer React veya Vue kullanıyorsanız seçin, aksi takdirde None of these.
4. Does your project use TypeScript? (Projeniz TypeScript kullanıyor mu?)
* Yes veya No
Eğer TypeScript kullanıyorsanız Yes seçeneğini seçin. Bu, TypeScript için gerekli ESLint eklentilerini ve yapılandırmalarını otomatik olarak ekleyecektir.
5. Where does your code run? (Kodunuz nerede çalışıyor?)
* Browser
* Node
Hem tarayıcı hem de Node.js ortamlarında çalışan kodlar için her ikisini de seçebilirsiniz (boşluk tuşu ile seçim yapılır).
6. How would you like to define a style for your project? (Projeniz için bir stil nasıl tanımlamak istersiniz?)
* Use a popular style guide (Popüler bir stil rehberi kullan) – Bu genellikle en iyi başlangıç noktasıdır.
* Answer questions about your style (Stiliniz hakkında soruları yanıtla) – Daha özel bir yapılandırma için.
* Inspect your JavaScript file(s) (JavaScript dosyanızı/dosyalarınızı incele) – Mevcut kod tabanınıza göre öneriler almak için.
Use a popular style guide seçeneğini tercih edelim.
7. Which style guide do you want to follow? (Hangi stil rehberini takip etmek istersiniz?)
* Airbnb (Çok kapsamlı ve popüler)
* Standard (Daha az kuralcı)
* Google (Google’ın kendi stil rehberi)
Genellikle Airbnb veya Standard tercih edilir. Bu rehberler, sektördeki en iyi pratikleri yansıtan kapsamlı kural setleri sunar.
8. What format do you want your config file to be in? (Yapılandırma dosyanız hangi formatta olsun istersiniz?)
* JavaScript (.eslintrc.js)
* YAML (.eslintrc.yaml)
* JSON (.eslintrc.json)
.js formatı, yapılandırmada daha fazla esneklik sağlar (örneğin, dinamik değerler veya yorumlar ekleyebilirsiniz). .json veya .yaml ise daha statik ve okunabilirdir. Genellikle .js tercih edilir.
9. Son olarak, ESLint, seçtiğiniz stil rehberi ve diğer eklentiler için gerekli paketleri yüklemek isteyip istemediğinizi soracaktır. Yes seçeneğini seçerek bu paketlerin kurulmasını sağlayın.
Bu adımları tamamladığınızda, projenizin kök dizininde .eslintrc.js (veya seçtiğiniz formata göre .json, .yaml) adında bir dosya oluşacaktır. Bu dosya, projenizin ESLint yapılandırmasını içerir.
Örnek .eslintrc.js İçeriği
Airbnb stil rehberi, React ve Tarayıcı ortamı seçildiğinde oluşabilecek örnek bir .eslintrc.js dosyası şöyle görünebilir:
module.exports = {
env: {
browser: true,
es2021: true,
node: true, // Eğer Node.js ortamında da çalışıyorsa ekleyin
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'airbnb',
'airbnb/hooks', // React Hooks için
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12, // veya daha yeni bir versiyon (örneğin 2021)
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
// Kendi özel kurallarınızı buraya ekleyebilirsiniz.
// Örneğin, tek tırnak kullanmaya zorlamak:
// 'quotes': ['error', 'single'],
// Konsol log kullanımına izin vermek (varsayılan olarak Airbnb'de hata verir):
// 'no-console': 'off',
// props-types zorunluluğunu kapatmak (eğer TypeScript kullanıyorsanız veya gerek yoksa):
// 'react/prop-types': 'off',
// Fonksiyon isimlerinin zorunluluğunu kapatmak (Arrow fonksiyonlarında):
// 'func-names': 'off',
// JSX dosya uzantılarını zorunlu kılmak (Airbnb varsayılan olarak .jsx ister):
// 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
},
settings: {
react: {
version: 'detect', // React versiyonunu otomatik algıla
},
},
};* env: Kodunuzun hangi ortamda çalışacağını belirtir (tarayıcı, Node.js, ES2021 gibi global değişkenleri ve sözdizimini tanımlar).
* extends: Başka yapılandırmaları veya stil rehberlerini genişletmenizi sağlar. eslint:recommended, ESLint’in önerilen temel kurallarını içerir. plugin:react/recommended React için önerilen kuralları, airbnb ise Airbnb stil rehberini ekler.
* parserOptions: ESLint’in kodunuzu nasıl ayrıştıracağını belirtir (ECMAScript versiyonu, modül tipi, JSX desteği vb.).
* plugins: ESLint’e belirli teknolojiler veya çerçeveler (React, TypeScript vb.) için ek kurallar ve yetenekler kazandıran eklentileri yükler.
* rules: Varsayılan kuralları geçersiz kılabilir veya kendi özel kurallarınızı ekleyebilirsiniz. Her kural için off (kapat), warn (uyarı) veya error (hata) seviyeleri belirlenebilir.
* settings: Eklentiler için ek yapılandırmalar sağlar.
ESLint’i Manuel Çalıştırma
Yapılandırma tamamlandıktan sonra, ESLint’i manuel olarak bir dosya üzerinde çalıştırabilirsiniz. Örneğin, projenizin kök dizininde src/index.js adında bir dosya oluşturalım:
// src/index.js
import React from 'react';
const MyComponent = props => {
console.log(props);
return (
Hello, ESLint!
);
};
export default MyComponent;Bu dosyayı kaydettikten sonra terminalde şu komutu çalıştırın:
npx eslint src/index.jsEğer Airbnb stil rehberini kullandıysanız, no-console veya react/prop-types gibi kurallardan dolayı hatalar veya uyarılar görebilirsiniz. Bu, ESLint’in doğru çalıştığını gösterir.
Otomatik düzeltme özelliğini kullanmak için:
npx eslint src/index.js --fixBu komut, ESLint’in otomatik olarak düzeltebileceği sorunları (örneğin, tırnak işaretleri, boşluklar vb.) düzeltir.
Visual Studio Code Entegrasyonu
ESLint’i projenize kurduktan sonra, onu VS Code ile entegre etmek, geliştirme deneyiminizi önemli ölçüde iyileştirecektir.
ESLint Uzantısını Kurma
VS Code’da ESLint desteğini almak için resmi ESLint uzantısını kurmanız gerekir.
1. VS Code’u açın.
2. Sol taraftaki “Uzantılar” (Extensions) görünümüne tıklayın (Ctrl+Shift+X veya Cmd+Shift+X).
3. Arama çubuğuna “ESLint” yazın.
4. dbaeumer.vscode-eslint tarafından yayınlanan “ESLint” uzantısını bulun ve “Yükle” (Install) düğmesine tıklayın.
Bu uzantı, VS Code’un ESLint’i arka planda çalıştırmasına ve hataları/uyarıları doğrudan düzenleyici içinde göstermesine olanak tanır.
Kaydetmede Linting’i Etkinleştirme (Linting on Save)
Şimdi gelelim bu makalenin ana konusuna: kodunuzu her kaydettiğinizde ESLint’in otomatik olarak çalışmasını ve hatta sorunları düzeltmesini sağlamak. Bu, anında geri bildirim almanızı ve kodunuzu sürekli olarak temiz tutmanızı sağlar.
VS Code’da bu özelliği etkinleştirmek için, düzenleyici ayarlarına (settings.json) bazı yapılandırmalar eklememiz gerekiyor. Bu ayarları hem kullanıcı genelinde (tüm projeleriniz için) hem de çalışma alanı (workspace) bazında (sadece mevcut proje için) yapabilirsiniz. Çalışma alanı bazında yapılandırma, projenin diğer geliştiriciler tarafından da aynı ayarlarla kullanılmasını sağladığı için genellikle tercih edilir.
Çalışma Alanı Ayarları (.vscode/settings.json)
Projenizin kök dizininde .vscode adında bir klasör oluşturun (eğer yoksa). Bu klasörün içine settings.json adında bir dosya oluşturun:
my-eslint-project/
├── .vscode/
│ └── settings.json
├── node_modules/
├── src/
│ └── index.js
├── .eslintrc.js
├── package.jsonsettings.json dosyasına aşağıdaki yapılandırmayı ekleyin:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html", // Eğer HTML içinde script etiketleri lintlenecekse
"vue" // Eğer Vue.js kullanıyorsanız
],
"editor.formatOnSave": false // ESLint ile çakışmaları önlemek için
}Bu ayarların her birini açıklayalım:
* "editor.codeActionsOnSave": Bu ayar, bir dosya kaydedildiğinde VS Code’un hangi “kod eylemlerini” gerçekleştireceğini belirler.
* "source.fixAll.eslint": true: Bu, kaydedildiğinde ESLint’in otomatik olarak düzeltebileceği tüm sorunları (örneğin, boşluklar, tırnak işaretleri, noktalı virgüller vb.) düzeltmesini sağlar. Bu ayar, “fix on save” özelliğinin kalbidir.
* "eslint.validate": ESLint uzantısının hangi dil modlarında aktif olacağını belirler. Varsayılan olarak JavaScript ve JavaScript React için aktiftir, ancak TypeScript, HTML veya Vue gibi diğer diller için de etkinleştirebilirsiniz.
* "editor.formatOnSave": false: Bu ayar çok önemlidir. Eğer VS Code’un yerleşik biçimlendirme özelliğini veya başka bir biçimlendiriciyi (örneğin Prettier) formatOnSave ile kullanıyorsanız, ESLint’in otomatik düzeltme özelliğiyle çakışmalar yaşanabilir. ESLint’i biçimlendirme için de kullanıyorsanız veya Prettier ile entegre edecekseniz, editor.formatOnSave‘i devre dışı bırakmak en güvenli yoldur. Aksi takdirde, her kaydettiğinizde biçimlendirme ve linting arasında bir “ping-pong” etkisi yaşayabilirsiniz.
Bu ayarları kaydedin. Şimdi src/index.js dosyanızı açın, bilerek bir ESLint kuralını ihlal edin (örneğin, tek tırnak yerine çift tırnak kullanın veya gereksiz bir boşluk bırakın) ve dosyayı kaydedin (Ctrl+S veya Cmd+S). ESLint’in otomatik olarak bu sorunları düzeltmesi veya düzeltemediği hataları düzenleyici içinde (altı çizili veya sorunlar panelinde) göstermesi gerekir.
Kullanıcı Ayarları (settings.json)
Eğer bu ayarları tüm VS Code projeleriniz için varsayılan olarak etkinleştirmek isterseniz, VS Code ayarlarını açın (Ctrl+, veya Cmd+,) ve arama çubuğuna settings.json yazarak kullanıcı ayarları dosyanızı açın. Yukarıdaki JSON içeriğini bu dosyaya ekleyebilirsiniz. Ancak, çalışma alanı ayarları projenin taşınabilirliği ve ekip tutarlılığı için daha çok önerilir.
Yaygın ESLint Yapılandırmaları ve Eklentileri
ESLint’in gücü, genişletilebilir yapısından gelir. Farklı çerçeveler, diller ve araçlarla entegrasyon için birçok eklenti ve yapılandırma mevcuttur.
React Projeleri İçin
React projelerinde ESLint kullanırken, React’e özgü kuralları kontrol eden eklentilere ihtiyacınız olacaktır. npx eslint --init komutu genellikle bunları otomatik olarak kurar, ancak manuel olarak eklemeniz gerekirse:
npm install eslint-plugin-react eslint-plugin-react-hooks --save-dev.eslintrc.js dosyanızda extends ve plugins bölümlerine eklemeler yapmanız gerekir:
// .eslintrc.js
module.exports = {
// ... diğer ayarlar ...
extends: [
// ... diğer extendsler ...
'plugin:react/recommended',
'airbnb',
'airbnb/hooks', // React Hooks için
],
plugins: [
'react',
// ... diğer eklentiler ...
],
settings: {
react: {
version: 'detect', // React versiyonunu otomatik algıla
},
},
rules: {
// React özel kurallarını burada geçersiz kılabilirsiniz
// Örneğin, prop-types zorunluluğunu kapatmak:
// 'react/prop-types': 'off',
// JSX dosyaları için uzantıları belirlemek (Airbnb varsayılanı .jsx ister):
// 'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
}
};TypeScript Projeleri İçin
TypeScript ile çalışıyorsanız, ESLint’in TypeScript kodunu doğru bir şekilde ayrıştırması ve lintlemesi için özel bir ayrıştırıcı ve eklentiye ihtiyacınız olacaktır.
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev.eslintrc.js dosyanızda:
// .eslintrc.js
module.exports = {
// ... diğer ayarlar ...
parser: '@typescript-eslint/parser', // TypeScript ayrıştırıcısını kullan
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended', // TypeScript için önerilen kurallar
// Eğer React kullanıyorsanız:
// 'plugin:react/recommended',
// 'airbnb',
// 'airbnb-typescript', // Airbnb'nin TypeScript versiyonu
],
plugins: [
'@typescript-eslint',
// 'react', // Eğer React kullanıyorsanız
],
parserOptions: {
ecmaVersion: 2021,
sourceType: 'module',
project: './tsconfig.json', // TypeScript projenizin yapılandırma dosyasını belirtin
tsconfigRootDir: __dirname, // tsconfig.json dosyasının kök dizini
},
rules: {
// TypeScript özel kurallarını burada geçersiz kılabilirsiniz
// Örneğin, 'no-unused-vars' kuralı TypeScript için farklı davranabilir:
// 'no-unused-vars': 'off',
// '@typescript-eslint/no-unused-vars': ['error'],
},
settings: {
// Eğer React kullanıyorsanız:
// react: {
// version: 'detect',
// },
},
};parserOptions.project ve tsconfigRootDir ayarları, ESLint’in TypeScript projenizin tip bilgilerine erişmesini sağlar. Bu, daha gelişmiş tip tabanlı linting kuralları için gereklidir.
Prettier ile Entegrasyon
Prettier, kodunuzu belirli bir stil rehberine göre otomatik olarak biçimlendiren popüler bir araçtır. ESLint ise hem biçimlendirme hem de kod kalitesi kurallarını içerir. Bu iki aracı birlikte kullanmak istediğinizde, çakışmalar yaşanabilir: ESLint bir biçimlendirme kuralını ihlal ettiğinizde hata verirken, Prettier kendi stilini uygulamaya çalışabilir.
Bu çakışmaları çözmek için, ESLint’in biçimlendirme ile ilgili kurallarını devre dışı bırakıp, biçimlendirme görevini tamamen Prettier’e bırakmak en iyi yaklaşımdır.
1. Prettier’ı kurun:
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev * prettier: Prettier’ın kendisi.
* eslint-config-prettier: ESLint’in Prettier ile çakışan tüm biçimlendirme kurallarını devre dışı bırakan bir yapılandırma.
* eslint-plugin-prettier: Prettier’ı bir ESLint kuralı olarak çalıştıran eklenti. Bu, Prettier’ın biçimlendirme ihlallerini ESLint hataları olarak raporlamasını sağlar.
2. .eslintrc.js dosyanızı güncelleyin:
extends dizisine plugin:prettier/recommended öğesini ekleyin. Bu, eslint-plugin-prettier ve eslint-config-prettier‘ı otomatik olarak etkinleştirir ve Prettier ile çakışan ESLint biçimlendirme kurallarını devre dışı bırakır. Bu kuralı extends dizisinin en sonuna eklemek önemlidir, böylece diğer tüm yapılandırmaları geçersiz kılabilir.
// .eslintrc.js
module.exports = {
// ... diğer ayarlar ...
extends: [
// ... diğer extendsler (airbnb, react vb.) ...
'plugin:prettier/recommended', // Prettier'ı en son ekleyin
],
// plugins: ['prettier'], // 'plugin:prettier/recommended' zaten bunu içerir
rules: {
// ... diğer kurallar ...
// 'prettier/prettier': 'error', // Bu kural, 'plugin:prettier/recommended' tarafından otomatik olarak eklenir
},
};3. .vscode/settings.json dosyanızı güncelleyin:
VS Code’un Prettier’ı varsayılan biçimlendirici olarak kullanmasını ve kaydetmede biçimlendirme yapmasını sağlamak için:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue"
],
"editor.defaultFormatter": "esbenp.prettier-vscode", // Prettier uzantısını varsayılan olarak ayarla
"editor.formatOnSave": true // Kaydetmede Prettier ile biçimlendirmeyi etkinleştir
}Bu yapılandırma ile, bir dosyayı kaydettiğinizde önce Prettier kodu biçimlendirecek, ardından ESLint otomatik düzeltmelerini uygulayacak ve son olarak Prettier’ın biçimlendirme kurallarına uymayan kalan sorunları ESLint hatası olarak bildirecektir. Bu, kusursuz bir geliştirme akışı sağlar.
Gelişmiş Yapılandırma ve İpuçları
ESLint’i daha da verimli kullanmak için bazı ek ipuçları ve yapılandırmalar:
.eslintignore Dosyası
Tıpkı .gitignore gibi, .eslintignore dosyası da ESLint’in hangi dosya veya klasörleri göz ardı etmesi gerektiğini belirlemenizi sağlar. Genellikle node_modules, build, dist gibi derlenmiş veya üçüncü taraf kodlarını lintlemek istemezsiniz. Projenizin kök dizininde bir .eslintignore dosyası oluşturun:
# .eslintignore
node_modules/
build/
dist/
*.min.js
coverage/package.json Scriptleri
ESLint’i manuel olarak çalıştırmak yerine, package.json dosyanızda betikler tanımlayarak iş akışınızı kolaylaştırabilirsiniz:
// package.json
{
// ...
"scripts": {
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
},
// ...
}* npm run lint: Projenizdeki tüm desteklenen dosyalarda linting yapar ve hataları raporlar.
* npm run lint:fix: Projenizdeki tüm desteklenen dosyalarda linting yapar ve otomatik olarak düzeltilebilen sorunları düzeltir.
Bu betikler, CI/CD (Sürekli Entegrasyon/Sürekli Dağıtım) süreçlerinde veya takım içinde tutarlı bir şekilde linting’i çalıştırmak için çok kullanışlıdır.
CI/CD Süreçlerine Entegrasyon
ESLint’i CI/CD işlem hattınıza entegre etmek, kod tabanınızın her zaman belirli kalite standartlarını karşıladığından emin olmanın harika bir yoludur. Bir çekme isteği (pull request) birleştirilmeden önce veya bir dağıtım yapılmadan önce npm run lint komutunu çalıştırarak, kod kalitesi ihlallerini otomatik olarak kontrol edebilir ve hatalı kodun ana dala girmesini engelleyebilirsiniz.
Hata Ayıklama ve Sorun Giderme
ESLint veya VS Code uzantısı ile sorun yaşıyorsanız:
1. VS Code Çıktı Paneli: VS Code’da “Görünüm” (View) -> “Çıktı” (Output) menüsüne gidin. Açılan panelde açılır menüden “ESLint”i seçin. Burada ESLint’in çalışma zamanında karşılaştığı hataları, uyarıları ve diğer bilgileri görebilirsiniz. Bu, yapılandırma hatalarını veya dosya çözünürlüğü sorunlarını teşhis etmek için çok değerlidir.
2. ESLint Versiyonu: Bazen ESLint veya eklenti versiyonları arasında uyumsuzluklar olabilir. npm list eslint komutu ile kurulu ESLint versiyonunu kontrol edin.
3. Önbellek Temizleme: Bazen node_modules klasörünü silip npm install komutunu tekrar çalıştırmak sorunları çözebilir.
4. VS Code Yeniden Başlatma: Uzantı ayarlarında veya ESLint yapılandırmasında değişiklik yaptıktan sonra VS Code’u tamamen kapatıp yeniden açmak, uzantının yeni ayarları doğru bir şekilde yüklemesini sağlayabilir.
Monorepo Projelerinde ESLint Kullanımı
Monorepo yapılarında (birden fazla projenin tek bir depoda yönetildiği) ESLint’i yapılandırmak biraz daha karmaşık olabilir. Her alt proje için ayrı bir .eslintrc.js dosyası veya kök dizinde tüm monorepo için geçerli bir yapılandırma oluşturabilirsiniz. Kök .eslintrc.js içinde overrides özelliğini kullanarak farklı dosya veya klasörler için farklı kurallar belirleyebilirsiniz:
// .eslintrc.js (Monorepo Kök Dizini)
module.exports = {
// ... genel ayarlar ...
overrides: [
{
files: ['packages/client//.js', 'packages/client//.jsx'],
env: {
browser: true,
},
extends: [
'airbnb',
'airbnb/hooks',
// ... client özel extends ...
],
rules: {
// ... client özel kurallar ...
},
},
{
files: ['packages/server//*.js'],
env: {
node: true,
},
extends: [
'airbnb-base', // Node.js için daha uygun
// ... server özel extends ...
],
rules: {
// ... server özel kurallar ...
},
},
],
};Bu yaklaşım, farklı alt projeler için farklı ortamlar, stil rehberleri ve kurallar tanımlamanıza olanak tanır.
Sonuç
Visual Studio Code ve ESLint entegrasyonu ile kaydetmede linting’i etkinleştirmek, modern web geliştirme süreçlerinin vazgeçilmez bir parçasıdır. Bu makalede adım adım gösterilen kurulum ve yapılandırma süreçleri sayesinde, kodunuzu her kaydettiğinizde anında geri bildirim alarak potansiyel hataları ve stil ihlallerini otomatik olarak tespit edebilir ve düzeltebilirsiniz.
Kaydetmede linting’in sunduğu avantajlar saymakla bitmez:
* Anında Geri Bildirim: Hataları ve uyarıları anında görerek, sorunları büyümeden çözersiniz.
* Artan Üretkenlik: Manuel olarak hata ayıklama veya stil düzeltmeleriyle zaman kaybetmek yerine, daha önemli geliştirme görevlerine odaklanabilirsiniz.
* Daha Temiz ve Tutarlı Kod: Tüm ekip üyelerinin aynı kodlama standartlarına uymasını sağlayarak kod tabanınızın okunabilirliğini ve bakımını kolaylaştırırsınız.
* Daha Az Hata: Potansiyel sorunları erkenden yakalayarak çalışma zamanı hatalarının sayısını azaltırsınız.
* Geliştirici Deneyimi: Otomatik düzeltmeler ve görsel geri bildirimler sayesinde daha keyifli ve verimli bir geliştirme deneyimi yaşarsınız.
ESLint’in esnek yapısı sayesinde, ister basit bir JavaScript projesi, ister karmaşık bir React/TypeScript uygulaması olsun, her türlü ihtiyacınıza göre uyarlanabilir bir linting çözümü oluşturabilirsiniz. Prettier gibi biçimlendiricilerle entegrasyon, kod kalitesi ve stil tutarlılığı hedeflerinize ulaşmanız için size daha da güçlü bir araç seti sunar. Bu rehberdeki bilgileri kullanarak, geliştirme akışınızı önemli ölçüde iyileştirecek ve çok daha kaliteli yazılımlar üretmenizi sağlayacak sağlam bir temel oluşturabilirsiniz.