VSCode: Eklentiler, Emmet Kısayolları
Temel eklentileri yükleyin, HTML ve CSS'yi anında yazmak için Emmet kısaltmalarını kullanın ve düzenlemeyi hızlandıran klavye kısayollarını öğrenin.
VSCode: Eklentiler, Emmet Kısayolları, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Neden VSCode?
Visual Studio Code, ön yüz geliştirme için en popüler kod düzenleyicisidir. Ücretsiz, açık kaynaklı ve hızlıdır; ayrıca çok geniş bir uzantı ekosistemine sahiptir. Ön yüz ekiplerinin çoğu standart olarak bunu kullanır.
Temel Uzantılar
Ön yüz geliştirme için olmazsa olmaz uzantılar: ESLint (satır içi lint denetimi), Prettier (otomatik biçimlendirme), GitLens (satır içi git blame bilgisi), Path IntelliSense (dosya yolları için otomatik tamamlama) ve Auto Rename Tag (eşleşen HTML etiketlerini yeniden adlandırma).
Dile Özgü Uzantılar
TypeScript için: TypeScript ve JavaScript Language Features (yerleşik). React için: ES7+ React/Redux kod parçacıkları. Vue için: Volar (resmi). Tailwind için: Tailwind CSS IntelliSense.
Emmet Nedir?
Emmet, VSCode'un içinde yerleşik olarak bulunur. Bir kısaltma yazıp Tab tuşuna basarak bunu tam HTML veya CSS'ye genişletin. İşaretleme yazımını büyük ölçüde hızlandırır.
<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}
<!-- Expands to: -->
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>Yaygın Emmet Kısaltmaları
Şu Emmet kısayollarını öğrenin: ! → HTML başlangıç şablonu, div.container → sınıf içeren bir div öğesi, ul>li*5 → 5 öğeli liste, input:email → e-posta girişi, form:post → post yöntemine sahip form.
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>Temel Klavye Kısayolları
En çok zaman kazandıran kısayollar: Ctrl/Cmd+P (hızlı dosya açma), Ctrl/Cmd+Shift+P (komut paleti), Alt+Click (çoklu imleç), Ctrl/Cmd+D (sonraki eşleşmeyi seçme), Ctrl/Cmd+/ (yorumu açıp kapatma).
Çoklu İmleçle Düzenleme
Alt+Click imleç ekler. Ctrl+Alt+Up/Down üstte veya altta imleç ekler. Ctrl+D, seçimin bir sonraki eşleşmesini seçer. Birden çok imleçle yapılan tüm düzenlemeler eşzamanlı gerçekleşir; bu, küçük kapsamlar içindeki değişkenleri yeniden adlandırmak için çok kullanışlıdır.
Entegre Terminal
Ctrl+` (ters tırnak) ile terminali VSCode'un içinde açın. Düzenleyiciden ayrılmadan, bir bölmede geliştirme sunucusunu çalıştırmak ve diğerinde testleri çalıştırmak için terminali bölebilirsiniz.
Çalışma Alanı Ayarları
Projenizde, kullanıcı ayarlarını geçersiz kılan projeye özgü ayarları belirlemek için .vscode/settings.json dosyası oluşturun. Tüm ekip arkadaşlarınızın aynı deneyimi yaşaması için bu dosyayı kaydedin: kaydetme sırasında biçimlendirme, sekme boyutu ve cetvel sütunları.
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSense ve Otomatik İçe Aktarmalar
VSCode'un IntelliSense özelliği otomatik tamamlama, parametre ipuçları ve üzerine gelindiğinde gösterilen belgeler sunar. TypeScript projelerinde, bir tamamlamayı kabul ettiğinizde sembolleri otomatik olarak içe de aktarır; elle import eklemeniz gerekmez.
Tanıma ve Başvurulara Gitme
Tanımına gitmek için herhangi bir sembol üzerinde Ctrl+Click (veya F12) kullanın. Shift+F12 tüm başvuruları gösterir. Ctrl+Shift+F tüm dosyalarda arama yapar. Bunlar, büyük kod tabanlarında gezinmek için vazgeçilmezdir.
Sorunlar Paneli
Sorunlar paneli (Ctrl+Shift+M), açık dosyalardaki tüm ESLint ve TypeScript hatalarıyla uyarılarını listeler. İşleme almadan önce nelerin düzeltilmesi gerektiğini görmenin en hızlı yoludur.
Hızlı Kontrol
ul>li*3 Emmet kısaltması VSCode'da neye genişler?
Özet: VSCode İş Akışı
ESLint, Prettier ve dile özgü uzantıları yükleyin. HTML/CSS'yi hızlı yazmak için Emmet kullanın. Klavye kısayollarını öğrenin (Cmd+P, Cmd+Shift+P, Cmd+D). .vscode/settings.json içinde formatOnSave ayarını yapın. Tekrarlanan değişiklikler için çoklu imleçle düzenleme kullanın. Kodda gezinmek için Tanıma Git özelliğini kullanın.
Sıkça Sorulan Sorular
“VSCode: Eklentiler, Emmet Kısayolları” dersi ücretsiz mi?
Evet — “VSCode: Eklentiler, Emmet Kısayolları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“VSCode: Eklentiler, Emmet Kısayolları” dersinde ne öğreneceğim?
Temel eklentileri yükleyin, HTML ve CSS'yi anında yazmak için Emmet kısaltmalarını kullanın ve düzenlemeyi hızlandıran klavye kısayollarını öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“VSCode: Eklentiler, Emmet Kısayolları” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Chrome DevTools: Elements Console Network
- VSCode: Eklentiler, Emmet Kısayolları
- Prettier ve ESLint Kurulumu
- Tarayıcı Uyumluluğu ve caniuse.com