Challenge 4: Mini plugin

Solve a task testing the full expert level.

Mini plugin

This final challenge tests your full expert level. Write a lint plugin skeleton, wrap getSemanticDiagnostics, and test it with a mock language service. Then add a custom diagnostic producer that flags any types. You will use ts.Diagnostic, ts.forEachChild and ts.isVariableDeclaration together.

Exercise Plugin skeleton

Write a plugin function that takes ts.server.PluginCreateInfo and returns ts.LanguageService. Get ls from info.languageService, wrap getSemanticDiagnostics and return ls's diagnostics as-is. A mock language service returns 2 diagnostics. Call the plugin and print the diagnostic count.

Show example solution

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: "a", file: undefined, start: 0, length: 1 } as ts.Diagnostic,
      { category: ts.DiagnosticCategory.Warning, code: 2, messageText: "b", 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);

Exercise Flag any types

Write a plugin that wraps getSemanticDiagnostics. Get the SourceFile via ls.getProgram().getSourceFile(fileName). Walk the AST: for each VariableDeclaration whose type annotation is any, produce a ts.Diagnostic (category: Warning, messageText: "Avoid any"). Merge prior and extras. Test: source let a: any = 1; let b: number = 2;; print the total diagnostic count.

Show example solution

import ts from "typescript";

function createPlugin(info: ts.server.PluginCreateInfo): ts.LanguageService {
  const ls = info.languageService;
  return {
    ...ls,
    getSemanticDiagnostics: function(fileName: string) {
      const prior = ls.getSemanticDiagnostics(fileName);
      const sf = ls.getProgram().getSourceFile(fileName);
      if (!sf) return prior;
      const extras: ts.Diagnostic[] = [];
      function visit(node: ts.Node) {
        if (ts.isVariableDeclaration(node) && node.type && node.type.kind === ts.SyntaxKind.AnyKeyword) {
          extras.push({
            file: sf,
            start: node.getStart(sf),
            length: node.getWidth(sf),
            category: ts.DiagnosticCategory.Warning,
            code: 9001,
            messageText: "Avoid any",
          });
        }
        ts.forEachChild(node, visit);
      }
      visit(sf);
      return [...prior, ...extras];
    },
  };
}

const sf = ts.createSourceFile("app.ts", "let a: any = 1; let b: number = 2;", ts.ScriptTarget.Latest, true);
const fakeLs = {
  getSemanticDiagnostics: function() { return [] as ts.Diagnostic[]; },
  getProgram: function() { return { getSourceFile: function(n: string) { return n === "app.ts" ? sf : undefined; } } as unknown as ts.Program; },
} 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);

Test yourself

Which method does a plugin wrap to produce diagnostics?
- getCompilerDiagnostics
- getSyntacticDiagnostics
- getSemanticDiagnostics
- getSuggestionDiagnostics
Show answer

getSemanticDiagnostics — A lint plugin wraps getSemanticDiagnostics and adds custom diagnostics. getSyntacticDiagnostics, getSuggestionDiagnostics and getCompilerDiagnostics are not used in the plugin pattern.

Get the message text

console.log((diags[0] as ts.Diagnostic).____);

Show answer

console.log((diags[0] as ts.Diagnostic).messageText);

Plugin parts

PluginCreateInfo

Plugin input
info.languageService

Existing service
ts.Diagnostic

Error/warning object
ts.forEachChild

Walks the AST

Next lesson: Expert section exam

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies