VS Code Klavuzu 2024

Visual Studio Code Sıfırdan Kurulum, Ayarlar ve Eklentiler

Php ile kodlama yapıyorsanız ve VS Code editörüne geçmek istiyorsanız bu yazının faydalı olacağını düşünüyorum. Ayrıca Python'a giriş yaptığım için Python ayarlarını ve gerekli eklentilerini de ekleyeceğim. Ayarları yaptığınızda Php + Python için uygun bir ortam hazırlamış olacaksınız. Uzun bir süredir Sublime Text editörünü kullanıyordum fakat github copilot gibi eklentilerin bu gibi editörlere geç gelmesi, VS Code'un daha çok kullanılması, python için yine VS Code'un tercih edilmesi gibi nedenlerle VS Code'a geçmeye karar verdim. Sonuçta hepsi bir araç, tercih size kalmış. Bu geçişte güncel bilgileri adım adım yazmaya çalışacağım. Hadi başlayalım...

---

İlk kurulum:

“Code/Preferences/Profiles/Create profile” ile profil adını yaz (ayhan vb) ve oluştur.
“Code/Preferences/Settings Sync is On” tıkla ve githup ile oturum aç. Böylece profilindeki tüm ayar, tema, vs.. senkronize olur.

Kullanıcı ayarlarını değiştirme (Vs Code standart ayarlarını bu dosya ile değiştirebilirsiniz):

Cmd+Shift+P ile komut paletini aç.
"Open User Settings (JSON)" yaz ve tıkla.
Açılan settings.json dosyasına ayar komutunu yaz ve kaydet.

PHP için ilk yapılacaklar (önce yukarıdaki ilk kurulum işlemlerini yapın!):

Extensions menüsünü sol panelden aç.
“PHP Intelephense by Ben Mewburn” kur. Aşağıdaki ayarları yap (eklenti sayfasında yazanlardır, güncelini eklenti sayfasından bakın).

Extensions arama kutusuna “@builtin php” yaz. “PHP Language Features” yerleşik php eklentisini Disable yap. Diğer “PHP Language Basics” syntax highlighting eklentisi Enable kalsın.
settings.json dosyasını aç ve aşağıdaki satırı ekle ve kaydet:

"files.associations": {
    "*.module": "php"
},

yine settings.json içine aşağıdaki satırı ekleyerek default php yazım önerilerini devre dışı bırakın:

"php.suggest.basic": false,

“PHP Debug by Xdebug” kur.

PYTHON için ilk yapılacaklar (önce yukarıdaki ilk kurulum işlemlerini yapın!):

“Python by Microsoft” kur.

Buraya kadar yaptıysanız artık çalışmaya hazırsınız demektir.

Diğer eklentiler (isteğe bağlı):

"SFTP" by Natizyskunk: web sitenizin dosyalarını local ve server tarafı olmak üzere senkronize etmek istiyorsanız bu eklentiyi tavsiye ederim. "ftp-sync by Lukasz Wronski" ve birkaç farklı ftp eklentisini denedim fakat htaccess dosyalarını senkronize edememek gibi farklı hatalar aldım. Bu nedenle SFTP eklentisini tercih ettim. Eklentiyi kurup ftp bilgilerinizi girdikten sonra klasörünüzdeki dosyalarda bir değişiklik yapıp kaydet dediğinizde otomatik olarak upload edilir. İsterseniz sol panelden dosyaya/klasöre sağ tık yapıp upload veya download yapabilirsiniz. Tüm klasörü download veya upload yapmak için komut paletini de kullanabilirsiniz (local to remote veya remote to local).

Komut paletine "SFTP: config" yazıp tıklayın. İlk kez kullandığınız için bir ayar oluşturmamız gerekecek. sftp.json (klasörünüzdeki .vscode içine yerleşir) dosyası açılır. Bu dosyaya aşağıdaki ayarları girip kaydedin (bu ayarlarda ftp bilgilerinize göre gerekli değişiklikleri yapın. Ftp bilgileriniz yoksa cpanel > ftp hesapları kısmından ftp hesabı oluşturabilirsiniz):

{
    "name": "mywebsite.com",
    "host": "reseller.ni.net.tr",
    "protocol": "ftp",
    "port": 21,
    "username": "ftp@mywebsite.com",
    "password": "your_password",
    "remotePath": "/",
    "uploadOnSave": true,
    "ignore": [".vscode", ".git", ".DS_Store"],
    "useTempFile": false,
    "openSsh": false
}

JavaScript Productivity Pack - Emre MUTLU: Bu bir eklenti paketidir. Faydalı bulduğum eklentileri içerdiği için ben kurdum. Fakat içinden daha sonra "Code Spell Checker, Turkish Code Spell Checker, Error Lens" isimli üç eklentiyi kaldırdım (yanlış yazılmış kelimelerle ilgili bu eklentileri kodda karışıklık yaptığı için kaldırdım).
"Twig" by whatwedo: Php twig dosyalarının syntax highlighting eklentisidir. Twig dosyaları ile çalışıyorsanız faydalı olacaktır.
CodeMetrics: Bu eklentiyi kullandım fakat bence gerek yok. Javascript kodlarındaki karmaşıklığı ölçüyor. Örneğin bir fonksiyonunuz var bunun yanına bir renk ve sayı ile karmaşıklık notunu yazıyor. Görünüm olarak karışıklığa neden olduğunu düşündüğüm için kaldırdım.
Codeium: Kod ve yorum yazarken yapay zekadan öneri almak için bu eklentiyi kurabilirsiniz. Github Copilot gibi AI desteği sunan bir eklentidir. Copilot ücretli olduğu için Codeium eklentisini ücretsiz bir alternatif olarak tavsiye ediyorum. Üstelik Chat bölümü de sidebar'a ekleniyor ve buradan soru sorabiliyorsunuz. Eklentiyi kur + signup + mailden onayla + token gir sırasını izleyerek aktif edebilirsiniz.
"Selected Lines Count" by Ram Dayal Vaishnav: Normalde durum çubuğunda seçtiğiniz alanın satır sayısını göstermenin malesef bir seçeneği yok. Durum çubuğunda kaç karakter seçtiğiniz görünüyor fakat kaç satır seçtiğiniz görünmüyor. İşte bu eklenti durum çubuğunda kaç satır seçtiğinizin görünmesini sağlıyor.

Diğer ayarlar kısmını ikiye ayırıyorum:
1) settings.json dosyasına yazılacaklar
2) ayarlar arayüzünden yapılacaklar

1) Diğer ayarlar - settings.json dosyasına eklenir (isteğe bağlı):

Cmd+Shift+P ile komut paletini aç. "Open User Settings (JSON)" yaz ve aç. Açılan settings.json dosyasına aşağıdaki ayarlardan yapmak istediklerinizi ekleyin ve kaydedin.

workspace'i kaydetme işlemine onay vermek için.

"security.workspace.trust.untrustedFiles": "open",

exit veya close işleminde kaydedilmemiş dosyalar var uyarısını devre dışı bırakmak için (vs code tekrar açıldığında bu dosyalar son hali ile gelecektir).

"window.confirmBeforeClose": "never",
"files.hotExit": "onExitAndWindowClose"

2) Diğer ayarlar - ayarlar sayfasından yapılır (isteğe bağlı):

Cmd+Shift+P ile komut paletini aç. "Open User Settings" yaz ve tıkla (json olmayan seçeneği tıklayın). Bu genel kullanıcı ayarlarını açar. Bu sayfanın başında arama kutusu var oraya yapacağınız ayarı aratabilirsiniz.

line highlight özelliği default olarak açıktır ve bulunduğunuz satırı highlight yapar yani satır rengi değişir. Bu benim istemediğim bir durum çünkü o satırda bir kelimeyi seçili hale getirdiğimde satırı tamamen seçmişim gibi görünüyor, nereyi seçtiğim karışıyor. Bu özelliği kapatmak için:

Ayarlar sayfanın başındaki arama kutusuna "Render" yazarak aratın.
"Editor: Render Line Highlight" seçeneğini bulup "none" olarak belirleyin.

Vs Code içinde tanımlı olmayan bir dosya türünü bilinen bir dosya türünün şablonu ile eşleştirebilirsiniz. Böylece vs code yeni dosyayı ilişkilendirdiğiniz dosya türünde açacaktır. Örneğin Tpl dosyaları (önceden kullanılan twig benzeri bir şablon oluşturma dilidir) ile çalışıyorsanız ve bu tpl dosyalarının php renk şablonunda açılmasını istiyorsanız:

Ayarlar sayfasının solundaki menüden Text Editor altındaki Files başlığına tıklayın.
Associations kısmına gelin ve Add Item butonuna tıklayın. Birinci kutuya *.tpl ikinci kutuya da php yazın. Ok tıkladığınızda artık tpl dosyaları php dosyası gibi açılacaktır.

Tabların arasındaki boşlukların azaltılarak daha sıkışık görünmesi için Workbench › Editor: Tab Sizing değerini "shrink" olarak belirleyin. Ben bir süre "shrink" ayarıyla kullandım fakat sonra default olan "fit" değerine geri döndüm. Çünkü çok fazla tab açınca tablar iyice küçülüyordu. Dolayısı ile çok fazla tab kullanacaksanız "fit" ayarı daha mantıklı olacaktır.
Örneğin bir css dosyasında height kelimesinin üzerine tıklayınca tüm height kelimelerini highlight yapar. Bu bence gereksiz çünkü bunu istiyorsanız o kelimeye çift tıklamanız yeterli, kendiliğinden yapmasına gerek yok ki bu da editörü yavaşlatır bence. Bunu kapatmak isterseniz "Editor: Occurrences Highlight" seçeneğindeki işareti kaldırın.
"workbench.editor.untitled.labelFormat" ayarını "name" olarak belirledim. Varsayılan olarak content olarak gelir ve yeni bir sayfa açtığınızda tab başlığında yazdığınız kodun ilk birkaç kelimesi görünür. Bu tab mesafesini arttırdığı için ve karışık görünmesine neden olduğu için bana gereksiz geldi. Yine de kara sizin.
"editor.tabSize": 4 olarak belirleyebilirsiniz. Böylece tab boşlukları 4 karakter olarak ayarlanır. Default değeri 1'dir.
"editor.lightbulb.enabled" ayarını kaldırdım. Çünkü bu ayar aktif olunca özellikle js dosyalarında satırların başında bir ampül ikonu çıkıyor. Ampüle tıklayınca o satırla ilgili yapılabilecek düzeltmeleri ve sonuçlarını gösteriyor. Yine çok gerekli görmediğim ve karmaşıklığa sebep olduğu için bu ayarı kaldırdım.
"workbench.editor.pinnedTabsOnSeparateRow" seçeneğini işaretli hale getirirseniz pin'lediğiniz tablar bir üst sırada sabitlenir.
"editor.colorDecorators" seçeneğinin işaretini kaldırdım. Böylece css gibi yerlerde bir renk kodu yazdığınızda yanında kare kutucuk çıkmıyor, fakat renk kodunun metnini o renkte göstermeye devam ediyor. Bu seçenek aktif olursa kutu çıkar ve siz o kutuya tıklayıp paletten renk seçebilirsiniz. Fakat kod yazarken bu kutu karışıklığa yol açıyor bence ve zaten bu renk seçme işini tarayıcının developer araçlarından yapıyorum genellikle. Bu kutuya gerek olmadığını düşünüyorum.
"workbench.editor.highlightModifiedTabs" ayarını işaretli yaparak değişiklik yapılan tabın highligth yapılmasını böylece diğer tablardan daha rahat ayrışmasını sağlayabilirsiniz.
"workbench.editor.tabCloseButton" off yaparak tabların yanında görünen Close butonunu kaldırabilirsiniz. Böylece tabın genişliği biraz daha küçülecektir. Ayrıca tab'a tıklarken yanlışlıkla x butonuna basma durumuna çözüm olacaktır.
"problems.decorations.enabled": seçeneğini kapatarak dosyalardaki uyarıları (kodlama hatası vb) göstermeyi kapatabilirsiniz. Çünkü burada uyarı verdiği durumlar her zaman bir hata olmayabiliyor, örneğin css'de boş sınıf olunca bir uyarı veriyor. Yani bu uyarı verilen durumları bazen bilerek yapıyoruz ve bunların hataymış gibi görünmesini istemediğim için bu ayarı kapattım. Ayrıca bu ayar açık olunca hatalı dosyalar sidebar ve tab olarak renk değiştiriyordu ve bu görünüşte karışıklığa nadan oluyordu.
"editor.showUnused": false olarak belirleyin. Normalde tanımladığınız bir değişken herhangi bir yerde kullanılmayınca (unused) farklı renkte görünüyor. False yaparak bu özelliği kapatabilirsiniz.

Kullandığım renk ve ikon temaları:

Tema seçimi tamamen kişiye bağlıdır ve rahat ettiği bir renk düzeni olmalıdır. Çoğunlukla koyu temalar kullanılır. Ben de koyu temaları uzun süre kullandım ve halen de kullanıyorum fakat arada sıkıldıkça açık temalara da geçiş yapıyorum. Sublime Text editöründe daha fazla tema vardı, bu anlamda Vs Code daha az seçeneğe sahip gibi geldi. Tema renk düzeni olarak tavsiye edebileceğim hususlardan biri de mavi renkleri çok içermeyen bir tema seçin. Çünkü mavi ışık uzun süre bakılınca göze rahatsızlık veriyor. Ben bu anlamda mavi rengi azaltıp ekranı sarartan bir yazılım olan flux'u kullanıyorum bilgisayarda.

Aşağıya kullandığım temaları "Renk Teması / İkon Teması" formatında ekliyorum.

Github Dark Default / Material Icon Theme

Material Icon Theme için şu ayarları normal ayarlar arayüzünden yaptım: activeIconPack: react seç, material-icon-theme.files.associations: "*.tpl": "php" satırını ekle, material-icon-theme.folders.color: #F8D775 olarak belirle, material-icon-theme.folders.theme: Classic seç.

Bazı Kısayollar:

Cmd + Shift + L: dosyadaki seçili ifadenin geçtiği her yere imleç ekler.
Alt + Shift + I: her satırın sonuna imleç ekler (önce tümünü seç).
Cmd+Shift+P: komut paletini açar.
Cmd+P: folder daki ve son açılan dosyalar arasında hızlı dosya açmayı sağlar.
Cmd+Shift+P / Open user settings (JSON): settings.json kullanıcı ayarlarını açar.
Kntrl + G: satıra git.
F8: sonraki hataya git
Bookmark add: Alt+Cmd+K
Bookmark next: Alt+Cmd+L
Alt + up/down arrow: satırı aşağı yukarı taşır.
Transform to Lowercase: Shift + Kntrl + Alt + L
Transform to Uppercase: Shift + Kntrl + Alt + U
Transform to Titlecase: Shift + Kntrl + Alt + T
Shift + Alt + F: Auto indent (otomatik girinti ayarlama)

Kendi Eklediğim Kısayollar:

File > Preferences > Keyboard Shortcuts açın ilgili komutları bulup kısayolları ekleyin:

Transform to Lowercase: Shift + Kntrl + Alt + L
Transform to Uppercase: Shift + Kntrl + Alt + U
Transform to Titlecase: Shift + Kntrl + Alt + T

Bonus:

https://learn.vscode.one/
VS Code'yi profesyonel olarak kullanmayı öğreten web sitesi.

Farklı öneriler oldukça buraya eklemeye devam edeceğim...

Son Güncelleme: 28/12/2023