How I use Live Templates or Snippets to code efficiently?

How I use Live Templates or Snippets to code efficiently?

I usually spend my free time watching videos on YouTube on how to improve my programming craft. In one such video, the presenter appeared typing JavaScript codes so quickly that I could barely follow her. She eventually mentioned that even though she was a fast typer, the reason she was able write codes so quickly was because she used Live Templates in Webstorm.

Statistics on a laptop
Photo by Carlos Muza / Unsplash

Live Templates also known as Code Snippets can be used to store text that can be then expanded, allowing both plain text and variables. You basically store an abbreviation which represents the template. In other words, a snippet is a piece of reusable code or text that repeats a lot.

In my day to day programming tasks, I regularly use snippets from existing IDE/Editor or from plugins/extensions such as cl for class or log for console.log(''). But in this video, the presenter explained how she created her own Live Templates for unit of codes that she often typed and for variations of existing ones.

Live Template

Similarly, I often need few different variations of already existing or popular snippets, or my frequently repeated block of text such as:

cl -> console.log('object: ', object)

cls -> console.log('object: ', JSON.stringify(object))

cs -> const name:String = '' (in typescript)

I can also change existing ones such as con which can be expanded to Constructor for use in ES6 (JavaScript) to console.log('message') to suit my workflow.

Benefits

Instead of wasting time on typing repeated block of codes, I just write the abbreviation and expand it by pressing tab or enter (depending on IDE/Editor) and directly manipulate the part I want to change. I therefore automate the typing part and focus on being more productive solving real problems.


BONUS

Instead of relying solely on console logs and debuggers for back end development - I use Winston which is basically a logger - that writes into a file and can input the log in different formats such as JSON.

I find easier to go through the logs instead of having to diligently scan through endless console log streams or breakpoints. For simple debugging though, I prefer using the easier one, either console log or debugger.