ayhan kesicioğlu

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ı):

Live Preview by Microsoft: html dosyalarını sol panelden üzerinde sağ tuş yaparak Show Preview tıklayarak önizleyebilirsiniz.
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.

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.
Ö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.

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+Shift+P / Open user settings (JSON): settings.json kullanıcı ayarlarını açar.
Kntrl + G: satıra git.
Cmd+P: folder daki ve son açılan dosyalar arasında hızlı dosya açmayı sağlar.
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: 25/9/2023

Devamını oku...

VS Code Klavuzu 2023