code action: `Smart Try catch`

[tjx666]

When I select the first line of following code and run this code action:

const resp = await axios.get('https://xxxx'); // select this line
console.log(resp.data.length); 

Turned to:

let resp: AxiosResponse<string[]>;
try {
    resp = await axios.get('https://xxxx');
} catch(error) {
    // cursor here
}
console.log(resp.data.length); 

[zardoy]

I think this can be done with p42: split declaration and initialization and than wrapping current line into try try-catch with either the same p42 action or Surround extension.

The idea seems interesting, but didn't have experience to make such code actions that infers variable type (I really wanted to make similar code action for extracting selection into React component with inferring param types).

Also in your example why data type isn't AxiosResponse type and doesn't have undefined

[zardoy]

The idea seems interesting, but didn't have experience to make such code actions that infers variable type (I really wanted to make similar code action for extracting selection into React component with inferring param types).

Oh nevermind what I said there is already builtin codeaction Infer type of `data` from usage that is possible to reuse, so this codeaction is easy to build. I think codeaction activation range should be on variable name after const or let. PR welcome!

[tjx666]

doesn't have undefined

Need not

[tjx666]

Maybe provide a develop steps in README would be better: 😅

[zardoy]

Good idea, but there is contributing.md for this. In a short:

pnpm start + pnpm watch-plugin + F5 (extension + server)

[zardoy]

Something like this: https://github.com/zardoy/vscode-better-snippets/blob/main/CONTRIBUTING.MD

But in this repo I don't recommend running integration tests, as they check only outline, but takes a lot of time to run.

[tjx666]

I serach some open source code, seems my code style is different with others...

https://github.com/elk-zone/elk/blob/57c820b701f34af377aaed083d9f8f8b105ba01d/components/account/AccountFollowButton.vue#L27

Their code:

try {
    const newRel = await client.v1.accounts[relationship!.following ? 'follow' : 'unfollow'](
        account.id,
    );
    Object.assign(relationship!, newRel);
} catch (error) {
    console.error(error);
    // TODO error handling
    relationship!.following = !relationship!.following;
}

If I warite code, I may write:

let newRel: XXXType;
try {
    newRel  = await client.v1.accounts[relationship!.following ? 'follow' : 'unfollow'](
        account.id,
    );
    
} catch (error) {
    console.error(error);
    // TODO error handling
    relationship!.following = !relationship!.following;
}
Object.assign(relationship!, newRel);

My thought is try/catch should only wrap the that will throw exception. But this will cause code bad to read as you can see.

[tjx666]

My implementation steps is:

1. check the range is valid statements array
2. find the variables define in the selection range
3. filter the variables in setp 2 which is used outside the selection
4. lift up the variables in step3 and try detect the type of variables
5. move the cursor to catch block

I not familar with typescript plugin and it's ast api. The 3, 4 is hard for me, I will try to implements this when I have enough skills. Seems this extension can't debug ts plugin?

[zardoy]

Seems this extension can't debug ts plugin?

Fully debuggable if you launch Extension + TS Plugin on F5 from vscode. I didn't set tasks withing vscode to also launch 2 npm scripts on F5 (build extension code in development, start because of historical reasons) + watch-plugin (typescript plugin code in dev) because of bad vscode running tasks detection.

But it can't it debug vue (when in Volar) files.

My implementation steps

I think I got the idea, this is quite complicated though. let's implement it as special command as we already have similar command removeFunctionArgumentsTypesInSelection which removes function arguments from code selection (can look at it as some kind of example).

Implementation (at glance):

Need to find node at position, then find closest node with Block kind, then recursevely look at all chldren within that block and find ones that are variables and satisfy selection range, then find references on each one (don't forget to filter out of the selection positions). Split declaration and initalization try to infer types. Let's skip moving cursor (as its not possible from ts plugin) in first implementation (we can add it a bit later)

Sorry, I don't think I'll have much time for now, but when I have I'll definitely provide more details steps with code.

But for now, can you please throw me an example with a few variables (and adding markers to show selection) and then what code should be produced as result of refactoring.

[tjx666]

Before:

After: