Move from snippet extension into something more

[zardoy]

I think this extension has a great future! https://github.com/alDuncanson/react-hooks-snippets/issues/15#issuecomment-718782937 Of course with preserving web support! I've been trying to build a similar extension: https://github.com/zardoy/vscode-better-snippets (it was primarily created for React). I still need to tidy up the code and implement tests, but I want to share my experience with you!

Configuration

• override name of snippets and disable with false. From there we can also add more snippets (since user can rename them) like useEffect without cleanup
• snippet-specific options
  • enable/disable tabstops in deps (useCallback ...)

Where to Show

Most of the snippets would make sense to show only in one place: body of top-level function. Since we have now more control in completion provider, we can exclude annoying snippet suggestions in other places (such as in props of components). The first solution I used was to show snippets only in start of line. However it was still annoying to see them in JSX:

const Component = () => {
    // this place is great
    return <div>
        {/* this place is bad */}
    </div>
}

So I added additional check to ensure that line on one level above is function. However regexs are obviously bad for code parsing, as it would work only if whole function declaration on the same line. The check can (and should) be rewritten using TS language service, this is only matter of performance.

Auto Reformat

There shouldn't be an options like semi, because user can use it in different existing projects (legacy/new). Configuring it locally would be annoying, instead it should infer the codestyle from it. I'm still thinking of the best solution, but I think the easiest way is ask TypeScript language service.

Auto imports :fire:

It would be hardcoded.

This is what I love most. I see you have snippet for hooks import, but it is not ideal for existing projects and leaving all unused imports is a known bad practice.

This works by just querying diagnostics to see wether we have missing identifiers and then code actions to add import them if needed. It happens with specific delay of course, since TypeScript is extremely slow. In theory we can also use language service here instead.

example config It seeks for import suggestions from react package. In case of custom redux dispatcher we can omit package field:

"resolveImports": {
    "useAppDispatch": {}
},

It means we can also implement support for imports with dynamic paths.

GIF Demo

Special Snippets

We can also provide even more useful snippets. For example I created

For example I have special snippet for users of react-router: useParam.

GIF Demo

It is kinda hardcoded, :

1. Find exported symbol (component) with the same name as file (currently doesn't work with default exports)
2. Find second reference for it (first one is import)
3. Extract params by using regex (again, we should use AST parsing instead)

Also we should support folks using remix. It would be easy since we only need to parse path to file.

Of course I want to remove it from my ext (move to yours).

Nice React Icon

It works only with vscode-icons. So we should enable it only if this extension is installed

What's next?

• LSP. Unique platform.

What we shouldn't aim

Refactors! For example sometimes it's much easier to extract existing code to useCallback without using snippets, but code actions. Abracadabra already can handle it

Feel free to test everything yourself if you want. Everything above shouldn't be hard to implement. Hope I gave you some inspiration.

[alDuncanson]

Wow thanks for the write up!

I like the auto imports a lot 👍🏻 Nice work