VS Code Tips & Tricks

Oct 5 2021 · Dart 2.7, Flutter 2.2.3, VS Code 1.43

Part 1: Common Tips & Tricks

04. Create Code Snippets

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 03. Edit Code Faster Next episode: 05. Explore More Tricks

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

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.

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

		],
		"description": "Creates a Statelss widget with ListView.builder"
	}
class  extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (BuildContext context, int index){

      },
    );
  }
}
...
"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}",
  "}",
],
...