VS Code Tips & Tricks

Writing repetitive code can feel really boring and unproductive. VS Code provide us with a way to write reusable code: Enter “Snippets.” A VS Code Snippet is just a piece of reusable code that can be generated with a short word.

Snippets are beneficial because they can serve as a memory aide, increase speed and can be used to standardize company code. We’ve used a snippet before when creating a Stateless widget. In this episode, we would be creating a snippet from scratch.

Inside VS Code, press Ctrl + Shift + P to open up the Command Palette. Search for “snippet” and select “Configure User Snippets”. This shows us a list of different languages. Select dart.json This opens up a dart.json file where we could define multiple snippets for the dart language.

We are going to be creating a snippet for a stateless widget that comes bundled with a ListView.builder() constructor. This file provides us with an example snippet.

Copy it and remove the comments. Let’s update it as follows:

"Widget with ListView.builder": {
		"prefix": "rwstlesslvb",
		"body": [

		],
		"description": "Creates a Statelss widget with ListView.builder"
	}

The first property is just the object name. Next, we have the prefix which is the shortcut we’re going to be using to generate this snippet. Most of the times, we could prefix it with your company’s initials.

In this case, I used “rw” representing RayWenderlich. The body would contain the snippet we want to generate. An finally, we have the description which is going to be shown whenever we hover on this snippet.

Next, let’s remove this body. Open up a dart file and create the snippet we want to generate.

class  extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index){

      },
    );
  }
}

Cut this code and paste it inside the body array. Next, wrap each line with double quotes and separate them with commas. Save the file and head back to a dart file to try in out.

You access the snippet by the prefix: rwstlesslvb. This creates the snippet. To remove these errors, we could just escape these tabs manually by adding \t like so:

...
"body": [
  "class  extends StatelessWidget {",
  "\t@override",
  "\tWidget build(BuildContext context) {",
  "\t\treturn ListView.builder(",
  "\t\t\titemBuilder: (BuildContext context, int index){",
  "\t\t\t\t",
  "\t\t\t},",
  "\t\t);",
  "\t}",
  "}",
],
...

Next let's add tabstops to add insertion points which advances based on tab press.

Update the snippet to the following:

```json
...
"body": [
  "class $1 extends StatelessWidget {",
  "\t@override",
  "\tWidget build(BuildContext context) {",
  "\t\treturn ListView.builder(",
  "\t\t\titemBuilder: (BuildContext context, int index){",
  "\t\t\t\treturn $2",
  "\t\t\t},",
  "\t\t);",
  "\t}",
  "}",
],
...

This is the first tabstop and this is the second tabstop, so clicking on the tab key would advance it from this point to this point. Go back to your dart file and try it out.

So you can give the class a name of SomeWidget and pressing the tab key takes me into this spot. So i could put in a Container. And that’s how to create a Snippet