Monaco Düzenleyicisi'ni uygulamanızda Kusto Sorgu Dili desteğiyle tümleştirme
Monako Düzenleyicisi'ni Kusto Sorgu Dili desteğiyle (monaco-kusto) uygulamanıza tümleştirebilirsiniz. Monaco-kusto'yu uygulamanızla tümleştirerek tamamlama, renklendirme, yeniden düzenleme, yeniden adlandırma ve tanıma gitme gibi bir düzenleme deneyimi sunar. Kimlik doğrulaması, sorgu yürütme, sonuç görüntüleme ve şema keşfi için bir çözüm oluşturmanız gerekir. İhtiyaçlarınıza uygun kullanıcı deneyimine tam esneklik sunar.
Bu makalede Monaco Düzenleyicisi'ne monaco-kusto eklemeyi ve uygulamanıza tümleştirmeyi öğreneceksiniz. Paket GitHub'da ve npm'de kullanılabilir.
monaco-kusto'yunpm kullanarak uygulamanızla tümleştirmek için aşağıdaki adımları kullanın.
1. Adım: Monaco-kusto paketini yükleme
2. Adım: Uygulamanızı monaco-kusto paketini kullanacak şekilde ayarlama
3. Adım: Veritabanı şemanızı düzenleyiciye ekleme
Örnek projemizle tümleştirmeyi deneyin!
Önkoşullar
- Node.js (v6.10.3 veya üzeri)
monaco-kusto paketini yükleme
Monaco Editor npm paketini yükleyin:
npm i monaco-editor
Not
Yerel Monako Düzenleyicisi'ni özelleştirmek için bkz. Monaco Düzenleyicisi GitHub deposu.
monaco-kusto npm paketini yükleyin:
npm i @kusto/monaco-kusto
Uygulamanızı monaco-kusto paketini kullanacak şekilde ayarlama
Uygulamanızı aşağıdaki yöntemlerden birini kullanarak monaco-kusto kullanacak şekilde ayarlayabilirsiniz:
index.html dosyanız gibi Monaco Düzenleyicisi'nin kullanıldığı sayfalara aşağıdaki HTML'yi ekleyin. Bunlar, paketin üzerinde
kusto-language-service
sahip olduğu bir bağımlılık nedeniyle gereklidir.<script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/bridge.min.js"></script> <script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/kusto.javascript.client.min.js"></script> <script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/newtonsoft.json.min.js"></script> <script src="%PUBLIC_URL%/monaco-editor/min/vs/language/kusto/Kusto.Language.Bridge.min.js"></script>
Monaco ve monaco-kusto paketlerinden statik dosyaları web sunucunuzdaki monaco-editor klasörüne kopyalayın. Uygulamanızın bu statik dosyalara erişmesi gerekir.
Bunları yüklemek için monaco kullanın. Örnekler için örneklere bakın.
Veritabanı şemanızı düzenleyiciye ekleme
monaco-kusto paketi, veritabanı şemanızı düzenleyiciye eklemek için bir yol sağlar. Şema, düzenleyicinin otomatik tamamlama önerileri ve diğer özellikleri sağlamasına olanak tanır.
Şemayı tanımlamak için aşağıdaki yapıyı kullanın:
const schema = {... <YOUR_DATABASE_SCHEMA> ...};
export function setSchema(editor) {
window.monaco.languages.kusto.getKustoWorker().then((workerAccessor) => {
const model = editor.getModel();
workerAccessor(model.uri).then((worker) => {
//EITHER: Set schema from a show schema command
// worker.setSchemaFromShowSchema(
// schema,
// clusterURI,
// database
// );
//OR: Set schema from a manually created schema
// worker.setSchema(schema);
});
});
}
Veritabanı şemanızı almak için aşağıdaki yöntemlerden birini kullanabilirsiniz:
Azure Veri Gezgini web kullanıcı arabiriminin sol menüsünde Sorgu'yu seçin.
Şema oluşturmak istediğiniz veritabanını seçin.
Sorgu penceresinde aşağıdaki sorguyu çalıştırın:
.show schema as json
Sorgunun sonucunu kopyalayın ve şema sabiti olarak yapıştırın. Sorgunun sonucu veritabanlarının listesidir (schema.ts dosyasındaki arabirime
Result
bakın).Düzenleyicide
setSchemaFromShowSchema()
şemayı ayarlamak için yöntemini kullanın. Ayrıca düzenleyicide kullanılacak küme URI'sini ve veritabanının adını belirtmelisiniz.
Örnek proje
Monaco-kusto paketini kullanan örnek bir proje bulabilirsiniz. Örneği kullanmak için monaco-kusto GitHub deposunu kopyalayın. Örneği samples/react klasöründe bulabilirsiniz.
Örnek projenizi ayarlama ve test etme
Kopyalanan deponun kökünden aşağıdaki komutları çalıştırın:
Bağımlılıkları yükleyin ve projeyi derleyin:
npm install
Projenin çalıştığını doğrulayın. Başarılı olursa index.html açılır.
npm run watch
İlgili içerik
Geri Bildirim
https://aka.ms/ContentUserFeedback.
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz.Gönderin ve geri bildirimi görüntüleyin