Does this extension depend on built-in typescript/javascript extension?

[danielo515]

Hello,
I have this extension installed and I can not trigger any codemod, not from the context menu (there is no bulb icon when I select an arrow function) nor from the command pallete.
I have the built-in typescript javascript extension disabled, does that affect this extension?

[xsburg]

Hello Daniel!
The built-in extensions shouldn't play any role since this extension uses its own parser. Among the possible reason I would see:

• The file contains code that the Babel parser cannot compile. If the file is only partially correct, e.g. contains not-finished statements etc., the parser won't be able to analyse it and therefore provide code actions.
• The language mode for the given file should be one of the following: JavaScript, JavaScript React, TypeScript, TypeScript React. This case is way less likely since VSCode detects the language based on file extension, but still possible.

To analyse it further, I would suggest enabling the verbose mode for the extension and analyse its output, see the screenshots below:

The output should tell us the reason.

Cheers! 👋

[danielo515]

Hello @xsburg , thanks for your answer.
My first try has been on a workspace with typescript extension enabled, and the problem seems to be very similar. Then I changed my selection almost by accident and then I realised something.
Seems that it is not enough that you have the "item" you want to refactor under your cursor, you actually need to select it, and the selection seems to be very sensitive. Take a look at the suggestions when I have everything selected but one line:

And this is what happens if I select that extra last line:

Quite a difference right? I guess the "parser" needs the entire context to know to which codemod dispatch the action.

And talking about codemods...I re-read the options more carefully and I saw an option called "codemods-directory". Is that right? Can I run my own codemods from this extension?

[xsburg]

Actually, most of the code actions provided by this extension (all of them except one) are activated by the position of the cursor, not by selecting a code fragment. Normally they are easy to discover, e.g. "Split into declaration and initialization" appears when you put the cursor somewhere around the assignment (=) sign.

Speaking about your particular example, some of the actions that you see on the last image are actually provided by TypeScript itself and indeed are selection based. The rest, provided by the JavaScript Booster, are appearing because the cursor is located at the right place (the selection itself is not taken into account).

Regarding running your own code mods, that's correct. You can put .js files into the specified directory and they will be picked up by this extension. The only pitfall here is that I never described what you have to export from this JavaScript file (simply put - the same as any other codemod has to provide). Also, I'm not 100% certain if the feature is working since it's not documented and it was a long time ago that I personally used it.

👋

[danielo515]

Actually, most of the code actions provided by this extension (all of them except one) are activated by the position of the cursor, not by selecting a code fragment. Normally they are easy to discover, e.g. "Split into declaration and initialization" appears when you put the cursor somewhere around the assignment (=) sign.

Ok, that makes the plugin a bit sensitive to my taste. When I install a plugin I just give a quick read to the docs and expect to get the functionality in a "organic" way, and this kind of very narrowed activating makes that a bit hard for me. I think the concept of the extension is very awesome, and I really like having it, but I have the feeling that I didn't used much because of this. Also not being able to trigger any of this actions (I think this is a VSCode problem) from the command palette frustrates me a bit.
The fact that VSCode doesn't tell you where each "quick action" is coming from doesn't help either to reduce confusion.

I will be trying the codemod feature with some code-mods that I have already used. I will just put the folder on the config and see what happens.

Regards

[danielo515]

Just pointed the extension config option to a folder containing codemods, but I don't see how can I execute them. Any hint?

[danielo515]

Just pointed the extension config option to a folder containing codemods, but I don't see how can I execute them. Any hint?

[xsburg]

There are two kinds of code mods supported: global and cursor-based. The global code mods are accessible through the "Run global code action" command, while cursor-based will appear in the action bulb based on the logic defined in the canRun() function of the code mod. Feel free to look at any existing code mod or study the code mod service directly.

[danielo515]

Because you said that any normal codemod can be used I just tried with some that I already have for my personal use.
Now that I take a look at the linked code:

codeMod.scope = 'cursor';

codeMod.title = 'Add braces to arrow function statement';

codeMod.description = '';

codeMod.detail = '';

module.exports = codeMod;

I guess that those extra properties are a requirement for the codemod to show up on the list of global ones? So what is the bare minimum to get a global codemod to show ? title and scope?