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="name@example.com"
  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\"",
    "    > ",
    "</div>$0"
  ],
  "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:
https://code.visualstudio.com/docs/editor/userdefinedsnippets 

Comments

Popular posts from this blog

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]

Sciter : GUI Application with Golang using HTML/CSS

GUI library for golang sciter This is the words from Sciter's Web site, Sciter brings a stack of web technologies to desktop UI development. Web designers and developers can reuse their experience and expertise in creating modern looking desktop applications. Various GUI frameworks offer different UI declaration and styling languages, such as QML and  XAML (Microsoft WPF) . On the contrary, Sciter allows using time proven, robust, and flexible HTML and CSS for GUI definition and GPU accelerated rendering.   Before using sciter I already tried other alternatives but none of them was satisfactory as an example first i tried andlabs / ui  library   i already have written a post on it. You can read it on post gui programming with golang .  But this library is still under construction and has no support for production apps. Secondly, I go for electron but the problem was my simple calc like the app was of size 150mb. Which is 15mb of go and other was the e

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