Geli\u015ftiricilerin g\u00fcnl\u00fck kod yazma deneyimini k\u00f6kten de\u011fi\u015ftiren Dil Sunucusu Protokol\u00fc (LSP), modern IDE’lerin ve kod edit\u00f6rlerinin vazge\u00e7ilmez bir par\u00e7as\u0131 haline geldi. \u00d6zellikle kod tamamlama, yani “completion” \u00f6zelli\u011fi, geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131rken hatalar\u0131 azaltma konusunda kilit rol oynar. Peki, kendi dil sunucunuzu olu\u015ftururken bu temel \u00f6zelli\u011fi nas\u0131l entegre edersiniz ve geli\u015ftiricilere nas\u0131l p\u00fcr\u00fczs\u00fcz bir deneyim sunars\u0131n\u0131z? Bu makalede, Language Server Protocol’\u00fcn temel tamamlama mekanizmalar\u0131n\u0131 derinlemesine inceleyecek, ad\u0131m ad\u0131m uygulamal\u0131 \u00f6rneklerle kendi dil sunucunuzda bu \u00f6zelli\u011fi nas\u0131l hayata ge\u00e7irebilece\u011finizi \u00f6\u011freneceksiniz.<\/p>\n
G\u00fcn\u00fcm\u00fcz yaz\u0131l\u0131m geli\u015ftirme d\u00fcnyas\u0131nda, kod edit\u00f6rleri ve entegre geli\u015ftirme ortamlar\u0131 (IDE’ler), sunduklar\u0131 ak\u0131ll\u0131 \u00f6zelliklerle geli\u015ftiricilerin verimlili\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rmaktad\u0131r. Eskiden her IDE’nin veya edit\u00f6r\u00fcn her programlama dili i\u00e7in kendi \u00f6zel eklentisini yazmas\u0131 gerekirken, bu durum hem kaynak israf\u0131na yol a\u00e7\u0131yor hem de tutars\u0131z bir geli\u015ftirme deneyimi sunuyordu. \u0130\u015fte tam da bu noktada, Microsoft taraf\u0131ndan geli\u015ftirilen Language Server Protocol (LSP), sekt\u00f6re standart bir \u00e7\u00f6z\u00fcm getirerek adeta bir devrim yaratt\u0131. LSP, dil odakl\u0131 \u00f6zelliklerin (kod tamamlama, tan\u0131ma gitme, referans bulma, yeniden adland\u0131rma vb.) dil sunucular\u0131 ad\u0131 verilen ayr\u0131 bir i\u015flemde y\u00fcr\u00fct\u00fclmesini ve edit\u00f6rlerle (istemciler) standart bir JSON-RPC tabanl\u0131 protokol \u00fczerinden ileti\u015fim kurmas\u0131n\u0131 sa\u011flar. Bu sayede, tek bir dil sunucusu birden fazla edit\u00f6r (VS Code, Sublime Text, Vim, Emacs vb.) taraf\u0131ndan kullan\u0131labilir hale gelirken, geli\u015ftiriciler de sevdikleri edit\u00f6rde ayn\u0131 zengin dil \u00f6zelliklerine eri\u015febilirler.<\/p>\n
LSP’nin sundu\u011fu \u00f6zellikler aras\u0131nda belki de en \u00e7ok kullan\u0131lan\u0131 ve geli\u015ftirici deneyimi a\u00e7\u0131s\u0131ndan en kritik olan\u0131 “kod tamamlama” (completion) \u00f6zelli\u011fidir. Klavyede birka\u00e7 harf yazd\u0131\u011f\u0131n\u0131zda, edit\u00f6r\u00fcn\u00fcz\u00fcn size ilgili anahtar kelimeleri, de\u011fi\u015fkenleri, fonksiyonlar\u0131 veya nesne \u00fcyelerini otomatik olarak \u00f6nermesi, hem yaz\u0131m hatalar\u0131n\u0131 azalt\u0131r hem de API’leri veya s\u00f6zdizimini s\u00fcrekli dok\u00fcmantasyonda arama ihtiyac\u0131n\u0131 ortadan kald\u0131r\u0131r. Bu, \u00f6zellikle yeni bir k\u00fct\u00fcphane \u00f6\u011frenirken veya karma\u015f\u0131k bir kod taban\u0131nda gezinirken paha bi\u00e7ilmez bir kolayl\u0131k sunar. Temel tamamlama, yani ba\u011flama dayal\u0131 olarak statik anahtar kelime veya tan\u0131mlay\u0131c\u0131 \u00f6nerileri sunma, bir dil sunucusunun olmazsa olmaz\u0131d\u0131r. \u00d6rne\u011fin, “con” yazd\u0131\u011f\u0131n\u0131zda Bir dil sunucusunda temel tamamlama \u00f6zelli\u011finin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak, bu \u00f6zelli\u011fi kendi projenize entegre etmeden \u00f6nceki en \u00f6nemli ad\u0131md\u0131r. Bu s\u00fcre\u00e7, temelde istemci (kod edit\u00f6r\u00fc) ile sunucu (dil sunucusu) aras\u0131ndaki s\u00fcrekli bir diyalog \u00fczerine kuruludur ve Language Server Protocol bu diyalo\u011fun dilini standartla\u015ft\u0131r\u0131r. Geli\u015ftirici kod yazarken, belirli bir tu\u015fa bast\u0131\u011f\u0131nda (\u00f6rne\u011fin, bir nokta Bu iste\u011fi daha yak\u0131ndan inceleyecek olursak, istemcinin sunucuya g\u00f6nderdi\u011fi mesajlar Sunucu bu iste\u011fi ald\u0131\u011f\u0131nda, \u00f6ncelikle ilgili dosyan\u0131n i\u00e7eri\u011fini al\u0131r ve imle\u00e7 konumunu kullanarak o noktadaki metin ve ba\u011flam analizini yapar. \u00d6rne\u011fin, kullan\u0131c\u0131n\u0131n “co” yazd\u0131\u011f\u0131n\u0131 varsayal\u0131m. Sunucu, imle\u00e7ten \u00f6nceki metni kontrol eder ve bu k\u0131sma uyan anahtar kelimeleri, \u00f6nceden tan\u0131mlanm\u0131\u015f de\u011fi\u015fkenleri veya fonksiyon adlar\u0131n\u0131 arar. Buldu\u011fu potansiyel tamamlama \u00f6nerilerini Her bir Kendi dil sunucunuzu olu\u015ftururken, Language Server Protocol (LSP) standartlar\u0131na uygun bir temel tamamlama \u00f6zelli\u011fi entegre etmek, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmenin kritik bir ad\u0131m\u0131d\u0131r. Bu b\u00f6l\u00fcmde, bir LSP sunucusunda temel tamamlama \u00f6zelli\u011fini ad\u0131m ad\u0131m nas\u0131l uygulayaca\u011f\u0131m\u0131z\u0131 ve bu s\u00fcrecin arkas\u0131ndaki mant\u0131\u011f\u0131 a\u00e7\u0131klayaca\u011f\u0131z. Genellikle Node.js ve TypeScript tabanl\u0131 \u00d6ncelikle, bir LSP sunucusunun temel yap\u0131s\u0131n\u0131 kurmam\u0131z ve Ba\u015flang\u0131\u00e7 olarak, sunucunuzun LSP istemcisine “tamamlama deste\u011fi” sundu\u011funu bildirmesi gerekir. Bu, genellikle sunucu ba\u015flat\u0131l\u0131rken g\u00f6nderilen <\/code><\/p>\n Bu yap\u0131land\u0131rman\u0131n ard\u0131ndan, <\/code><\/p>\n Yukar\u0131daki kod blo\u011funda, Basit <\/code><\/p>\n Bu alanlar\u0131 etkin bir \u015fekilde kullanarak, dil sunucunuz sadece do\u011fru \u00f6nerileri sunmakla kalmaz, ayn\u0131 zamanda bu \u00f6nerilerin anla\u015f\u0131lmas\u0131n\u0131 ve etkili bir \u015fekilde kullan\u0131lmas\u0131n\u0131 da sa\u011flar.<\/p>\n Uzman \u0130pucu: Tamamlama \u00f6\u011felerini zenginle\u015ftirirken, Temel tamamlama, bir dil sunucusunun ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r, ancak ger\u00e7ek d\u00fcnya projelerinde geli\u015ftiricilerin beklentileri \u00e7ok daha fazlas\u0131n\u0131 i\u00e7erir. \u0130leri d\u00fczey tamamlama senaryolar\u0131, dilin s\u00f6zdizimini, semanti\u011fini ve hatta projenin t\u00fcm ba\u011flam\u0131n\u0131 dikkate alarak daha ak\u0131ll\u0131 ve ilgili \u00f6neriler sunar. Bu t\u00fcr \u00f6zellikler, geli\u015ftirici verimlili\u011fini katlayarak art\u0131rabilir.<\/p>\n Bir dil sunucusunun ba\u011flam duyarl\u0131 tamamlama yetene\u011fi, sadece geleneksel programlama dilleriyle s\u0131n\u0131rl\u0131 de\u011fildir. \u00d6rne\u011fin, bir JSON dosyas\u0131n\u0131 d\u00fczenlerken, bir Diyelim ki bir <\/code> Uzman \u0130pucu: B\u00fcy\u00fck projelerde veya kaynak yo\u011fun dillerde, tamamlama \u00f6nerilerini hesaplamak zaman alabilir. Bu durumda, Bu ileri d\u00fczey yakla\u015f\u0131mlar ve performans ipu\u00e7lar\u0131, bir dil sunucusunun sadece fonksiyonel olmas\u0131n\u0131 de\u011fil, ayn\u0131 zamanda geli\u015ftiriciler i\u00e7in h\u0131zl\u0131 ve duyarl\u0131 bir ara\u00e7 olmas\u0131n\u0131 sa\u011flar.<\/p>\n Bir programlama dili sunucusunun temel g\u00f6revi, belirli bir dilin s\u00f6zdizimi ve semanti\u011fi hakk\u0131nda geli\u015ftiricilere bilgi sa\u011flamakt\u0131r. Peki, bu ba\u011flamda \"mobil uyumluluk\" ve \"medya sorgular\u0131\" neden \u00f6nemli bir tart\u0131\u015fma konusu haline gelir? Her ne kadar Dil Sunucusu Protokol\u00fc (LSP) do\u011frudan mobil uygulama geli\u015ftirme veya responsive tasar\u0131m ara\u00e7lar\u0131 sunmasa da, web tabanl\u0131 diller (HTML, CSS, JavaScript) i\u00e7in geli\u015ftirilen LSP sunucular\u0131, geli\u015ftiricilerin bu alandaki g\u00f6revlerini kolayla\u015ft\u0131rabilir ve dolayl\u0131 yoldan mobil uyumlu kod yaz\u0131m\u0131na katk\u0131da bulunabilir.<\/p>\n Modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri olan responsive tasar\u0131m, farkl\u0131 ekran boyutlar\u0131na ve cihazlara (masa\u00fcst\u00fc, tablet, mobil) uyum sa\u011flayabilen web sayfalar\u0131 olu\u015fturma prati\u011fidir. Bu uyum genellikle CSS i\u00e7inde Bir CSS dil sunucusu, medya sorgular\u0131n\u0131n yaz\u0131m\u0131n\u0131 ve y\u00f6netimini geli\u015ftiriciler i\u00e7in \u00e7ok daha kolay hale getirebilir. \u0130\u015fte LSP'nin bu noktada nas\u0131l bir rol oynayabilece\u011fine dair baz\u0131 senaryolar:<\/p>\n A\u015fa\u011f\u0131daki CSS medya sorgusu \u00f6rne\u011fi, bir LSP sunucusunun bu ba\u011flamda nas\u0131l de\u011fer katabilece\u011fini g\u00f6stermektedir:<\/p>\n <\/code> Dil Sunucusu Protokol\u00fc (LSP), modern geli\u015ftirme ortamlar\u0131n\u0131n vazge\u00e7ilmez bir par\u00e7as\u0131 haline gelmi\u015f, farkl\u0131 edit\u00f6rler ve IDE'ler aras\u0131nda tutarl\u0131 ve zengin bir geli\u015ftirici deneyimi sunman\u0131n anahtar\u0131 olmu\u015ftur. Bu makalede, LSP'nin en temel ve en \u00e7ok kullan\u0131lan \u00f6zelliklerinden biri olan \"temel tamamlama\" (basic completion) \u00fczerine odakland\u0131k. console.log<\/code> veya const<\/code> gibi se\u00e7eneklerin sunulmas\u0131, geli\u015ftiricinin d\u00fc\u015f\u00fcnme h\u0131z\u0131nda kod yazmas\u0131na olanak tan\u0131r. Bir dil sunucusu geli\u015ftirirken bu \u00f6zelli\u011fi do\u011fru ve verimli bir \u015fekilde uygulamak, kullan\u0131c\u0131lar\u0131n dilinizi benimsemesi ve \u00fcretken olabilmesi i\u00e7in temel bir ad\u0131md\u0131r. Bu \u00e7er\u00e7evede, LSP’nin sa\u011flad\u0131\u011f\u0131 standart textDocument\/completion<\/code> iste\u011fi, istemci ve sunucu aras\u0131ndaki bu etkile\u015fimi tan\u0131mlar. Sunucu, kullan\u0131c\u0131n\u0131n mevcut imle\u00e7 konumuna ve yazd\u0131\u011f\u0131 metne g\u00f6re ilgili tamamlama \u00f6\u011felerini hesaplar ve istemciye geri g\u00f6nderir. \u0130stemci de bu \u00f6\u011feleri kullan\u0131c\u0131 aray\u00fcz\u00fcnde \u015f\u0131k bir \u015fekilde sunar. Bu mekanizma sayesinde, dil sunucular\u0131 geli\u015ftirici \u00fcretkenli\u011fini do\u011frudan etkileyen g\u00fc\u00e7l\u00fc ara\u00e7lara d\u00f6n\u00fc\u015f\u00fcr.<\/p>\nTemel Tamamlama Mekanizmas\u0131n\u0131 Anlamak: Bir Bak\u0131\u015fta \u0130\u015f Ak\u0131\u015f\u0131<\/h2>\n
.<\/code> veya bir bo\u015fluk) ya da edit\u00f6r\u00fcn belirledi\u011fi bir gecikme s\u00fcresi sonunda, istemci dil sunucusuna bir “tamamlama iste\u011fi” g\u00f6nderir. Bu istek, LSP’de textDocument\/completion<\/code> olarak adland\u0131r\u0131l\u0131r.<\/p>\nCompletionParams<\/code> ad\u0131 verilen bir nesne i\u00e7erir. Bu nesne, sunucunun tamamlama \u00f6nerilerini do\u011fru bir \u015fekilde hesaplamas\u0131 i\u00e7in gerekli olan kritik bilgileri ta\u015f\u0131r. CompletionParams<\/code> genellikle \u015fu anahtar alanlar\u0131 bar\u0131nd\u0131r\u0131r:<\/p>\n\n
textDocument<\/code>: Tamamlama iste\u011finin yap\u0131ld\u0131\u011f\u0131 a\u00e7\u0131k dosyan\u0131n URI’sini (benzersiz kaynak tan\u0131mlay\u0131c\u0131s\u0131) i\u00e7erir. Bu, sunucunun do\u011fru dosyay\u0131 bulup i\u00e7eri\u011fini i\u015flemesini sa\u011flar.<\/li>\nposition<\/code>: \u0130mlecin belgedeki tam konumunu (sat\u0131r ve s\u00fctun numaralar\u0131) belirtir. Bu bilgi, sunucunun imle\u00e7ten \u00f6nceki metni analiz ederek hangi \u00f6nerilerin relevant oldu\u011funu belirlemesi i\u00e7in hayati \u00f6neme sahiptir.<\/li>\ncontext<\/code> (iste\u011fe ba\u011fl\u0131): Tamamlama iste\u011finin ne t\u00fcr bir ba\u011flamda yap\u0131ld\u0131\u011f\u0131n\u0131 belirten ek bilgiler i\u00e7erebilir. \u00d6rne\u011fin, bir tetikleyici karakter (triggerCharacter<\/code>, e.g., .<\/code>, :<\/code>), bir tetikleyici neden (triggerKind<\/code>, e.g., Invoked<\/code>, TriggerCharacter<\/code>, ContentChange<\/code>) gibi detaylar, sunucunun daha ak\u0131ll\u0131 \u00f6neriler sunmas\u0131na yard\u0131mc\u0131 olabilir.<\/li>\n<\/ul>\nCompletionList<\/code> ad\u0131 verilen bir nesne i\u00e7inde istemciye geri g\u00f6nderir.<\/p>\nCompletionList<\/code> nesnesi genellikle iki temel alan\u0131 i\u00e7erir:<\/p>\n\n
items<\/code>: Bu, CompletionItem<\/code> tipindeki \u00f6nerilerin bir dizisidir. Her bir CompletionItem<\/code>, kullan\u0131c\u0131ya g\u00f6sterilecek tek bir tamamlama se\u00e7ene\u011fini temsil eder.<\/li>\nisIncomplete<\/code> (iste\u011fe ba\u011fl\u0131): Sunucunun t\u00fcm olas\u0131 sonu\u00e7lar\u0131 d\u00f6nd\u00fcr\u00fcp d\u00f6nd\u00fcrmedi\u011fini belirten bir boolean de\u011feridir. E\u011fer true<\/code> ise, istemci daha fazla sonu\u00e7 i\u00e7in tekrar istek g\u00f6ndermeye devam edebilir.<\/li>\n<\/ul>\nCompletionItem<\/code>, kullan\u0131c\u0131n\u0131n g\u00f6rd\u00fc\u011f\u00fc etiketi (label<\/code>), \u00f6nerinin tipini (kind<\/code> – anahtar kelime, de\u011fi\u015fken, fonksiyon vb.), daha fazla bilgi i\u00e7in detay (detail<\/code>) ve dok\u00fcmantasyon (documentation<\/code>), s\u0131ralama i\u00e7in sortText<\/code> ve filtreleme i\u00e7in filterText<\/code> gibi bir\u00e7ok alan\u0131 i\u00e7erebilir. Bu zengin yap\u0131s\u0131 sayesinde, dil sunucular\u0131 sadece basit metin \u00f6nerileri sunmakla kalmaz, ayn\u0131 zamanda \u00f6nerilen \u00f6\u011fe hakk\u0131nda ba\u011flamsal bilgi ve a\u00e7\u0131klamalar da sa\u011flayarak geli\u015ftiricinin karar verme s\u00fcrecini destekler. \u00d6rnek olarak, JavaScript’te console.<\/code> yaz\u0131ld\u0131\u011f\u0131nda, LSP sunucusu log<\/code>, warn<\/code>, error<\/code> gibi metotlar\u0131, her birinin k\u0131sa bir a\u00e7\u0131klamas\u0131 ve kullan\u0131m \u015fekliyle birlikte \u00f6nerebilir. Bu entegre i\u015f ak\u0131\u015f\u0131, geli\u015ftiricilerin daha h\u0131zl\u0131, daha do\u011fru ve daha verimli bir \u015fekilde kod yazmas\u0131na olanak tan\u0131r.<\/p>\nDil Sunucunuzda Temel Tamamlama \u00d6zelli\u011fini Ad\u0131m Ad\u0131m Geli\u015ftirmek<\/h2>\n
vscode-languageserver<\/code> k\u00fct\u00fcphanesi, LSP sunucular\u0131 geli\u015ftirmek i\u00e7in yayg\u0131n olarak kullan\u0131l\u0131r. Ancak temel prensipler, kulland\u0131\u011f\u0131n\u0131z programlama dilinden veya k\u00fct\u00fcphaneden ba\u011f\u0131ms\u0131z olarak uygulanabilir.<\/p>\nLSP Sunucusu Kurulumu ve
textDocument\/completion<\/code> \u0130\u015fleyicisi<\/h3>\ntextDocument\/completion<\/code> iste\u011fini i\u015flemek i\u00e7in gerekli altyap\u0131y\u0131 olu\u015fturmam\u0131z gerekiyor. Bir LSP sunucusu, istemciden gelen mesajlar\u0131 dinler ve ilgili i\u015fleyicileri \u00e7a\u011f\u0131r\u0131r. Tamamlama \u00f6zelli\u011fi i\u00e7in, sunucunun onCompletion<\/code> olay\u0131n\u0131 dinlemesi ve gelen isteklere yan\u0131t vermesi gerekir.<\/p>\ninitialize<\/code> yan\u0131t\u0131nda belirtilir. capabilities<\/code> (yetenekler) nesnesinin alt\u0131nda, completionProvider<\/code> alan\u0131 true<\/code> olarak ayarlan\u0131r ve iste\u011fe ba\u011fl\u0131 olarak hangi karakterlerin tamamlama tetikleyicisi oldu\u011funu (triggerCharacters<\/code>) belirtebilirsiniz. \u00d6rne\u011fin, .<\/code> karakteri, nesne \u00fcyelerini tamamlama i\u00e7in s\u0131k\u00e7a kullan\u0131lan bir tetikleyicidir.<\/p>\n\nconnection.onInitialize((params: InitializeParams) => {\n \/\/ ... di\u011fer ba\u015flang\u0131\u00e7 ayarlar\u0131 ...\n return {\n capabilities: {\n textDocumentSync: TextDocumentSyncKind.Incremental,\n completionProvider: {\n resolveProvider: true, \/\/ Tamamlama \u00f6\u011felerini sonradan \u00e7\u00f6z\u00fcmlemeye izin verir\n triggerCharacters: ['.', ':', '\"', '\/'] \/\/ Bu karakterler completion'\u0131 tetikleyebilir\n },\n \/\/ ... di\u011fer yetenekler ...\n }\n };\n});\n<\/pre>\nconnection.onCompletion<\/code> metodunu kullanarak gelen tamamlama isteklerini i\u015fleyecek bir fonksiyon tan\u0131mlayabiliriz. Bu fonksiyon, CompletionParams<\/code> t\u00fcr\u00fcnde bir parametre al\u0131r ve CompletionList<\/code> t\u00fcr\u00fcnde bir nesne d\u00f6nd\u00fcrmesi beklenir.<\/p>\n\nimport {\n createConnection,\n TextDocuments,\n ProposedFeatures,\n CompletionItem,\n CompletionItemKind,\n TextDocumentPositionParams,\n CompletionList,\n InitializeParams\n} from 'vscode-languageserver\/node';\n\nimport { TextDocument } from 'vscode-languageserver-textdocument';\n\n\/\/ Bir ba\u011flant\u0131 olu\u015fturun. Bu ba\u011flant\u0131, Node.js IPC \u00fczerinden istemci ile ileti\u015fim kurar.\nconst connection = createConnection(ProposedFeatures.all);\n\n\/\/ Yaln\u0131zca a\u00e7\u0131k metin belgelerinin i\u00e7eri\u011fini y\u00f6neten bir belge y\u00f6neticisi olu\u015fturun\nconst documents: TextDocumentsonCompletion<\/code> i\u015fleyicisi, kullan\u0131c\u0131n\u0131n imle\u00e7 konumundan \u00f6nceki sat\u0131r\u0131 (line<\/code>) al\u0131r ve bu metin par\u00e7as\u0131na g\u00f6re basit tamamlama mant\u0131\u011f\u0131 uygular. \u00d6rne\u011fin, \"my\" ile biten bir metin varsa mycomponent<\/code> ve myfunction<\/code> gibi \u00f6neriler sunulur. Bu, olduk\u00e7a temel bir yakla\u015f\u0131md\u0131r ve ger\u00e7ek bir dil sunucusunda, dilin s\u00f6zdizim a\u011fac\u0131 (AST) veya sembol tablosu (symbol table) gibi daha karma\u015f\u0131k veri yap\u0131lar\u0131 kullan\u0131larak ba\u011flama duyarl\u0131 tamamlama \u00f6nerileri \u00fcretilir. CompletionItemKind<\/code> enum'unu kullanarak \u00f6nerilerin t\u00fcr\u00fcn\u00fc (anahtar kelime, fonksiyon, s\u0131n\u0131f vb.) belirtmek, edit\u00f6r\u00fcn bu \u00f6nerileri g\u00f6rsel olarak daha anla\u015f\u0131l\u0131r hale getirmesine yard\u0131mc\u0131 olur. \u00d6rne\u011fin, fonksiyonlar i\u00e7in bir f<\/code> simgesi, de\u011fi\u015fkenler i\u00e7in bir v<\/code> simgesi g\u00f6sterebilir. detail<\/code> ve documentation<\/code> alanlar\u0131 ise kullan\u0131c\u0131n\u0131n se\u00e7ti\u011fi tamamlama \u00f6\u011fesi hakk\u0131nda an\u0131nda daha fazla bilgi edinmesini sa\u011flar. \u00d6zellikle onCompletionResolve<\/code> i\u015fleyicisi, tamamlama listesi ilk y\u00fcklendi\u011finde hafif kalmas\u0131n\u0131 sa\u011flayarak performans\u0131 art\u0131r\u0131r. Detayl\u0131 dok\u00fcmantasyon gibi daha a\u011f\u0131r bilgiler, kullan\u0131c\u0131 bir \u00f6\u011fenin \u00fczerine geldi\u011finde veya onu se\u00e7ti\u011finde asenkron olarak y\u00fcklenir. Bu strateji, b\u00fcy\u00fck kod tabanlar\u0131 veya \u00e7ok say\u0131da tamamlama \u00f6\u011fesi i\u00e7eren diller i\u00e7in hayati \u00f6neme sahiptir.<\/p>\nTamamlama \u00d6\u011felerini Zenginle\u015ftirme:
detail<\/code>, documentation<\/code> ve kind<\/code><\/h3>\nlabel<\/code> alan\u0131n\u0131n \u00f6tesinde, CompletionItem<\/code> nesnesi, tamamlama \u00f6nerilerini \u00e7ok daha bilgilendirici ve kullan\u0131c\u0131 dostu hale getiren bir dizi zenginle\u015ftirme alan\u0131 sunar:<\/p>\n\n
kind<\/code>: \u00d6nerilen \u00f6\u011fenin tipini (CompletionItemKind<\/code> enum'undan: Text<\/code>, Method<\/code>, Function<\/code>, Constructor<\/code>, Field<\/code>, Variable<\/code>, Class<\/code>, Interface<\/code>, Module<\/code>, Property<\/code>, Unit<\/code>, Value<\/code>, Enum<\/code>, Keyword<\/code>, Snippet<\/code> vb.) belirtir. Bu, edit\u00f6r\u00fcn aray\u00fcz\u00fcnde ilgili simgeleri g\u00f6stermesini sa\u011flar.<\/li>\ndetail<\/code>: \u00d6nerilen \u00f6\u011fe hakk\u0131nda k\u0131sa bir a\u00e7\u0131klama veya tip bilgisi sa\u011flar. \u00d6rne\u011fin, bir fonksiyon i\u00e7in parametre tipleri veya d\u00f6n\u00fc\u015f tipi burada g\u00f6sterilebilir.<\/li>\ndocumentation<\/code>: \u00d6\u011fe hakk\u0131nda daha uzun ve detayl\u0131 bir a\u00e7\u0131klama sunar. Bu genellikle Markdown format\u0131nda olabilir ve edit\u00f6r taraf\u0131ndan zengin metin olarak i\u015flenir. Bu alan, API referanslar\u0131n\u0131 do\u011frudan edit\u00f6re getirerek geli\u015ftiricinin ba\u011flam de\u011fi\u015ftirmeden bilgi edinmesini sa\u011flar.<\/li>\nsortText<\/code> ve filterText<\/code>: Bu alanlar, tamamlama listesinin nas\u0131l s\u0131ralanaca\u011f\u0131n\u0131 ve filtrelenece\u011fini kontrol eder. sortText<\/code> alfabetik s\u0131ralama d\u0131\u015f\u0131nda \u00f6zel bir s\u0131ralama d\u00fczeni sa\u011flamak i\u00e7in kullan\u0131l\u0131rken, filterText<\/code> kullan\u0131c\u0131n\u0131n yazd\u0131\u011f\u0131 metinle e\u015fle\u015fme mant\u0131\u011f\u0131n\u0131 \u00f6zelle\u015ftirmek i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\n\n\/\/ Geli\u015fmi\u015f tamamlama \u00f6\u011fesi \u00f6rne\u011fi\ncompletions.push({\n label: 'log',\n kind: CompletionItemKind.Method,\n detail: '(method) console.log(...args: any[]): void', \/\/ Detayl\u0131 tip bilgisi\n documentation: {\n kind: 'markdown',\n value: 'Bir mesaj\u0131 konsola yazar. Desteklenen seviyeler: log<\/code>, info<\/code>, warn<\/code>, error<\/code>.'\n },\n insertText: 'log(${1:message})', \/\/ Snippet tamamlama i\u00e7in\n insertTextFormat: InsertTextFormat.Snippet,\n sortText: '_log', \/\/ 'log' di\u011ferlerinden \u00f6nce gelsin diye\n filterText: 'log' \/\/ Kullan\u0131c\u0131n\u0131n 'log' yazmas\u0131yla e\u015fle\u015fsin\n});\n<\/pre>\n\n
insertText<\/code> ve insertTextFormat<\/code> alanlar\u0131n\u0131 kullanarak kod par\u00e7ac\u0131klar\u0131 (snippets) sunabilirsiniz. Bu sayede, kullan\u0131c\u0131 bir tamamlama \u00f6\u011fesini se\u00e7ti\u011finde, sadece bir kelime de\u011fil, \u00f6nceden tan\u0131mlanm\u0131\u015f bir kod blo\u011fu otomatik olarak eklenir. \u00d6zellikle fonksiyon \u00e7a\u011fr\u0131lar\u0131 veya karma\u015f\u0131k yap\u0131lar\u0131n h\u0131zl\u0131ca yaz\u0131lmas\u0131 i\u00e7in bu \u00f6zellik b\u00fcy\u00fck kolayl\u0131k sa\u011flar.<\/p>\n<\/blockquote>\n\u0130leri D\u00fczey Tamamlama Senaryolar\u0131 ve Performans \u0130pu\u00e7lar\u0131<\/h2>\n
\n
.<\/code>) karakteri yaz\u0131ld\u0131\u011f\u0131nda, LSP sunucusu o nesnenin sadece eri\u015filebilir \u00f6zelliklerini ve metotlar\u0131n\u0131 \u00f6nermelidir. Bu, dilin bir Soyut S\u00f6zdizimi A\u011fac\u0131'n\u0131 (AST - Abstract Syntax Tree) veya sembol tablosunu (symbol table) kullanarak m\u00fcmk\u00fcn olur.<\/li>\nresolveProvider<\/code> \u00f6zelli\u011fini true<\/code> olarak ayarlayarak ve connection.onCompletionResolve<\/code> i\u015fleyicisini kullanarak bu sorunu \u00e7\u00f6zer. Bu sayede, ilk tamamlama iste\u011finde sadece temel bilgiler (label, kind) g\u00f6nderilir. Kullan\u0131c\u0131 bir \u00f6\u011feyi vurgulad\u0131\u011f\u0131nda veya se\u00e7ti\u011finde, edit\u00f6r ayr\u0131 bir completionItem\/resolve<\/code> iste\u011fi g\u00f6nderir ve sunucu bu \u00f6\u011feye \u00f6zel detayl\u0131 bilgileri (documentation, detail vb.) o anda hesaplar ve geri g\u00f6nderir. Bu, ilk tamamlama yan\u0131t\u0131n\u0131n h\u0131zl\u0131 olmas\u0131n\u0131 sa\u011flar ve kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<\/li>\n<\/ol>\nVaka Analizi: JSON \u015eemas\u0131na G\u00f6re Ak\u0131ll\u0131 Tamamlama<\/h3>\n
package.json<\/code> dosyas\u0131nda dependencies<\/code> objesinin i\u00e7ine paket isimleri \u00f6nerilmesi veya bir scripts<\/code> objesinin i\u00e7ine ge\u00e7erli script komutlar\u0131 \u00f6nerilmesi b\u00fcy\u00fck kolayl\u0131k sa\u011flar. Bu senaryoda, LSP sunucusu, JSON dosyas\u0131n\u0131n ba\u011fl\u0131 oldu\u011fu JSON \u015femas\u0131n\u0131 ($schema<\/code> alan\u0131 ile belirtilen) okur ve imlecin bulundu\u011fu konumdaki \u015fema tan\u0131m\u0131na g\u00f6re ge\u00e7erli anahtarlar\u0131 veya de\u011ferleri \u00f6nerir.<\/p>\npackage.json<\/code> dosyas\u0131nda \u00e7al\u0131\u015f\u0131yoruz:<\/p>\n\n{\n \"name\": \"my-app\",\n \"version\": \"1.0.0\",\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"axios\": \"^1.4.0\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test\",\n \"eject\": \"react-scripts eject\"\n }\n}\n<\/pre>\n
\nE\u011fer kullan\u0131c\u0131 \"dep\"<\/code> yazd\u0131ktan sonra Ctrl+Space (veya e\u015fde\u011feri) basarsa, LSP sunucusu dependencies<\/code> anahtar\u0131n\u0131 \u00f6nerebilir. Ard\u0131ndan dependencies: { \"r\"<\/code> yaz\u0131ld\u0131\u011f\u0131nda, bilinen npm paketlerinden react<\/code> veya redux<\/code> gibi \u00f6neriler sunulabilir. Bu, LSP sunucusunun sadece metinsel e\u015fle\u015fmelerle de\u011fil, ayn\u0131 zamanda verinin yap\u0131sal ba\u011flam\u0131yla da \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131n bir g\u00f6stergesidir.<\/p>\nPerformans Optimizasyonu \u0130pu\u00e7lar\u0131:<\/h3>\n
\n
onCompletionResolve<\/code> ile getirilen detayl\u0131 bilgiler i\u00e7in \u00f6nbellekleme yapmak performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r.<\/li>\nisIncomplete: true<\/code> bayra\u011f\u0131n\u0131 ayarlayarak daha fazla sonu\u00e7 i\u00e7in istemciyi tekrar istek g\u00f6ndermeye te\u015fvik etmek iyi bir stratejidir.<\/li>\nthrottle<\/code> (k\u0131s\u0131tlama) veya debounce<\/code> (gecikmeli \u00e7al\u0131\u015ft\u0131rma) teknikleri ile kontrol etmek, gereksiz hesaplamalar\u0131 \u00f6nleyerek sunucu y\u00fck\u00fcn\u00fc azalt\u0131r.<\/li>\n<\/ul>\n\n
isIncomplete: true<\/code> bayra\u011f\u0131n\u0131 etkin bir \u015fekilde kullanarak, ilk a\u015famada h\u0131zl\u0131ca az say\u0131da temel \u00f6neri d\u00f6nd\u00fcr\u00fcp, ard\u0131ndan kullan\u0131c\u0131 biraz daha bekledi\u011finde veya kayd\u0131rd\u0131\u011f\u0131nda daha fazla veya daha detayl\u0131 \u00f6nerileri getiren bir strateji izleyebilirsiniz. Bu, \u00f6zellikle Visual Studio Code gibi edit\u00f6rlerde ak\u0131c\u0131 bir deneyim sunar.<\/p>\n<\/blockquote>\nMobil Uyumluluk ve Dil Sunucular\u0131: Neden Medya Sorgular\u0131 \u00d6nemli?<\/h2>\n
@media<\/code> kurallar\u0131, yani medya sorgular\u0131 kullan\u0131larak sa\u011flan\u0131r. Medya sorgular\u0131, taray\u0131c\u0131n\u0131n g\u00f6r\u00fcnt\u00fcleme alan\u0131n\u0131n geni\u015fli\u011fi, y\u00fcksekli\u011fi, cihaz\u0131n y\u00f6n\u00fc (yatay\/dikey) gibi \u00f6zelliklere g\u00f6re farkl\u0131 stil kurallar\u0131n\u0131n uygulanmas\u0131n\u0131 sa\u011flar.<\/p>\n\n
@media<\/code> yazmaya ba\u015flad\u0131\u011f\u0131nda, LSP sunucusu otomatik olarak screen<\/code>, (min-width: ...)<\/code> veya (max-width: ...)<\/code> gibi temel medya \u00f6zellikleri ve operat\u00f6rleri i\u00e7in \u00f6neriler sunabilir. Bu, \u00f6zellikle medya sorgular\u0131n\u0131n s\u00f6zdizimine a\u015fina olmayanlar i\u00e7in veya karma\u015f\u0131k sorgular olu\u015ftururken yaz\u0131m hatalar\u0131n\u0131 \u00f6nler.<\/li>\n@media<\/code> blo\u011funun i\u00e7indeyken, LSP sunucusu o ba\u011flama \u00f6zel CSS \u00f6zellikleri veya de\u011ferleri \u00f6nerebilir. \u00d6rne\u011fin, (max-width: 768px)<\/code> i\u00e7inde bir CSS kural\u0131 yazarken, sunucu mobil cihazlar i\u00e7in daha uygun olabilecek font-size: 14px;<\/code> veya flex-direction: column;<\/code> gibi de\u011ferleri \u00f6ncelikli olarak \u00f6nerebilir. Bu, geli\u015ftiricinin farkl\u0131 cihaz boyutlar\u0131 i\u00e7in en uygun stilleri hat\u0131rlamas\u0131na veya ke\u015ffetmesine yard\u0131mc\u0131 olur.<\/li>\nprint<\/code> medyas\u0131nda kullanmak) tespit edebilir ve geli\u015ftiriciye an\u0131nda geri bildirim sa\u011flayabilir.<\/li>\n\n.container {\n width: 90%;\n margin: 0 auto;\n padding: 10px;\n}\n\n@media (min-width: 600px) { \/* Tablet ve \u00fczeri cihazlar i\u00e7in *\/\n .container {\n max-width: 580px;\n \/* LSP burada 'display: flex;' veya 'grid-template-columns: 1fr 1fr;' gibi\n tablet boyutlar\u0131na uygun layout \u00f6nerileri sunabilir. *\/\n \/* \u00d6rne\u011fin: *\/\n \/* display: flex; *\/\n \/* justify-content: center; *\/\n }\n}\n\n@media (min-width: 992px) { \/* Masa\u00fcst\u00fc cihazlar i\u00e7in *\/\n .container {\n max-width: 960px;\n padding: 20px;\n \/* LSP, daha b\u00fcy\u00fck ekranlara \u00f6zel karma\u015f\u0131k grid yap\u0131lar\u0131 veya animasyonlar i\u00e7in\n farkl\u0131 \u00f6neriler sunabilir. *\/\n }\n}\n\n\/* Ayr\u0131ca, landscape (yatay) mod i\u00e7in de \u00f6neriler sunulabilir *\/\n@media screen and (orientation: landscape) {\n .header {\n height: 80px;\n \/* LSP, yatay modda daha geni\u015f bir ba\u015fl\u0131k alan\u0131 \u00f6nerebilir *\/\n }\n}\n<\/pre>\n
\nYukar\u0131daki \u00f6rnekte, bir CSS LSP sunucusu, @media<\/code> bloklar\u0131n\u0131n i\u00e7indeki kod ba\u011flam\u0131na g\u00f6re farkl\u0131 tamamlama \u00f6nerileri sunabilir. \u00d6rne\u011fin, (min-width: 600px)<\/code> i\u00e7indeyken, display<\/code> \u00f6zelli\u011fi i\u00e7in flex<\/code> veya grid<\/code> gibi layout de\u011ferleri \u00f6ncelikli olarak \u00f6nerilebilir. Bu, geli\u015ftiricinin farkl\u0131 cihaz tipleri i\u00e7in \u00f6zel stil kurallar\u0131 yazarken do\u011fru ve optimize edilmi\u015f se\u00e7imler yapmas\u0131na yard\u0131mc\u0131 olur. LSP'nin bu dolayl\u0131 rol\u00fc, dil sunucular\u0131n\u0131n sadece kodun do\u011frulu\u011funa de\u011fil, ayn\u0131 zamanda tasar\u0131m\u0131n ve kullan\u0131c\u0131 deneyiminin kalitesine de katk\u0131da bulunabilece\u011fini g\u00f6sterir. Bu, LSP'nin sadece programlama dillerine de\u011fil, stil dillerine de uygulanabilirli\u011finin ve geli\u015ftirici ara\u00e7lar\u0131 ekosistemindeki merkezi rol\u00fcn\u00fcn \u00f6nemli bir kan\u0131t\u0131d\u0131r.<\/p>\nSonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
textDocument\/completion<\/code> iste\u011finin nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131, istemci ve sunucu aras\u0131ndaki veri ak\u0131\u015f\u0131n\u0131 ve tamamlama \u00f6\u011felerinin (CompletionItem<\/code>) detail<\/code>, documentation<\/code>, kind<\/code> gibi zengin alanlarla nas\u0131l daha anlaml\u0131 hale getirilebilece\u011fini ad\u0131m ad\u0131m inceledik. Ayr\u0131ca, JSON \u015femas\u0131 tabanl\u0131 ak\u0131ll\u0131 tamamlama gibi ger\u00e7ek d\u00fcnya senaryolar\u0131yla ileri d\u00fczey yakla\u015f\u0131mlara ve performans\u0131 optimize etmek i\u00e7in lazy resolution<\/code> ve \u00f6nbellekleme gibi ipu\u00e7lar\u0131na de\u011findik. Son olarak, LSP'nin do\u011frudan mobil uyumluluk ara\u00e7lar\u0131 sunmasa da, CSS gibi web dilleri i\u00e7in geli\u015ftirilen sunucular\u0131n medya sorgular\u0131 arac\u0131l\u0131\u011f\u0131yla responsive tasar\u0131m s\u00fcre\u00e7lerini nas\u0131l kolayla\u015ft\u0131rabilece\u011fini g\u00f6sterdik. Kendi dil sunucunuzu geli\u015ftirirken, bu prensipleri uygulayarak geli\u015ftiricilere sadece hatas\u0131z de\u011fil, ayn\u0131 zamanda keyifli ve verimli bir kodlama deneyimi sunabilirsiniz.<\/p>\nS\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
\n
\n
onCompletionResolve<\/code>):<\/strong> \u0130lk tamamlama iste\u011finde sadece gerekli temel bilgileri g\u00f6nderin, detayl\u0131 bilgileri (dok\u00fcmantasyon gibi) kullan\u0131c\u0131 \u00f6\u011feyi se\u00e7ti\u011finde veya \u00fczerine geldi\u011finde onCompletionResolve<\/code> kullanarak y\u00fckleyin.<\/li>\nthrottle<\/code> veya debounce<\/code> tekniklerini uygulay\u0131n.<\/li>\nisIncomplete: true<\/code> ile daha fazla \u00f6\u011fenin mevcut oldu\u011funu belirtin.<\/li>\n<\/ul>\n<\/dd>\n\n