Skip to main content

Three ways to use user defined vscode snippets

What are code snippets?

Code snippets are templates that make entering repeated code patterns, such as loops or conditional statements,  easier.

Types of snippets

  • Built-in snippets 
    •  Vscode has built-in snippets for number of languages like PHP, Javascript, Typescript etc.
  • Snippets available on market place 
    •  There custom snippets averrable on marketplace for specific frameworks / languages and platforms as well. For example snippets for VUE, Laravel etc.
  • User defined snippets 
    • You can defined your own snippets, It's called user defined snippets. You can create snippets according to your need using the snippet templates.

Ways you can use user defined snippets

You can use snippets in several way. Like generating fixed static code or generating code with placeholders according to your need.

Snippet for fixed static code 

You can create a snippet to insert the fixed static code, which is fixed but you need to add that in several places. You can use snippet in this case.

For example, You need to add copyright in every page footer. 

  1. <p> Copyright @ 2020 </p>
You can create a snippet for it like,
"Add copyright text": {
  "prefix": "copyright",
  "body": [
    "<p> Copyright @ 2020 </p>"
  "description": "Add copyright text"

Snippet as template with placeholders

You can create a snippet for the repetitive code block have changes in some fixed attributes. 

For example,  Form Input of of bootstrap. In this case you just need to change the Label and type of text.

  1. <div class="mb-3"> 
  2.     <label for="exampleFormControlInput1" 
  3.           class="form-label"
  4.     >
  5.           Email address
  6.     </label> 
  7.     <input type="email" 
  8.      class="form-control" 
  9.      id="exampleFormControlInput1" 
  10.      placeholder=""
  11.     > 
  12. </div>
In the above code block, Things that will be changed per block is,
  • Label value
  • Label for value
  • Input type
  • Id of input
  • and Placeholder value
We can create template for form-input like this,
"Form input block": {
  "prefix": "form-input",
  "body": [
    "<div class=\"mb-3\"> ",
    "    <label for=\"$2\" ",
    "          class=\"form-label\"",
    "    >",
    "          $1",
    "    </label> ",
    "    <input type=\"$3\" ",
    "     class=\"form-control\" ",
    "     id=\"$2\" ",
    "     placeholder=\"$4\"",
    "    > ",
  "description": "Form input block"

Here, $1, $2, $3, $4 and $0 are tab-indexed placeholders. Number after $ shows the tab index. Like $1 means first tab. $2 means second tab and so on. $0 is alway last.

Note, I'm using $2 for label for  and id of the input both, as both will be sharing the same value. So It will write on the both places using multi cursor.  Cool, Right!

Snippet as Modifiers / Generator

Suppose you have a javascript code where you are following code convention like this,
For any [variable Name] error checking code is invalid[variable Name].

E.g For Name, validation function is invalidVariable()

  1. var Name=""

  2. invalidName() {
  3.       return _.get(this.errors, "Name[0]");
  4. }

In this case, We can create a snippet we can generate invalid[Variable Name] function for us. This kind of snippet can be created using a special built-in variable  provided by vscode. ${TM_SELECTED_TEXT}

Snippet will look like this,
"validation error check function": {
  "prefix": "invalid-feedback-function",
  "body": [
    "invalid${TM_SELECTED_TEXT}() {",
" return _.get(this.errors, \"${TM_SELECTED_TEXT}[0]\");",
" }," ], "description": "validation error check function" }

${TM_SELECTED_TEXT} takes the code currently selected as input.

You can create more complex and useful snippets according to your need. Check the official link to the vscode user-defined snippets to find out what other built-in variables are available to create snippets.

Here is the link to official  documentation for vscode  user defined snippes: 


Popular posts from this blog

Google blogger Ideas panel

Google blogger Ideas  I opened by blogger today, and..   I got this.  Google blogger Ideas  A panel suggesting a topic on which I can write my next blog. It's fetching unanswered question from web according to your previous post and topics. It was something, I was really looking for, after all it takes time to finding subject on which to write next and still being in the same niche.  Awesome feature Blogger! 

Apache : setup basic auth with apache in windows

Authentication is any process by which you verify that someone is who they claim they are. Authorization is any process by which someone is allowed to be where they want to go or to have information that they want to have. I will show here how to set up basic auth on the apache with windows. Pre-requests  Windows VPS Apache server ( That's it ) ( In windows it might be difficult to setup the Apache alone. So instead use something ling xampp , wamp or laragon .) RestClient (  I personally use the postman , but you can use your preferable client)  Windows VPS provider Steps  Enable the necessary modules in the Apache Create the password file Set the auth directives in the virtual host file. Verify basic auth. Enable the  necessary   modules  in the Apache Open the httpd.conf file in the apache's conf folder. httpd.conf file Enable the necessary modules to make the basic auth working. Necessary modules  mod_auth_basic

Firebase - update a spacific fields of single element of object of array in firestore

Firebase - update a spacific fields of single element of object of array in firestore  Its actully advisable to use map instead of array when ever it is possible. But, there are cetain cases where you don't have option to do so.  For example, you are directly saving the response from some outer source without any modification and they send you an array. In this case you will have array to work with. Firestore does not support array here is why  "bad things can happen if you have multiple clients all trying to update or delete array elements at specific indexes. In the past, Cloud Firestore addressed these issues by limiting what you can do with arrays " For more details information you can refer to Kato Richardson post Best Practices: Arrays in Firebase .  Firestore document having array [ used from stackoverflow question ] Suppose you have array of object something like shown in array. Now you want to update endTime field of the object on the index [1]