Dil Yapılandırmasını kullanarak düzenleyici davranışını özelleştirme

Dile özgü söz dizimi işlemlerini etkinleştirmek için Dil Yapılandırması'nı kullanarak Visual Studio düzenleyicisinde dile özgü özelleştirilmiş söz dizimi uygulayabilirsiniz. Dil Sunucusu'nu kullanmaya kıyasla, Dil Yapılandırması'nın kullanılması tüm işlemleri yerel olduğundan performansı artırabilir.

Dil Yapılandırması nedir?

Visual Studio, dil uzantıları aracılığıyla çeşitli programlama dilleri için akıllı düzenleme özellikleri sunar. Dil Yapılandırması, Dil Sunucusu Protokolü (LSP) kullanan sunucuları destekler ve Visual Studio düzenleyicisinin LSP sunucusuna zaman uyumsuz sorgu yapma gecikmesi olmadan biçimlendirme, renklendirme ve tamamlama kararları vermesine olanak tanıyan bildirim temelli veriler sağlar. Bildirim temelli dil özellikleri yapılandırma dosyalarında tanımlanır. Örneğin, Visual Studio ile birlikte sunulan HTML, CSS ve typescript-basic uzantıları aşağıdaki bildirim temelli dil özelliklerinin bir alt kümesini sunar:

• Sözdizimi vurgulama
• Kod parçacığı tamamlama
• Parantez eşleştirme
• Köşeli ayraç otomatik kapanma
• Yorum geçişi
• Otomatik girintileme

Visual Studio, uzantıların herhangi bir programlama dili için bir dil yapılandırması tanımlama özelliği sağlar. Dil yapılandırma dosyası, yorum geçişi, köşeli ayraç eşleştirme ve çevreleme gibi temel düzenleme özelliklerini denetler.

Dil Yapılandırması'nın kullanılması aşağıdakilere yardımcı olur:

• Kullanıcı yazarken eşzamanlı çalışma
• Basitlik: Normal ifadelere sahip kısa JSON dosyalarının bakımı karmaşık algoritmaya göre daha kolaydır
• Taşınabilirlik: Visual Studio Code ile Visual Studio arasında hiç veya en az değişiklik gerektirme

Ayrıca dil yapılandırma dosyaları, okunmasını kolay bir JSON dosyası aracılığıyla bazı temel yeniden düzenleme özelliklerini desteklemek için Visual Studio'yu genişletmenin kolay bir yolunu sağlar.

Visual Studio uzantısına Dil Yapılandırması desteği ekleme

Visual Studio uzantısına Dil Yapılandırması desteği eklemenin üç bölümü vardır:

1. VSIX projesi oluşturma
2. Dil Yapılandırma dosyası oluşturma
3. Dil bilgisi dosyası ekleme
4. pkgdef dosyasını güncelleştirme

Dil Yapılandırma Örneği'nde çalışan bir örneği keşfedebilirsiniz.

VSIX projesi oluşturma

Dil Yapılandırması'nı kullanarak bir dil hizmeti uzantısı oluşturmak için, önce VS örneğinde Visual Studio uzantısı geliştirme İş Yükü'nün yüklü olduğundan emin olun.

Ardından, Dosya>Yeni Projesi'ne giderek yeni bir VSIX projesi oluşturun, "vsix" araması yapın ve VSIX Projesi'ni arayın:

Dil yapılandırma dosyası oluşturma

Kendi dil yapılandırma dosyanızı oluştururken, JSON dosyasına hangi yönlerin ekleyebileceğinizi seçebilirsiniz. Örneğin, açıklama geçişini, ayraçların otomatik kapanmasını veya bu bölümde açıklanan kullanılabilir işlevlerin herhangi bir bileşimini desteklemeyi seçebilirsiniz.

Uzantınıza destek eklemek için önce bir dil yapılandırma dosyası oluşturursunuz. Dosyanın adı bir standarda uygun olmalıdır: dosya adındaki sözcükleri ayırmak için kısa çizgi kullanın ve ile language-configuration.jsonsona erdiğinden emin olun.

Aşağıdaki kodda örnek bir dil yapılandırma dosyası gösterilmektedir.

{
    "comments": {
      "lineComment": "***",
      "blockComment": ["{*", "*}"]
    },
    "brackets": [
      ["@", "@"],
      ["#", "#"],
      ["$", "$"],
      ["(", ")"]
    ],
    "autoClosingPairs": [
      { "open": "{", "close": "}" },
      { "open": "@", "close": "@" },
      { "open": "#", "close": "#" },
      { "open": "$", "close": "$" },
      { "open": "(", "close": ")" },
      { "open": "'", "close": "'", "notIn": ["string", "comment"] },
      { "open": "\"", "close": "\"", "notIn": ["string"] },
    ],
    "autoCloseBefore": ";:.,=}])>` \n\t",
    "surroundingPairs": [
      ["@", "@"],
      ["#", "#"],
      ["$", "$"],
      ["[", "]"],
      ["(", ")"],
      ["'", "'"],
      ["\"", "\""],
      ["`", "`"]
    ],
    "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)",
    "indentationRules": {
      "increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
      "decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\)\\}\\]].*$"
    }
  }

Yapılandırma ayarları

Aşağıdaki bölümlerde dil yapılandırma dosyasında kullanılabilen ayarlar açıklanmaktadır.

Yorum geçişi

Dil yapılandırma dosyaları, açıklama geçişi için iki komut sunar. Satır Açıklamasını Değiştir ve Blok Açıklamasını Aç/Kapat. Visual Studio'nun satır/blok açıklamalarını nasıl yapması gerektiğini denetlemek için comments.blockComment ve comments.lineComment belirtebilirsiniz.

{
  "comments": {
    "lineComment": "//",
    "blockComment": ["/*", "*/"]
  }
}

Bu ayar, Ctrl+, Ctrl+C tuşlarına bastığınızda Visual Studio metin düzenleyicisinin davranışını etkiler.

Köşeli ayraç tanımı

İmleci burada tanımlanan bir parantez içine taşıdığınız zaman, Visual Studio bu parantezi eşleştirilen öğesiyle birlikte vurgular.

{
  "brackets": [["{", "}"], ["[", "]"], ["(", ")"]]
}

Araçlar > Seçenekleri bölmesinde, ilgili ayar Tüm Ayarlar>> Ekran altında bulunan >seçeneğidir.

Otomatik kapanma

yazdığınızda ', Visual Studio bir çift tırnak oluşturur ve imleci ortaya koyar: '|'. Bu bölümde bu tür çiftler tanımlanmıştır.

{
  "autoClosingPairs": [
    { "open": "{", "close": "}" },
    { "open": "[", "close": "]" },
    { "open": "(", "close": ")" },
    { "open": "'", "close": "'", "notIn": ["string", "comment"] },
    { "open": "\"", "close": "\"", "notIn": ["string"] },
    { "open": "`", "close": "`", "notIn": ["string", "comment"] },
    { "open": "/**", "close": " */", "notIn": ["string"] }
  ]
}

anahtar, notIn bu özelliği belirli kod aralıklarında devre dışı bırakır. Örneğin, aşağıdaki kodu yazarken:

// ES6's Template String
`ES6's Template String`;

Tek tırnak işareti otomatik olarak kapatılmamıştır.

Özellik gerektirmeyen notIn çiftler de daha basit bir söz dizimi kullanabilir:

{
  "autoClosingPairs": [ ["{", "}"], ["[", "]"] ]
}

Otomatik Kapanmadan Önce

Varsayılan olarak, Visual Studio yalnızca imlecin hemen ardından boşluk varsa çiftleri otomatik kapatır. Bu nedenle, aşağıdaki JSX kodunu yazdığınızda { kendiliğinden kapanmaz:

const Component = () =>
  <div className={>
                  ^ Does not get autoclosed by default
  </div>

Ancak, bu tanım bu davranışı geçersiz kılar:

{
  "autoCloseBefore": ";:.,=}])>` \n\t"
}

Artık { öğesini >'den hemen önce girdiğinizde, Visual Studio onu } ile otomatik olarak kapatıyor.

Otomatik kuşatma

Visual Studio'da bir aralık seçip bir açma ayracı girdiğinizde, Visual Studio seçili içeriği bir çift köşeli ayraçla çevreler. Bu özelliğe Otomatik Yönlendirme adı verilir ve burada belirli bir dil için otomatik yönlendirme çiftlerini tanımlayabilirsiniz:

{
  "surroundingPairs": [
    ["{", "}"],
    ["[", "]"],
    ["(", ")"],
    ["'", "'"],
    ["\"", "\""],
    ["`", "`"]
  ]
}

Araçlar > Seçenekleri bölmesinde, ilgili ayar Tüm Ayarlar>> Ekran altında bulunan >seçeneğidir.

Sözcük deseni

wordPattern programlama dilinde bir sözcük olarak kabul edilenleri tanımlar. Kod önerisi özellikleri, ayarlanmışsa wordPattern sözcük sınırlarını belirlemek için bu ayarı kullanır.

{
  "wordPattern": "(-?\\d*\\.\\d\\w*)|([^\\`\\~\\!\\@\\#\\%\\^\\&\\*\\(\\)\\-\\=\\+\\[\\{\\]\\}\\\\\\|\\;\\:\\'\\\"\\,\\.\\<\\>\\/\\?\\s]+)"
}

Girinti kuralları

indentationRules, satırları yazarken, yapıştırırken ve taşırken veya Ctrl K, Ctrl+ (Belgeyi Biçimlendir) ve Ctrl+, Ctrl++F (Seçimi Biçimlendir) ile metni biçimlendirirken düzenleyicinin geçerli satırın veya sonraki satırın girintisini nasıl ayarlayacağını tanımlar.

{
  "indentationRules": {
    "increaseIndentPattern": "^((?!\\/\\/).)*(\\{[^}\"'`]*|\\([^)\"'`]*|\\[[^\\]\"'`]*)$",
    "decreaseIndentPattern": "^((?!.*?\\/\\*).*\\*/)?\\s*[\\)\\}\\]].*$"
  }
}

Örneğin, if (true) { ile increaseIndentPattern eşleşir, ardından açık köşeli parantez { sonrasında Enter tuşuna basarsanız, düzenleyici otomatik olarak bir kez girinti ekler ve kodunuz şu şekilde sonuçlanır:

if (true) {
  console.log();

Buna increaseIndentPattern ve decreaseIndentPatter ek olarak, iki başka girinti kuralı daha vardır.

• indentNextLinePattern - Bir çizgi bu desenle eşleşiyorsa, yalnızca sonraki satır bir kez girintilenmelidir.
• unIndentedLinePattern - Bir çizgi bu desenle eşleşiyorsa, girintisi değiştirilmemeli ve diğer kurallara göre değerlendirilmemelidir.

Programlama dili için ayarlanmış bir girinti kuralı yoksa, satır açık ayraçla bittiğinde düzenleyici satıra girinti ekler ve kapatma ayracı yazdığınızda girintiyi azaltır. Burada ayraç brackets tarafından tanımlanır.

Enter tuşuna basma

onEnterRules , düzenleyicide Enter tuşuna basıldığında değerlendirilecek kuralların listesini tanımlar.

{
  "onEnterRules": [{
    "beforeText": "^\\s*(?:def|class|for|if|elif|else|while|try|with|finally|except|async).*?:\\s*$",
    "action": { "indent": "indent" }
  }]
}

Enter tuşuna basıldığında, imlecin önceki, sonraki veya bir satırın üzerindeki metin aşağıdaki özelliklere göre denetlener:

• beforeText (zorunlu). İmleç öncesi metinle eşleşen normal ifade (geçerli satırla sınırlıdır).
• afterText. İmleç sonrasındaki metinle eşleşen normal ifade (geçerli satırla sınırlıdır).
• previousLineText. İmlecin üzerindeki bir satırdaki metinle eşleşen normal ifade.

Belirtilen tüm özellikler eşleşiyorsa, kural eşleşecek şekilde kabul edilir ve başka onEnterRules bir değerlendirme yapılmaz. aşağıdaki onEnterRule eylemleri belirtebilir:

• indent (zorunlu). Bunlardan none, indent, outdent, indentOutdent biri.
  • none , yeni satırın geçerli satırın girintisini devraldığı anlamına gelir.
  • indent , yeni satırın geçerli satıra göre girintili olduğu anlamına gelir.
  • outdent, yeni satırın mevcut satıra göre girintisiz olduğu anlamına gelir.
  • indentOutdent , biri girintili, diğeri girintisiz iki yeni satırın eklendiği anlamına gelir.
• appendText. Yeni satırdan sonra ve girintiden sonra eklenen bir dize.
• removeText. Yeni satırın girintisinden kaldırılacak karakter sayısı.

Özellik ayarları

Uzantı projesinde dosyanızın language-configuration.json aşağıdaki özellik ayarlarına sahip olduğundan emin olun:

Build Action = Content
Include in VSIX = True
Copy to output = Copy always 

(İsteğe bağlı) Dil bilgisi dosyası ekleme

Ayrıca, dil için söz dizimi renklendirmesi sağlamak üzere bir TextMate dil bilgisi dosyası ekleyebilirsiniz. TextMate dil bilgisi, normal ifadelerden oluşan yapılandırılmış bir koleksiyon olup plist (XML) veya JSON dosyaları olarak yazılır. Bkz. Dil Dil Bilgisi. Dile özgü bir dil bilgisi dosyası sağlamazsanız, yerleşik bir varsayılan ayar kullanılır.

Özel TextMate dil bilgisi veya tema dosyaları eklemek için şu adımları izleyin:

1. Uzantınızın içinde "Dilbilgileri" adlı bir klasör oluşturun (veya istediğiniz başka bir adla).

2. Grammars klasörünün içinde, *.tmlanguage , *.plist, *.tmthemeveya özel renklendirme sağlayan *.json dosyalarıekleyin.

   Tip

   .tmtheme dosyası, kapsamların Visual Studio sınıflandırmalarıyla (adlandırılmış renk anahtarları) nasıl eşlendirileceklerini tanımlar. Rehberlik için, %ProgramFiles(x86)%klasöründeki global .tmtheme dosyasına başvurabilirsiniz. Dosya, \Microsoft Visual Studio\<sürüm>\<SKU>\Common7\IDE\CommonExtensions\Microsoft\TextMate\Starterkit\Themesg dizininde bulunabilir.

pkgdef dosyası oluşturma

Ardından bir .pkgdef dosya oluşturun. Bir .pkgdef dosya, aksi takdirde sistem kayıt defterine eklenecek tüm kayıt bilgilerini içerir. Dosyalar hakkında pkgdef daha fazla bilgi için bkz. VSPackages'ı Kaydetme ve Pkgdef dosyası nedir? Ve neden?. Dosyanızda pkgdef dosya yolu, language-configuration.json dosya yolu ve dil bilgisi yolu olmalıdır. LSP gibi dil hizmetleri düzenleyici içerik türünü ister ve Bunu Dil Yapılandırması aracılığıyla alır. Bu bilgiler, geliştirme araçlarıyla iletişim kurabilen bir sunucu içindeki dile özgü zeka sağlar. Dil hizmeti mevcut olmadığında, Dil Yapılandırma Motoru TextMate dil bilgisini yedek olarak kullanır. Dosyanız .pkgdef şu şekilde görünmelidir:

[$RootKey$\TextMate\Repositories]
"AspNetCoreRazor="$PackageFolder$\Grammars

// Defines where the language configuration file for a given
// grammar name is (value of the ScopeName tag in the tmlanguage file).
[$RootKey$\TextMate\LanguageConfiguration\GrammarMapping]
"text.aspnetcorerazor"="$PackageFolder$\language-configuration.json"

// Defines where the language configuration file for a given
// language name is (partial value of the content type name).
[$RootKey$\TextMate\LanguageConfiguration\ContentTypeMapping]
"RazorLSP"="$PackageFolder$\language-configuration.json"

[$RootKey$\TextMate\LanguageConfiguration\GrammarMapping]
"text.html.basic"="$PackageFolder$\html-language-configuration.json"
"source.js"="$PackageFolder$\javascript-language-configuration.json"
"source.css"="$PackageFolder$\css-language-configuration.json"
"source.cs"="$PackageFolder$\csharp-language-configuration.json

Dosyanın özelliklerinin aşağıdaki gibi ayarlandığından pkgdef emin olun:

Build Action = Content
Include in VSIX = True
Copy to output = Copy always 

Visual Studio'da dil yapılandırma bilgilerinin erişilebilir olmasını sağlamak için dosyayı VSIX paketine ekleyin language-configuration . Bu dosya dahil edilirse Visual Studio Uzantısı ile birlikte gelir. Dosya, Visual Studio'ya bir Dil Yapılandırması'nın kullanılabilir olduğunu bildirir. Dosyayı eklemek için vsixmanifest öğesini düzenleyip PKGDEF def dosyanızı ekleyin, örneğin:

<Asset Type="Microsoft.VisualStudio.VsPackage" Path="Test.pkgdef"/> 

İlgili içerik

• Dil Sunucusu Protokolü

• Dil Yapılandırma Örneği