Configuration

Add plugin configuration options.

Plugin configuration

Plugin configuration is given in the plugins array of tsconfig.json. Each entry carries a name and custom fields. In the plugin code you access these fields via info.config.

// tsconfig.json:
// "plugins": [
//   { "name": "my-plugin", "prefix": "[lint]" }
// ]

Reading configuration

info.config can be undefined; so you read safely with ?. and ??. Providing default values for custom fields makes the plugin robust.

const prefix: string =
  info.config?.prefix ?? "[lint]";

Exercise Plugin with configuration

Write a plugin that reads a prefix from info.config?.prefix (default "[lint]"). Wrap getSemanticDiagnostics: for each VariableDeclaration without a type annotation, produce a diagnostic whose message starts with the prefix. Test: source let x = 1;, config.prefix = "[X]"; print the first diagnostic's messageText.

Show example solution

import ts from "typescript";

function createPlugin(info: ts.server.PluginCreateInfo): ts.LanguageService {
  const ls = info.languageService;
  const prefix: string = info.config?.prefix ?? "[lint]";
  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) {
          extras.push({
            file: sf,
            start: node.getStart(sf),
            length: node.getWidth(sf),
            category: ts.DiagnosticCategory.Warning,
            code: 9001,
            messageText: prefix + " Missing type annotation",
          });
        }
        ts.forEachChild(node, visit);
      }
      visit(sf);
      return [...prior, ...extras];
    },
  };
}

const sf = ts.createSourceFile("app.ts", "let x = 1;", 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: { prefix: "[X]" } } as unknown as ts.server.PluginCreateInfo;
const plugin = createPlugin(info);
const diags = plugin.getSemanticDiagnostics("app.ts");
console.log((diags[0] as ts.Diagnostic).messageText);

Test yourself

What does info.config carry?
- Diagnostic list
- SourceFile
- Plugin configuration options
- Program object
Show answer

Plugin configuration options — info.config carries the plugin configuration from tsconfig.json; it does not carry a Program, a diagnostic list, or a SourceFile.

Read configuration

const prefix: string = info.____?.prefix ?? "[lint]";

Show answer

const prefix: string = info.config?.prefix ?? "[lint]";

Config parts

info.config

Carries the configuration object
info.languageService

Carries the language service
config.prefix

Is a custom option example
??

Provides a default value

Next lesson: Integration

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies