Derive name for `const` and `forEach` from expression

[zardoy]

Hey! I have awesome idea to derive variable names for builtin const and forEach snippets.

const

Improve variable name for const, let (and var?) snippets.

I simply use regexs to derive const name from expression.

We can use the part after get|read|create|retrieve|select|modify|update|use

Some examples:

someObject.getUser().const         ; const user = someObject.getUser()
// react or vue
useRouter().const                  ; const router = useRouter()
fs.readFile().const                ; const file = fs.readFile()
await updateRect(...anyArgs).const ; const rect = await updateRect(...anyArgs)

UPDATE: special handling of expression starting with new:

• just lowercase variable (if class starts with uppercase)

const mutationObserver = new MutationObserver().const

forEach

Also for forof snippet.

Just use singular form of last part of expression (if appliable).

1. Skip if identifier doesn't end with s or sList (or just List?)
2. Remove List part if appliable
3. Use pluralize with count 1 to get singular form

Example:

cookies.forEach(cookie => )

I'm using it for a while and can say its pretty neat.

Anyway I think it's much better than just name or item variables that should be renamed in 99% cases.

What do you think? Should we make this behaviour disableable?

[ipatalas]

Great idea, I like that! Not sure it if will always work well so at least for now I'd make a feature toggle for that just in case but that's not a problem.

[zardoy]

I have awesome idea to derive variable names for builtin const and forEach snippets.

I'm thinking of creating a dedicated npm package (such as const-name), because I want to reuse this functionality in my TS service plugin for:

1. Improving default name for extract to constant code action
2. Changing insertText of array-like methods (e.g. map or find) to include the first arg

I'd make a feature toggle

Great! But obviously, I'd make it enabled by default

[ipatalas]

I have awesome idea to derive variable names for builtin const and forEach snippets.

I'm thinking of creating a dedicated npm package (such as const-name), because I want to reuse this functionality in my TS service plugin for:

Yeah, that makes sense as this part can be reusable. I'm gonna wait a while then until it's there ;)

I'd make a feature toggle

Great! But obviously, I'd make it enabled by default

Agreed, that absolutely makes sense to be enabled by default 👍🏻

[ipatalas]

Hey, took a while but finally found some time and made the changes. I've let myself copy part of your solution. For now I went with the easy path, so it's mostly inlined within the templates but it's good enough for now.

Diff: https://github.com/ipatalas/vscode-postfix-ts/compare/618b021ef68cc69c6d2cf9420dca0d092ee2cf5b...d58fc00302f518ddcd6cce62ccb34854a775f12f

[zardoy]

Ok, just let me know when you're done so I will copy it to my library. I want to reuse it in my plugin!

[zardoy]

Well done here! With this implementation in mind I decided to push it forward and now arrays in TS feel completely different

Thank you!

[ipatalas]

Hmm, what's that highlight? 🤔

Is that a new feature from VS Code insiders?

[zardoy]

No, its just disabled by default: "editor.suggest.preview": true

[ipatalas]

Cool, didn't know that. It doesn't work for custom completions though. How come it shows this userList suggestion for you?

[zardoy]

It doesn't work for custom completions though.

No, of course it works with any kind of completions. This .map completion comes from builtin TypeScript language features ext, which is just a regular extension which can be disabled. There are a few rules, but generally it doesn't work with our postfixes because:

1. insertText doesn't start with label e.g. it'd work if label is forEach and insertText is forEach(item => ) literally
2. Completion contains any additionalTextEdits (even if empty range or doesn't change text)

How come it shows this userList suggestion for you?

I have an extension which is actually a TypeScript plugin. In a context of TS plugin you don't have an API, but you also don't have any limits. You can remove, edit or do whatever you want with completions that come from TS server. Also you have full access to the project and language service.

That's what I'm doing, just looking for array completions and changing their insertText: https://github.com/zardoy/typescript-vscode-plugins/blob/main/typescript/src/completions/arrayMethods.ts

[ipatalas]

[...] generally it doesn't work with our postfixes because:

1. insertText doesn't start with label e.g. it'd work if label is forEach and insertText is forEach(item => ) literally
2. Completion contains any additionalTextEdits (even if empty range or doesn't change text)

That actually makes sense. First condition is satisfied but there are additionalTextEdits and at the moment it's impossible to get rid of that because they need to very often delete/replace quite a lot of code before the cursor so this obviously cannot be shown using those highlights.

How come it shows this userList suggestion for you?

I have an extension which is actually a TypeScript plugin. In a context of TS plugin you don't have an API, but you also don't have any limits. You can remove, edit or do whatever you want with completions that come from TS server. Also you have full access to the project and language service.

That's what I'm doing, just looking for array completions and changing their insertText: https://github.com/zardoy/typescript-vscode-plugins/blob/main/typescript/src/completions/arrayMethods.ts

That's pretty cool, I like that. Some of the postfixes could probably be implemented this way as well but on the other hand it's more effort to install a TS plugin than VSCode extension (which you do only once, not per workspace). Do you have this plugin released officially or still WIP?

[zardoy]

Some of the postfixes could probably be implemented this way

You're right! I'd make it work in the web, reduce ext size (and probably parsing time, as it'd reuse sourcefiles). I think I'm going to give more details in https://github.com/ipatalas/vscode-postfix-ts/issues/13 within a few days.

it's more effort to install a TS plugin than VSCode extension (which you do only once, not per workspace). Do you have this plugin released officially or still WIP?

Of course! You can look at repository URL. I'm using it on daily bases (also that's why I don't use webstorm anymore).

Actually I don't have plugin published, because for now it's not possible to install it in some workspace, because it relies on the extension itself. This is primarily a VSCode extension, that as you said you install only once.