Custom Visual Studio Snippets - Flutter Tips and Tricks

hello everyone uh with visual studio code you can create custom snippets and uh i really like to have custom snippets for my flutter applications and uh in this video i thought to show you how you can create a custom snippet to set up your own manual like favorite um flutter scaffold application because as you know when you create a flutter application with fluster create it will just go and create an application from a template and that template has a lot of code so usually what i end up doing is that i create an application with flutter create then i have to spend a few maybe just 20 30 seconds to customize that and make it my own and the way i usually go about doing that is i go and strip off the all the home page stuff and then i go inside the main function and return and do the run app and return the material blah blah blah um and so it's a whole process so um and i do that or at least i used to do that every time i created a flutter project with fluster create so that was before i started working with visual studio code snippets and they're very very useful because you can customize exactly what that snippet contains so in this tutorial i thought to show you how you can create a visual studio code snippet that has your own dream flutter project template so let's have a look at that so what are snippets uh snippets as their name indicates i mean if you're a programmer from before you probably already know what snippets are but they're just like reusable bits and pieces of code it's kind of like lego bricks that you can um buy the ones that you want and and customize them and build them exactly how you like so code snippets are just literally keyboard shortcuts for bringing in more text than you could basically type in that same amount of time so what we could do is to first go ahead and create a code snippet in visual studio code so i'll show you how it's um it's done let me change the screen layout a little bit i'm gonna bring up visual studio sorry at terminal here and um i'm right now in this folder and but you can be wherever you want wherever you prefer to create your philosophy projects and i'm just going to create a folder here and let's actually say flutter create testing snippets okay i'm going to say or g s e pixel t and you don't have to do the origin part that's just a habit so that is gonna create a flutter project for me here and i'm gonna resize the window so you see the entire thing then i'm to say cd testing snippets and let's up let's bring up visual studio code and have a look at what is happening here so i'm going to increase the size of your gs3 code to quite ginormous so it's quite visible then i'm going to go to the main dar file and you're probably already familiar with like some of the other built-in snippets of visual studio code like stl which creates a stateless widget so if i just bring that up you can see that it allows me to type and it like literally replaces in another place as well so this is like injecting a variable inside a template but sorry it's a snippet so stl is like the shortcut for that snippet and then you can see that it will bring up all the snippets that match that criteria so in order to create a snippet in visual studio code you have to bring up the snippets configuration file and the way to do that on a macintosh is with command shift p and then in here you will just type snippet which is configure user snippets or if you're on linux and windows you can just say control shift p and then type snippet to go to preferences configure user snippets okay so i'm just gonna go there and in here you can see we um we can create different like snippet files and here i've created a flutter dot code snippets but you can create a new one if you haven't done this before then you have to say new global snippets file and just give it a name and here i've just called it flutter so i've basically done a new global snippets file and then i said flutter but just so i can demonstrate it to you so i'm just going to say new global snippets file and let's just call it um flutter scaffold or something like this okay and then you'll see this is like the structure of that file it should kind of like every snippet should be um so basically it is a as you can see is a json object in here and uh it says that well yeah you can then create like let's see an array somewhere if you have a look here example print print description okay so here so the name is just the name of the snippet so let's go ahead and do that so let's go in here and just say my custom snippet okay and you can see that there is a key in here and that is the scope basically it tells like in which files which type of files this snippet is valid so we just want this snippet for instance to be available in any file that ends with the dart extension so i'm just going to say dart you can see other examples like javascript typescript so maybe it's not actually the file extension it's actually the file type so javascript and typescript are not extensions because typescript files end with ts and javascript files and with js so um it's just the file type so i'm assuming like if you want a custom snippet for python you would just type python instead of pi so let's just go ahead and say we want to have a dart scope so let's just give it a key of scope like this and then you'll see that it says oh body is missing so uh we will go ahead and create a body for it and we'll just say hello world something like that okay so now it's happy it's not giving us any errors and then you can see you can do other things like a prefix and then a description this prefix is like what you actually type inside your editor to get this um snippet up and running so in here let's just say hlw as in hello world okay so that is it's a prefix okay so hlw and i'm just gonna save this file so it's just called my custom snippet let's just rename this to hello world snippet dart snippet i saved that file then i'm going to go back to this main dart file in here and i'm just going to type that little prefix hlw okay so let's just say hlw and you can see that it says hello world dart snippet and if i click on it it will just replace it with hello world so that's great that's great and all but hello world on its own it's not so um meaningful so what we want to do is to create a a snippet that we can every time that we create a new floater application it will basically we will just be able to replace the entire main dart file with that snippet okay so let's just create our own dream snippet in here which is our application so the way i like to do it is to go ahead here uh get rid of all these comments in here that's what i usually like to do like that and i'm gonna say home page in here don't pass any title okay so that's the way i like to do it you have to find the way that you like to basically create your home pages so i'm going to say in here and use stateless widget and foster a stateless widget i'm just going to call it home page okay and then here i like to just return the scaffold and then i'm going to say app bar and then i'm going to say again um app bar title and for the title i'm just going to say um hello world i think it's also a text and then i'm going to say this is a const okay and that's it really so that's my home page it just has a scaffold and an app bar and so this is not a flutter specific video really but um i mean it's it's not a video that we're going to go into details about how to write flutter applications that's what i mean so then i'm going to grab this material app this is how i like to do it i'm just going to do that and then i'm going to kill my app basically here i'm going to put my flutter application in here so like that i'm going to remove that scene data perhaps could be const or no that can't be const either okay so this is basically the way i like to create my application so it's just the material app in main function inside run up and then it has a home page so that's my like dream scaffold i kind of wish like i could create a template for flutter create to be able to use this every time i create a project but we could also just say home page here okay so what i'm going to do is i'm going to copy this exactly as it is so let's just copy that entire content then we're going to go back in here so let's go in here make sure that scope is still dark and you can see this is a string so we can't like paste our entire application in here because even our application contains other strings and even like a line and new lines in here so um we can't uh we can't go ahead and just paste it entirely in this body and the good thing about this body is that it allows you to create an array so it doesn't necessarily have to just be one line of string so what we're going to do in here is just going to say body is just an array okay then what i'm going to do is i'm going to paste that entire text in here so let's just say um like this okay so let's have a look at how it looks like yeah seems fine all right so what i'm going to do is i'm going to decrease the size of this a little bit so you see um the content entirely and what i'm doing with it so what we can do in here is to go ahead and see if we can um get visual studio code to make sure every line in this body is a string so you have to make sure that every line in here is a string like this so begin with a quotation mark and with a quotation mark and then a comma and an empty line will be just empty quotation marks and comma but this is quite time consuming if you want to do it ever like line by line so thankfully there is a better way of doing that and that is on a macintosh if you hold down the command and option and i believe on a windows machine and a linux machine it would be control alt control and alt instead of command and option on a macintosh so command an option on a macintosh and then just press just begin from the start of the first line and then press the down arrow on your keyboard so just like this you can see it just does it like this all right and i can see in here i have a little bit of a in here i would really like this to start here so then i'm gonna do it like this and then press um double quotes so it inserts double quotes at the end of every line at the beginning of every line then i'm going to jump to the end with command write on a macintosh or control right on a linux linux machine or windows machine and then type quotation mark comma so that basically creates the strings for you so let's have a look at what it is complaining about invalid characters okay that's fine and then in here we're gonna remove that let's see what it actually is complaining about so invalid characters uh evaluation control characters must be escape control characters uh okay that's fine that is fine that is fine so does it mean like there's something wrong with these perhaps could it be that there is okay so is it something wrong with it some sort of a tap or perhaps but it's not com oh it's space there i see so there are spaces in there but there's tabs in here so it just doesn't like the idea of tabs so because i'm using tab characters but i could be using space characters so this is very interesting because it the way it was basically run here maybe it wasn't formatted properly so let me have a look here here there are spaces uh but there there were tabs so let me copy this content again and i'm gonna undo all of these and then i'm gonna go here and go and paste that stuff in there let's have a look at see are the yeah these are still tabs unfortunately so uh for some reason they're being placed in as tabs but here they're fine so and what we could do is um not play with the formatting so much so i'm just going to leave it right there and i'm going to let visual studio code to fix the tabbing for me so once again um control alt sorry um command alt down or control the sorry on a macintosh would be a command option and on a linux machine or windows it would be control and alt so quotation marks go at the end quotation marks come up and that is now created then what i'm going to do is just i'm just going to save this or maybe even indent it like this so now we created that um scaffold without a problem um actually i can't say without a problem there are so many problems but the important thing is that there can't be any tabs in here apparently visual studio code doesn't like that so and we're going to also change this prefix now from hlw let's just call it um my scaffold or something or my scaffold okay remember prefix is the text that you have to write inside your editor to get the suggestion to insert your um snippet in visual studio code so my scaffold and in here we're just going to call it my scaffold as well i flutter our scaffold okay that's a name that you will see in the intellisense later so um now we have the flutter scaffold code snippet that is globally created for flutter applications so what you can do in here is just whenever you create a new project that looks kind of like this so this is like the code that you end up with whenever you do fluster create you want to be able to replace all of that with your flutter scaffold so let's basically test this out so what you will do then after philosophy create is done you will just select everything and just remove it and then have a look at the prefix we call it my scaffold so let's go in here and just type my scaffold boom there we go and then it inserts all that for you so instead of having to uh mess with the defaults uh like template uh you could just go ahead and do this and i find i found this a lot easier than having to go and mess with flutter's default templates so um i use this every day when i create like um when i create a piece of code that i know it's going to be reused many many times maybe in different projects um if that code is like so small that it could just literally be a scaffold like this sorry it could literally be a snippet and for instance this is not a code that you would go and put inside a package to reuse in different projects because it's just a basic scaffold so when you stumble upon these cases you can go ahead and use snippets in a visual studio code so um i hope you enjoyed this video and if you have any questions or comments please let me know have a great day

Channel: Vandad Nahavandipoor

Views: 5,993

Keywords:

Id: g93mls_EJmU

Length: 15min 37sec (937 seconds)

Published: Mon Jan 31 2022