So, I responded to his tweet and in that process decided to create a blog post sharing the snippets I use. For now, this will only have one snippet but over time, I'll add a lot more.
To start writing your own VSCode snippets, there is some initial setup that needs to be done. You can read all about it here.
I personally have one file set up called
web-dev.code-snippets using the same method mentioned in the documentation and then I simply use the
scope variable to define the languages I want it to work in.
Import by specifying the package first
Do you ever find yourself wanting to import
react but the autocomplete won't work because you haven't written the name of the package yet? Yeah, happens to me too.
So, I had come up with this VSCode snippet which allows us to write the package name first and then autocompletes the destructured imports for us.
scope defines the languages we want the import to be available in. The
prefix is the command we will use to trigger the snippet and the
body is where the magic happens. What we're saying here is that whenever we write
dimport and hit enter, we want VSCode to automatically write our import statement with the cursor at the package name and then when we hit tab, for it to go inside the destructured block.
$1 is your first tab stop and
$0 is where you want your cursor to end up. You can read more about tab stops in VSCode snippets here and below is the code snippet in action.
So yeah, wrote this in like 10 minutes so that's all for now but I'll keep updating this post with more!