Adds a CodeAction provider to support fixits #40

orta · 2019-08-29T17:44:55Z

Adds the ability to showcase code actions and suggestions in Monaco-typescript - woo! Now it's feasible for the TS team to showcase code edits :D

orta · 2019-08-29T17:45:21Z

src/languageFeatures.ts

 			if (!noSyntaxValidation) {
 				promises.push(worker.getSyntacticDiagnostics(resource.toString()));
 			}
 			if (!noSemanticValidation) {
 				promises.push(worker.getSemanticDiagnostics(resource.toString()));
 			}
+			if (!noSuggestionDiagnostics) {
+				promises.push(worker.getSuggestionDiagnostics(resource.toString()));
+			}


This also means that JS files should get suggestions too

orta · 2019-08-29T17:45:48Z

src/languageFeatures.ts

@@ -188,14 +191,24 @@ export class DiagnostcsAdapter extends Adapter {
 		const { lineNumber: endLineNumber, column: endColumn } = this._offsetToPosition(resource, diag.start + diag.length);

 		return {
-			severity: monaco.MarkerSeverity.Error,
+			severity: this._tsDiagnosticCategoryToMarkerSeverity(diag.category),


Previously we'd only show only errors, now it can be of many types

orta · 2019-08-29T17:46:56Z

src/languageFeatures.ts

+			const start = this._positionToOffset(resource, { lineNumber: range.startLineNumber, column: range.startColumn });
+			const end = this._positionToOffset(resource, { lineNumber: range.endLineNumber, column: range.endColumn });
+
+			// TODO: where to get the current formatting options from?


This one I'm still not sure of, it doesn't feel critical - but if anyone has ideas on what the right way to pass in the formatting options, I'd love to know them

orta · 2019-08-29T17:47:40Z

src/languageFeatures.ts

+			kind: codeFix.fixName
+		};
+
+		return action;


This is my best-guess implementation, leaving most of the work to the edits which come with the original TS code action ideas

orta · 2019-08-29T17:50:43Z

src/tsWorker.ts

@@ -200,6 +206,11 @@ export class TypeScriptWorker implements ts.LanguageServiceHost {
 		return Promise.resolve(this._languageService.getEmitOutput(fileName));
 	}

+	getCodeFixesAtPosition(fileName: string, start: number, end: number, errorCodes:number[], formatOptions: ts.FormatCodeOptions): Promise<ReadonlyArray<ts.CodeFixAction>> {
+		const preferences = {}
+		return Promise.resolve(this._languageService.getCodeFixesAtPosition(fileName, start, end, errorCodes, formatOptions, preferences));


I don't think its worth exposing all of the TS code fix options to devs, but I'm open to changing that?

it looks like this:

interface UserPreferences { readonly disableSuggestions?: boolean; readonly quotePreference?: "auto" | "double" | "single"; readonly includeCompletionsForModuleExports?: boolean; readonly includeCompletionsWithInsertText?: boolean; readonly importModuleSpecifierPreference?: "relative" | "non-relative"; /** Determines whether we import `foo/index.ts` as "foo", "foo/index", or "foo/index.js" */ readonly importModuleSpecifierEnding?: "minimal" | "index" | "js"; readonly allowTextChangesInNewFiles?: boolean; readonly providePrefixAndSuffixTextForRename?: boolean; }

orta · 2019-08-29T17:51:20Z

test/index.html

@@ -165,10 +165,11 @@ <h2>Monaco Editor TypeScript test page</h2>
 				'var game = new Conway.GameOfLife();',

 			].join('\n'),
-			language: 'typescript'
+			language: 'typescript',
+			lightbulb: { enabled: true }


Took 30m guessing, then 5m with a debugger on the plane to figure this one out! 🍡 💡

alexdima

Thank you, this looks great. Two quick problems:

The hover always shows that no quick fixes are available.
I get an error when applying a quick fix

@mjbvz Can you please help out with these two things, I don't know what would cause them...

… into add_code_actions

orta · 2019-09-26T14:29:02Z

I've looked at this a second time but not entirely got the answer. I think what's happening here is that because I send both the edits and a command to run, then the edits are applied but the command after fails which shows that error.

From a look in vscode, it looks like instead it uses a custom command that sends messages which are more or less just sent straight back to the typescript worker to do the editing changes instead.

Will take a stab at that

orta · 2019-09-26T15:19:08Z

This... Is tricky.

The ts/js language implementations have no access to an instance of an editor. To handle the callback in a similar manner to vscode, I need an instance of the editor to register a command for the code actions to run.

There are two routes I can do as-is:

Add an extra call to monaco.lanaguges.typescript which passes in an editor. e.g.
```
const editor = monaco.editor.create({...})
monaco.editor.languages.typescript.setup(editor)
```
Which could be used to add the commands and to opt the editor into getting code action support.
Use monaco.editor.onDidCreateEditor to add the TypeScript command, this means adding it to every instance of the editor regardless of whether you're using TS or not (because a model can change language to typescript at runtime ( I think ) )

Neither are great options, though I may go for the former.

spahnke · 2019-09-30T17:18:28Z

Do you need to register a command here at all? From the documentation in vscode.d.ts I get the impression that edits would be sufficient. At least that's the only thing I supply when hooking up ESLint to Monaco. It would be interesting to know what an additional command would be used for.

spahnke · 2019-09-30T17:34:10Z

Also: The kind property has to be set to "quickfix". Otherwise the popup says "No quick fixes available". This is not documented unfortunately and it took me a while to find that (I think I debugged, or looked into the source code).

orta · 2019-09-30T18:10:13Z

Do you need to register a command here at all?

I do if I want to let typescript handle making the changes to the code (which is what happens in vscode ) - there's no other route for getting the callback that a user has selected it.

Maybe I can just have a version which just applies the code edits which TypeScript passes and call it at that.

Also: The kind property has to be set to "quickfix".

<3

…ger the popover

orta · 2019-10-01T13:17:47Z

Thanks @spahnke - I've tried this out on a bunch of our fixits and it works as expected.

This version doesn't use the TypeScript services to make the changes, but only uses the code edit deltas sent from the original response from the language service which seems to be enough for every fixits I tried from in the typescript test suite.

Should be good to go.

alexdima · 2019-10-02T20:23:31Z

This looks great! ❤️

orta · 2019-10-02T20:32:20Z

Woo, thanks @alexandrudima <3

Adds a CodeAction provider to support fixits

b8063f9

orta commented Aug 29, 2019

View reviewed changes

mjbvz approved these changes Aug 29, 2019

View reviewed changes

Merge remote-tracking branch 'origin/master' into pr/orta/40

559bc52

alexdima self-requested a review September 19, 2019 07:42

alexdima suggested changes Sep 19, 2019

View reviewed changes

alexdima and others added 2 commits September 19, 2019 09:43

formatting options & source formatting

0dd1066

Merge branch 'master' of https://github.com/microsoft/monaco-typescript…

e86c4f0

… into add_code_actions

Use the code deltas from TS only, and use the right kind name to trig…

c6ad823

…ger the popover

alexdima approved these changes Oct 2, 2019

View reviewed changes

Merge remote-tracking branch 'origin/master' into pr/orta/40

91e9a45

alexdima merged commit c050127 into microsoft:master Oct 2, 2019

alexdima added this to the September 2019 milestone Oct 2, 2019

spahnke mentioned this pull request Oct 7, 2019

Add await helper support microsoft/monaco-editor#1620

Closed

spahnke mentioned this pull request Oct 21, 2019

Errors on the console with TypeScript code fixes microsoft/monaco-editor#1638

Closed

alexdima modified the milestones: September 2019, December 2019 Dec 17, 2019

This was referenced Jan 29, 2020

Errors are not appearing in JS mode anymore microsoft/TypeScript-Website#201

Closed

v2 Playground: No type errors in JS mode microsoft/TypeScript-Website#203

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds a CodeAction provider to support fixits #40

Adds a CodeAction provider to support fixits #40

orta commented Aug 29, 2019

orta Aug 29, 2019

orta Aug 29, 2019

orta Aug 29, 2019

orta Aug 29, 2019

orta Aug 29, 2019

orta Aug 29, 2019

alexdima left a comment

orta commented Sep 26, 2019

orta commented Sep 26, 2019

spahnke commented Sep 30, 2019

spahnke commented Sep 30, 2019

orta commented Sep 30, 2019 •

edited

Loading

orta commented Oct 1, 2019

alexdima commented Oct 2, 2019

orta commented Oct 2, 2019

Adds a CodeAction provider to support fixits #40

Adds a CodeAction provider to support fixits #40

Conversation

orta commented Aug 29, 2019

orta Aug 29, 2019

Choose a reason for hiding this comment

orta Aug 29, 2019

Choose a reason for hiding this comment

orta Aug 29, 2019

Choose a reason for hiding this comment

orta Aug 29, 2019

Choose a reason for hiding this comment

orta Aug 29, 2019

Choose a reason for hiding this comment

orta Aug 29, 2019

Choose a reason for hiding this comment

alexdima left a comment

Choose a reason for hiding this comment

orta commented Sep 26, 2019

orta commented Sep 26, 2019

spahnke commented Sep 30, 2019

spahnke commented Sep 30, 2019

orta commented Sep 30, 2019 • edited Loading

orta commented Oct 1, 2019

alexdima commented Oct 2, 2019

orta commented Oct 2, 2019

orta commented Sep 30, 2019 •

edited

Loading