TypeScript
Code fix
Write a code fix provider.
CodeFixAction structure
A ts.CodeFixAction object carries fixName (the fix identifier), description (the user-facing description) and changes (file changes). changes is a FileTextChanges[]; each entry holds a textChanges array for one file.
const fix: ts.CodeFixAction = {
fixName: "add-any",
description: "Add type annotation",
changes: [{
fileName,
textChanges: [
{ span: { start, length: 0 }, newText: ": any" }
],
}],
};
getCodeFixesAtPosition
The language service method that provides code fixes is getCodeFixesAtPosition. It takes a file name, a position range and error codes, and returns a CodeFixAction[]. Inside the plugin you wrap this method and produce extra fixes.
getCodeFixesAtPosition: function(fileName, start, end) {
const prior = ls.getCodeFixesAtPosition(fileName, start, end);
// produce extra fixes
return [...prior, ...fixes];
};
Exercise Provide a code fix
Write a plugin that wraps getCodeFixesAtPosition. First take ls's fixes (prior). Get the SourceFile. Walk the AST: for each VariableDeclaration without a type annotation, produce a ts.CodeFixAction (fixName: "add-any"). Use textChanges to append : any after the variable name. Merge prior and fixes. Test: source let x = 1;; print the first fix's fixName.
Show example solution
import ts from "typescript";
function createPlugin(info: ts.server.PluginCreateInfo): ts.LanguageService {
const ls = info.languageService;
return {
...ls,
getCodeFixesAtPosition: function(fileName: string, start: number, end: number, errorCodes: readonly number[], formatOptions: ts.FormatCodeSettings, preferences: ts.UserPreferences) {
const prior = ls.getCodeFixesAtPosition(fileName, start, end, errorCodes, formatOptions, preferences);
const sf = ls.getProgram().getSourceFile(fileName);
if (!sf) return prior;
const fixes: ts.CodeFixAction[] = [];
function visit(node: ts.Node) {
if (ts.isVariableDeclaration(node) && !node.type) {
fixes.push({
fixName: "add-any",
description: "Add type annotation",
changes: [{
fileName,
textChanges: [{ span: { start: node.name.getEnd(), length: 0 }, newText: ": any" }],
}],
});
}
ts.forEachChild(node, visit);
}
visit(sf);
return [...prior, ...fixes];
},
};
}
const sf = ts.createSourceFile("app.ts", "let x = 1;", ts.ScriptTarget.Latest, true);
const fakeLs = {
getCodeFixesAtPosition: function() { return [] as ts.CodeFixAction[]; },
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 fixes = plugin.getCodeFixesAtPosition("app.ts", 0, 1, [], {} as ts.FormatCodeSettings, {} as ts.UserPreferences);
console.log(fixes[0].fixName);
Test yourself
-
What does the changes field of a CodeFixAction contain?
- A single text change
- File changes (FileTextChanges[])
- A diagnostic list
- Source file text
Show answer
File changes (FileTextChanges[]) — The changes field carries a FileTextChanges[]; each entry holds a textChanges array for one file. It is not a single text change, a diagnostic list, or source file text.
-
Fix name
fixes.push({
____: "add-any",
description: "Add type annotation",
changes: [{ fileName, textChanges: [{ span: { start: node.name.getEnd(), length: 0 }, newText: ": any" }] }],
});
Show answer
fixes.push({
fixName: "add-any",
description: "Add type annotation",
changes: [{ fileName, textChanges: [{ span: { start: node.name.getEnd(), length: 0 }, newText: ": any" }] }],
});
-
Code fix parts
- fixName
- Fix identifier
- description
- User description
- changes
- File changes
- textChanges
- Text changes
Next lesson: Configuration
