M

MLOG

Türkçe

Özel eklentiler oluşturmayı öğrenerek VS Code'un gücünü ortaya çıkarın. Bu rehber, kurulumdan yayınlamaya kadar eksiksiz bir kılavuz sunarak kodlama ortamınızı geliştirmenizi ve eserlerinizi dünyayla paylaşmanızı sağlar.

VS Code Eklenti Geliştirmede Uzmanlaşma: Küresel Geliştiriciler için Kapsamlı Bir Rehber

Visual Studio Code (VS Code), dünya çapında milyonlarca geliştiricinin tercih ettiği kod düzenleyicisi haline gelmiştir. Popülerliği, hafif yapısından, güçlü özelliklerinden ve en önemlisi genişletilebilirliğinden kaynaklanmaktadır. Özel eklentiler oluşturma yeteneği, geliştiricilerin düzenleyiciyi kendi özel ihtiyaçlarına göre uyarlamasına, verimliliği artırmasına ve iş akışlarını kolaylaştırmasına olanak tanır. Bu kapsamlı rehber, kendi VS Code eklentilerinizi oluşturma sürecinde size ilk kurulumdan eserinizin dünya tarafından kullanılması için yayınlanmasına kadar adım adım yol gösterecektir.

Neden VS Code Eklentileri Geliştirmelisiniz?

VS Code eklentileri geliştirmek, hem bireysel geliştiriciler hem de kuruluşlar için sayısız fayda sunar:

Ön Koşullar

Eklenti geliştirmeye başlamadan önce aşağıdakilerin kurulu olduğundan emin olun:

Geliştirme Ortamınızı Kurma

Ön koşullar hazır olduğuna göre, geliştirme ortamınızı kurmaya hazırsınız:

  1. Yeni Bir Eklenti Projesi Oluşturun: Terminalinizi açın ve eklenti oluşturucuyu başlatmak için aşağıdaki komutu çalıştırın:
    2. yo code
  2. İstemleri Yanıtlayın: Oluşturucu, eklentiniz hakkında bir dizi soru soracaktır. İşte yaygın istemlerin ve önerilen yanıtların bir dökümü:
    • Ne tür bir eklenti oluşturmak istiyorsunuz? Önerilen yaklaşım olan TypeScript tabanlı bir eklenti için "New Extension (TypeScript)" seçeneğini seçin.
    • Eklentinizin adı ne? Eklentiniz için açıklayıcı ve benzersiz bir ad seçin. Örnekler: "Code Spell Checker," "JavaScript Snippets," "Python Autocomplete."
    • Eklentinizin tanımlayıcısı ne? Bu, eklentiniz için genellikle `yayinci.eklenti-adi` formatında olan benzersiz bir tanımlayıcıdır. Bir yayıncı adı seçin (örneğin, GitHub kullanıcı adınız veya şirket adınız).
    • Eklentinizin açıklaması ne? Eklentinizin ne yaptığına dair kısa ve bilgilendirici bir açıklama sağlayın.
    • Bir git deposu başlatılsın mı? Sürüm kontrolü için bir Git deposu başlatmak üzere "Yes" seçeneğini seçin.
    • Kodu lintlemek için eslint kullanmak ister misiniz? Kod stili tutarlılığını zorlamak için "Yes" seçeneğini seçin.
  3. Projeyi VS Code'da Açın: Oluşturucu tamamlandığında, yeni oluşturulan proje klasörünü VS Code'da açın.

Proje Yapısını Anlama

Eklenti oluşturucu, aşağıdaki anahtar dosyalarla temel bir proje yapısı oluşturur:

İlk Eklentinizi Yazma

Bir komut yürütüldüğünde "Merhaba Dünya" mesajı gösteren basit bir eklenti oluşturarak başlayalım:

  1. `src/extension.ts` dosyasını açın: Bu dosya, eklentiniz etkinleştirildiğinde çağrılan `activate` işlevini içerir.
  2. `activate` İşlevini Değiştirin: Mevcut kodu aşağıdakiyle değiştirin:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Tebrikler, \"my-extension\" adlı eklentiniz şimdi aktif!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Eklentimden Merhaba Dünya!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Açıklama:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: `my-extension.helloWorld` kimliğine sahip bir komut kaydeder. Bu komut, VS Code komut paletinde mevcut olacaktır.
    • `vscode.window.showInformationMessage('Eklentimden Merhaba Dünya!')`: VS Code penceresinde bir bilgi mesajı görüntüler.
    • `context.subscriptions.push(disposable)`: Komutu eklentinin aboneliklerine ekler, eklenti devre dışı bırakıldığında düzgün bir şekilde yok edilmesini sağlar.
  4. `package.json` dosyasını değiştirin: Komutu tanımlamak için `contributes` bölümüne aşağıdakini ekleyin:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Merhaba Dünya"
		}]
	}
  5. Açıklama:
    • `"commands"`: Eklentinizin katkıda bulunduğu komutları tanımlar.
    • `"command": "my-extension.helloWorld"`: `extension.ts` dosyasında kullanılan kimlikle eşleşen komut kimliğini belirtir.
    • `"title": "Merhaba Dünya"`: Komut paletinde komut için görüntülenecek adı ayarlar.

Eklentinizi Test Etme

Şimdi eklentinizi test etme zamanı:

  1. F5'e Basın: Bu, eklentinizin kurulu olduğu yeni bir VS Code penceresi başlatacaktır. Bu, "Eklenti Geliştirme Sunucusu"dur.
  2. Komut Paletini Açın: Komut paletini açmak için `Ctrl+Shift+P` (veya macOS'ta `Cmd+Shift+P`) tuşlarına basın.
  3. "Merhaba Dünya" Yazın: Komutunuzun komut paletinde listelendiğini görmelisiniz.
  4. "Merhaba Dünya"ü Seçin: Komuta tıklamak onu yürütecek ve VS Code penceresinde "Merhaba Dünya" mesajını gösterecektir.

Eklentinizde Hata Ayıklama

Hata ayıklama, eklentinizdeki sorunları belirlemek ve düzeltmek için çok önemlidir. VS Code mükemmel hata ayıklama desteği sağlar:

  1. Kesme Noktaları Belirleyin: Kodunuzda kesme noktaları ayarlamak için düzenleyici kenar boşluğunda satır numaralarının yanına tıklayın.
  2. F5'e Basın: Bu, Eklenti Geliştirme Sunucusunu hata ayıklama modunda başlatacaktır.
  3. Eklentinizi Tetikleyin: Hata ayıklamak istediğiniz kodu tetikleyen komutu veya eylemi yürütün.
  4. Değişkenleri ve Çağrı Yığınını İnceleyin: VS Code hata ayıklayıcısı, kesme noktalarınızda yürütmeyi duraklatarak değişkenleri incelemenize, kodda adım adım ilerlemenize ve çağrı yığınını incelemenize olanak tanır.

VS Code API ile Çalışma

VS Code API, düzenleyiciyle etkileşim kurmak için zengin bir arayüz ve işlev seti sağlar. İşte API'nin bazı kilit alanları:

Örnek: Bir Kod Parçacığı (Snippet) Eklentisi Oluşturma

Temel bir React bileşeni oluşturmak için bir kod parçacığı ekleyen bir eklenti oluşturalım:

  1. Bir `snippets` Klasörü Oluşturun: Projenizin kök dizininde `snippets` adında yeni bir klasör oluşturun.
  2. Bir Snippet Dosyası Oluşturun: `snippets` klasörünün içinde `react.json` adında bir dosya oluşturun.
  3. Snippet Tanımını Ekleyin: `react.json` dosyasına aşağıdaki JSON'u ekleyin:
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Temel bir React bileşeni oluşturur"
	}
}
  4. Açıklama:
    • `"React Component"`: Snippet'in adı.
    • `"prefix": "reactcomp"`: Snippet'i tetikleyen önek. `reactcomp` yazıp `Tab` tuşuna basmak snippet'i ekleyecektir.
    • `"body"`: Snippet'teki kod satırlarını temsil eden bir dizi dize.
    • `${1:ComponentName}`: Bileşen adını hızlıca değiştirmenizi sağlayan bir sekme durağı.
    • `"description"`: Snippet'in bir açıklaması.
  5. `package.json` dosyasını değiştirin: `contributes` bölümüne aşağıdakini ekleyin:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Açıklama:
    • `"snippets"`: Eklentinizin katkıda bulunduğu snippet'leri tanımlar.
    • `"language": "javascriptreact"`: Snippet'in uygulanabilir olduğu dili belirtir.
    • `"path": "./snippets/react.json"`: Snippet dosyasının yolunu belirtir.
  7. Snippet'inizi Test Edin: Bir `.jsx` veya `.tsx` dosyası açın ve `reactcomp` yazın. Snippet'i eklemek için `Tab` tuşuna basın.

İleri Düzey Eklenti Geliştirme Teknikleri

Temellerde ustalaştıktan sonra, daha gelişmiş eklenti geliştirme tekniklerini keşfedebilirsiniz:

Uluslararasılaştırma ve Yerelleştirme (i18n ve L10n)

Küresel bir kitleye ulaşmak için eklentinizi uluslararasılaştırmayı ve yerelleştirmeyi düşünün. Bu, eklentinizi farklı dilleri ve bölgeleri destekleyecek şekilde uyarlamayı içerir.

Eklentinizi Yayınlama

Eklentiniz hazır olduğunda, başkalarının kullanması için onu VS Code Pazar Yeri'ne yayınlayabilirsiniz:

  1. Bir Azure DevOps Organizasyonu Oluşturun: Eklentinizi yayınlamak için bir Azure DevOps organizasyonuna ihtiyacınız olacak. Eğer bir tane yoksa, Azure DevOps web sitesinde ücretsiz bir hesap oluşturun.
  2. `vsce` Aracını Kurun: VS Code Eklenti Yöneticisi (`vsce`), eklentileri paketlemek ve yayınlamak için bir komut satırı aracıdır. npm kullanarak küresel olarak kurun:
    3. npm install -g vsce
  3. Bir Yayıncı Oluşturun: Yayıncı, Pazar Yeri'ndeki eklentilerinizin sahibi olan bir kimliktir. `vsce create-publisher` komutunu kullanarak bir yayıncı oluşturun. Bir yayıncı adı ve Azure DevOps'tan bir kişisel erişim belirteci (PAT) sağlamanız gerekecektir.
  4. Kişisel Erişim Belirteci (PAT) Oluşturun: Azure DevOps'ta, "Kullanıcı Ayarları" -> "Kişisel Erişim Belirteçleri"ne gidin ve "Marketplace (Yayınla)" kapsamına sahip yeni bir PAT oluşturun.
  5. Eklentinizi Paketleyin: Eklentinizi bir `.vsix` dosyasına paketlemek için `vsce package` komutunu kullanın.
  6. Eklentinizi Yayınlayın: Eklentinizi Pazar Yeri'ne yayınlamak için `vsce publish` komutunu kullanın. Yayıncı adınızı ve PAT'ınızı sağlamanız gerekecektir.

Eklenti Geliştirme için En İyi Uygulamalar

Yüksek kaliteli ve sürdürülebilir VS Code eklentileri oluşturmak için bu en iyi uygulamaları izleyin:

Topluluk Kaynakları

VS Code eklenti geliştirme hakkında daha fazla bilgi edinmek için bazı değerli kaynaklar şunlardır:

Sonuç

VS Code eklentileri geliştirmek, kodlama ortamınızı özelleştirmenin, verimliliği artırmanın ve çözümlerinizi küresel geliştirici topluluğuyla paylaşmanın güçlü bir yoludur. Bu kapsamlı rehberi takip ederek, eklenti geliştirme sanatında ustalaşabilir ve kendiniz ve başkaları için VS Code deneyimini geliştiren yenilikçi araçlar oluşturabilirsiniz. Topluluğu benimsemeyi, açık kaynaklı projelere katkıda bulunmayı ve sürekli olarak VS Code eklenti geliştirmenin sürekli gelişen dünyasını öğrenmeyi ve keşfetmeyi unutmayın. İyi şanslar ve mutlu kodlamalar!