VSCode snippets you didn't know you needed

VSCode snippets that significantly improve my day-to-day developer experience.

VSCode snippets you didn't know you needed

VSCode snippets that significantly improve my day-to-day developer experience.

I was browsing Twitter in bed this morning (as one normally does) and I came across this tweet from Scott Tolinski and I realized I wasn't the only one who was frustrated by this.

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.

Prerequisites

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 useState or useEffect from 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.

{
  "Import by specifying the package first": {
    "scope": "javascript, javascriptreact, typescript, typescriptreact",
    "prefix": "dimport",
    "body": [
      "import { $0 } from '$1'"
    ],
    "description": "Import by specifying the package first"
  }
}
Import by specifying the package first

The 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.

Import by specifying the package first
Import by specifying the package first

So yeah, wrote this in like 10 minutes so that's all for now but I'll keep updating this post with more!

Tags:

Faraz Patankar

Probably obsessing over fantasy football, figuring out what to eat for my next meal or working on my next great (soon to be abandoned) side project but hello to you too! 🤗

More posts from this author