Expanding Code Action Sample Diagnostic File

[VaniSachdev]

I wanted to adapt the diagnostic file from the code-action-sample from VS code to have multiple words instead of simply “emoji” (https://github.com/microsoft/vscode-extension-samples/blob/main/code-actions-sample/src/diagnostics.ts). I tried to make EMOJI an array and then iterate through each word in the array but it did not work. Does anyone have tips on how to approach this?

[alefragnani]

Hi @VaniSachdev ,

That samples handles the EMOJI constant in places. At first, in refreshDiagnostics, looking of its presence in the current line. After that in createDiagnostic to find out it location.

If you want multiple words, you could simply create an EMOJIS array and update refreshDiagnostics to something like this:

if (EMOJIS.some(item => lineOfText.text.includes(item))) {

It will kind of work, but it has the same flaw as the original sample itself, because it is not looking for a word that matches the emoji, but a piece of text. For instance, if you type memojior emoji in the original sample, both will be recognized, but memoji shouldn't, right?

I see two alternatives.

• Using regex with a \b(wordA|wordB)\b construct, if the words you want don't have special characters used in regex
• Parsing the line and recognizing words (based on VS Code or your own word separator rules) and a simple indexOf lookup.

Hope this helps

[VaniSachdev]

Hi[ @alefragnani! Thanks for your help! I ended up using a chevrotain lexer to get it to work. I had a follow up question for the same tutorial. The quick-fix always led to the emoji website. Is there a way for the command COMMAND to instead replace the words within the diagnostic range with different text (similar to the :) -> 😃 ability) ? I've been struggling to do this, and I don't think it should be too hard. I think there's something I'm missing -- do you know where I could be going wrong? Thanks!

[alefragnani]

That's great to know you could get it to work.

About your follow up question, I'm not sure I understand. Do you mean replace what the COMMAND ('code-actions-sample.command') does to text replacement? If that's the case, yes, you can, but you will have to deal with the EditBuffer API. The document-editing-sample is a good source.

Here is a sneak peek of it:

                const editor = vscode.window.activeTextEditor;

		if (editor) {
			const document = editor.document;
			const selection = editor.selection;

			// Get the word within the selection
			const word = document.getText(selection);
			const reversed = word.split('').reverse().join('');
			editor.edit(editBuilder => {
				editBuilder.replace(selection, reversed);
			});
		}

Hope this helps

[VaniSachdev]

This looks good, thanks! Is there a way to get the selection to refer to the same range as the diagnostics.range variable (How do you pass in a variable to the command?) ?

[alefragnani]

The command accepts a callback so you can make it to have as many parameters as you want. This is a piece from my Project Manager extension

    vscode.commands.registerCommand("projectManager.listProjects", () => listProjects(false));
    vscode.commands.registerCommand("projectManager.listProjectsNewWindow", () => listProjects(true));

About referring to the same range as the diagnostics, well, commands works a bit different, because it can be called at any time, by the user, with or without a selection/focus. When you use the diagnostics API, it will be called when the editor understands you need some diagnostic. So, you will have to detect if the cursor is positioned over a EMOJI and, reusing the logic you previously created, replace it with the desired icon.

This snippet could give you the word (what VSCode calls word) from the current cursor position

    const cursorWordRange = editor.document.getWordRangeAtPosition(editor.selection.active);
    if (!cursorWordRange) {
        return false;
    }