Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi Bankası

Vue.js Projelerinde ESLint ve Prettier Entegrasyonu

Bu rehberde ne öğreneceksiniz?​

Bu rehberde Vue.js projelerinde ESLint ve Prettier’i birlikte kullanmayı öğreneceksiniz.
Amaç, kod stilini otomatikleştirerek okunabilir ve tutarlı projeler üretmektir.

Artık ekip içinde “tek tırnak mı, çift tırnak mı?” tartışması yapmanıza gerek kalmayacak.
Tüm kod düzeni kurallarla ve otomasyonla yönetilecek.

🧠 Teknik Özet​

Bu rehber Vue.js projelerinde ESLint ve Prettier entegrasyonunu anlatır.
Problem: Ekip içinde tutarsız kod formatı ve stil karmaşası.
Çözüm: ESLint üzerinden Prettier kurallarını zorunlu hale getirmek.

Ön Hazırlıklar​

  • Bilgisayarınızda Node.js kurulu olmalı
  • Temel terminal komutlarını biliyor olmanız yeterlidir
  • Mevcut bir Vue projesi veya yeni bir proje kullanılabilir

1️⃣ Proje Kurulumu ve Paketlerin Yüklenmesi​

Önce Prettier’i global olarak yükleyin.

npm install --global prettier
  • Bu komut Prettier’i sistem genelinde kullanılabilir yapar.

Vue CLI ile yeni bir proje oluşturun.

npx @vue/cli create rabisu-vue-app --default
  • Bu komut varsayılan ayarlarla Vue projesi oluşturur.
  • Proje dizinine geçin.
cd rabisu-vue-app
  • ESLint ve Prettier entegrasyon paketlerini ekleyin.
npm install --save-dev eslint-plugin-prettier eslint-config-prettier
  • Bu paketler ESLint ile Prettier’in birlikte sorunsuz çalışmasını sağlar.

2️⃣ ESLint Yapılandırmasını Düzenleme​

  1. ESLint ayarları genellikle package.json veya .eslintrc.js içindedir.

Yöntem A: package.json Kullanıyorsanız​

  • eslintConfig bölümünü aşağıdaki gibi düzenleyin.
{
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "plugin:prettier/recommended",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  }
}
  • Bu yapı Prettier kurallarını ESLint üzerinden uygular.

Yöntem B: .eslintrc.js Kullanıyorsanız​

  1. Ayarları aşağıdaki şekilde güncelleyin.
module.exports = {
  root: true,
  extends: [
    "plugin:vue/essential",
    "plugin:prettier/recommended",
    "eslint:recommended"
  ],
};
  • Bu ayar ESLint’e Prettier kurallarını zorunlu kılar.

3️⃣ Kodları Otomatik Düzenleme​

  1. Kurulum tamamlandıktan sonra şu komutu çalıştırın.
npx eslint --fix src/
  • Bu komut .js ve .vue dosyalarını otomatik düzeltir.
  1. Girintiler, boşluklar ve satır düzeni standart hale gelir. Kod stili artık manuel bir sorun olmaktan çıkar.

❓ Sıkça Sorulan Sorular (SSS)​

1. ESLint ve Prettier arasındaki fark nedir? ESLint kod kalitesini, Prettier kod görünümünü denetler.

2. Her kaydettiğimde otomatik düzelir mi? Evet. VS Code’da “Format On Save” açılabilir.

3. Mevcut projelere eklenebilir mi? Evet. eslint --fix ile tüm dosyalar güncellenir.

4. Farklı editör kullanan ekipler için sorun olur mu? Hayır. Kurallar proje içinde tanımlıdır.

🎯 Sonuç​

Vue.js projenizi modern geliştirme standartlarına uygun hale getirdiniz. Kod okunabilirliği artar, stil tartışmaları sona erer.

Projelerinizi Rabisu Bulut altyapısında güvenle geliştirebilirsiniz.