Plugin tasarımı

Language service plugin iskeletini yazarsın.

Language service plugin nedir?

Bir language service plugin, TypeScript dil servisini süsleyen (decorate) bir fonksiyondur. ts.server.PluginCreateInfo alır ve bir ts.LanguageService döndürür. Plugin, tsconfig.json'daki plugins dizisine eklenerek etkinleşir.

import ts from "typescript";

function createPlugin(
  info: ts.server.PluginCreateInfo
): ts.LanguageService {
  const ls = info.languageService;
  return { ...ls };
}
export = createPlugin;

Plugin iskeleti

İskelet, mevcut dil servisini alır ve metodları sarar. getSemanticDiagnostics gibi metodları override edip önce ls'nin sonucunu alır, eklemeleri yapar ve döndürürsün.

return {
  ...ls,
  getSemanticDiagnostics: function(fileName) {
    const prior = ls.getSemanticDiagnostics(fileName);
    return prior;
  },
};

Uygulama Plugin iskeleti

Bir plugin fonksiyonu yaz: ts.server.PluginCreateInfo alır, ts.LanguageService döndürür. info.languageService'ten ls al, getSemanticDiagnostics'i sar ve ls'nin diagnostics'ini olduğu gibi döndür. Bir test yaz: mock dil servisi 1 diagnostic döndürsün; plugin'i çağır ve diagnostic sayısını yazdır.

Örnek çözümü göster

import ts from "typescript";

function createPlugin(info: ts.server.PluginCreateInfo): ts.LanguageService {
  const ls = info.languageService;
  return {
    ...ls,
    getSemanticDiagnostics: function(fileName: string) {
      return ls.getSemanticDiagnostics(fileName);
    },
  };
}

const fakeLs = {
  getSemanticDiagnostics: function(_fileName: string): ts.Diagnostic[] {
    return [{ category: ts.DiagnosticCategory.Error, code: 1, messageText: "test", file: undefined, start: 0, length: 1 } as ts.Diagnostic];
  },
} as unknown as ts.LanguageService;

const info = { languageService: fakeLs, config: {} } as unknown as ts.server.PluginCreateInfo;
const plugin = createPlugin(info);
const diags = plugin.getSemanticDiagnostics("app.ts");
console.log(diags.length);

Kendini test et

Bir language service plugin ne döndürür?
- ts.Diagnostic[]
- ts.SourceFile
- ts.LanguageService
- ts.Program
Cevabı göster

ts.LanguageService — Plugin, PluginCreateInfo alır ve süslenmiş bir LanguageService döndürür. Program, Diagnostic[] veya SourceFile döndürmez.

Dil servisini al

function createPlugin(info: ts.server.PluginCreateInfo): ts.LanguageService {
  const ls = info.____;
  return { ...ls };
}

Cevabı göster

function createPlugin(info: ts.server.PluginCreateInfo): ts.LanguageService {
  const ls = info.languageService;
  return { ...ls };
}

Plugin iskeleti parçaları

PluginCreateInfo

Plugin girdisi
info.languageService

Mevcut dil servisi
ts.LanguageService

Plugin çıktısı
getSemanticDiagnostics

Süslenen metod

Sıradaki ders: Diagnostic üretimi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler