İçindekiler

1. Önerilen VSCode Profili
   1. Profil Ayarları
   2. Merkezi tailwind.config.js Ayarlama
   3. Profil Ayarlarının Açıklamaları
   4. Profildeki Eklentiler ve Açıklamaları
   5. Profili İndir
   6. VSCode Profili Kurulumu

Önerilen VSCode Profili

T-Soft temalarıyla çalışırken önerilen VSCode profilini kullanabilirsiniz. Bu profil, tema geliştirme sürecinde ihtiyaç duyulan eklentileri ve ayarları içermektedir.

Profil Ayarları

Profil, aşağıdaki ayarları içermektedir:

{
  "editor.tabSize": 4,
  "editor.lineHeight": 1.7,
  "editor.insertSpaces": true,
  "files.trimTrailingWhitespace": false,
  "editor.trimAutoWhitespace": false,
  "tailwindCSS.experimental.configFile": "dosya yolu/tailwind.config.js",
  "editor.formatOnSave": true,
  "[twig]": {
    "editor.defaultFormatter": "serhatkaya.twig-formatter",
    "editor.formatOnSave": true
  },
  "tailwindCSS.includeLanguages": {
    "twig": "html"
  },
  "emmet.includeLanguages": {
    "twig": "html"
  },
  "tailwindCSS.emmetCompletions": true,
  "prettier.tabWidth": 4,
  "html.format.preserveNewLines": true,
  "html.format.wrapLineLength": 0,
  "html.format.indentInnerHtml": false,

  "files.associations": {
    "*.twig": "twig"
  },
}

Merkezi tailwind.config.js Ayarlama

Online Store 2.0 sistemde Tailwind CSS yapılandırma dosyası ulaşamayacağınız bir dizinde bulunur. Editör tailwindcss classları önerebilmesi için bu dosyayı sabit bir yerden çekerek çözüm üretebiliriz.

Yukarıdaki ayarda "dosya yolu/tailwind.config.js" kısmını kendi bilgisayarınızda tailwind.config.js dosyasının bulunduğu dizinle değiştirmeniz gerekmektedir.

Örnek: "tailwindCSS.experimental.configFile": "/Users/hasanunal/tsoft/tailwind.config.js",

module.exports = {
    future: {
        hoverOnlyWhenSupported: true
    },
    theme: {
        extend: {
            borderRadius: {
                'custom': 'var(--radius)',
                'form': 'var(--form-radius)',
            },
            colors: {
                'body': customConfig?.color?.body || 'rgb(var(--body) / <alpha-value>)',
                'primary': customConfig?.color?.primary || 'rgb(var(--primary) / <alpha-value>)',
                'secondary': customConfig?.color?.secondary || 'rgb(var(--secondary) / <alpha-value>)',
                'light': customConfig?.color?.light || 'rgb(var(--light) / <alpha-value>)',
                'dark': customConfig?.color?.dark || 'rgb(var(--dark) / <alpha-value>)',
                'form': customConfig?.color?.form || 'rgb(var(--form) / <alpha-value>)'
            },
            height: {
                'form': 'var(--form-height)',
            }
        },
    },
    plugins: [],
}

Profil Ayarlarının Açıklamaları

Ayar Adı	Açıklama
editor.tabSize	Sekme genişliğini 4 boşluk olarak ayarlar.
editor.lineHeight	Satır yüksekliğini 1.7 olarak ayarlar.
editor.insertSpaces	Sekme yerine boşluk ekler.
files.trimTrailingWhitespace	Satır sonundaki boşlukları kaydetmez.
editor.trimAutoWhitespace	Otomatik boşlukları kaydetmez.
tailwindCSS.experimental.configFile	Tailwind CSS yapılandırma dosyasının yolunu belirtir.
editor.formatOnSave	Dosya kaydedildiğinde otomatik olarak biçimlendirir.
[twig]	Twig dosyaları için özel ayarlar.
tailwindCSS.includeLanguages	Twig dosyalarında Tailwind CSS desteği sağlar.
emmet.includeLanguages	Twig dosyalarında Emmet desteği sağlar.
tailwindCSS.emmetCompletions	Tailwind CSS için Emmet tamamlama önerilerini etkinleştirir.
prettier.tabWidth	Prettier kod biçimlendiricisinde sekme genişliğini 4 boşluk olarak ayarlar.
html.format.preserveNewLines	HTML dosyalarında yeni satırları korur.
html.format.wrapLineLength	HTML dosyalarında satır uzunluğu sınırını kaldırır.
html.format.indentInnerHtml	HTML içeriğini girintilemez.
files.associations	.twig dosyalarını Twig dili olarak tanımlar.

Profildeki Eklentiler ve Açıklamaları

Eklenti Adı	Açıklama
Auto Close Tag	HTML ve XML dosyalarında otomatik olarak kapanış etiketlerini ekler.
Auto Rename Tag	HTML/JSX etiketlerini yeniden adlandırırken açılış ve kapanış etiketlerini senkronize eder.
Code Spell Checker	Kod dosyalarında yazım hatalarını kontrol eder ve öneriler sunar.
GitHub Copilot	Yapay zeka destekli kod tamamlama ve öneriler sunar.
GitHub Copilot Chat	Kod yazarken yapay zeka ile sohbet ederek yardım almayı sağlar.
htmltagwrap	Seçili metni HTML etiketiyle hızlıca sarmayı sağlar.
Material Icon Theme	VSCode için modern ve görsel olarak zengin ikon teması sağlar.
Prettier - Code formatter	Kodunuzu otomatik olarak biçimlendirir ve okunabilirliğini artırır.
Remove empty lines	Dosyalardaki gereksiz boş satırları temizler.
Tailwind CSS IntelliSense	Tailwind CSS sınıfları için otomatik tamamlama ve hata kontrolü sağlar.
Twig Formatter	Twig dosyalarını biçimlendirir ve okunabilirliğini artırır.
Twig Language 2	Twig şablonları için dil desteği sağlar.
Twig Language Support	Twig dosyaları için sözdizimi vurgulama ve dil desteği sunar.

Profili İndir

T-Soft Front-end Dev.code-profile indirebilirsiniz.

VSCode Profili Kurulumu

1. Bağlantıdan önerilen VSCode profilini indirin: T-Soft Front-end Dev.code-profile
2. VSCode’u açın ve sol alt köşedeki dişli simgesine tıklayın.
3. “Ayarlar” menüsüne gidin ve “Profiller” sekmesini seçin.
4. “Profili İçe Aktar” seçeneğine tıklayın ve indirdiğiniz profil dosyasını seçin.
5. Profil yüklendikten sonra, tema geliştirme için gerekli eklentiler otomatik olarak yüklenecektir.