How to speed up your web development?
In this article I’ll be discussing a set of VS code shortcuts I love using aka emmet, custom snippets and extensions that help me speed up my web development.
Emmet
Emmet is a really powerful tool already built in your VS code, that can help you write many lines of HTML code in a single line. Let’s see how quickly we can add a single “div” tag with a class “container” using emmet shortcuts.
All we need to do type: .container (and then press tab or enter)
And voila, you’ll have your div tag with container class
And the best this is that your cursor will be right in between the opening and the closing tag.
Now let’s say I want to add a “div” but this time I want an “id” of “container” instead of class.
All we need to do type: #container (and then press tab or enter)
Now I want a div with both id and a multiple class. Any guesses?
All we need to do type: #id.class_1.class_2 (and then press tab or enter)
Now let’s say, instead of div, I want section tag, or one of my custom Angular/React/Vue/etc component
All we need to do type: My-custom-conponent#id.className(and then press tab or enter)
This will work for any tag you want -> <form>, <link>, <ui>, etc
For certain HTML tags like img, link emmet will already add the props for you,
Example: img (press enter or tab)
And the cursor this time will be pointed to the props, and on filling the src value of the img, I can just press tab and the cursor will jump to alt.
Adding custom props to a tag:
Now let’s say that I’ve a custom component with a custom prop, how can I leverage emmet?
My-custyom-component[myCustomProp=”prop”]
Don’t worry much about custom components with custom props, we’ll get back to this topic in custom VS code snippets.
How to do we add multiple lines of HTML code with a single line?
Well, this is where things get interesting, you can combine emmet shortcuts to create a big piece of HTML code. We combine emmet shortcuts using “>” (child) and “+” (sibling)
i.e. combining any two emmet shortcuts we learned above with a “+” will create two sibling tags while doing it with “>” will create the first one as parent and the second as the child.
Let’s practice: I want to write a section tag with class “container” which has two children -> div with class header and a p tag with class description:
section.container>div.header+p.description
The cursor is already in the first div tag, and after adding the value I can just press tab and the cursor will straight jump to the p tag.
But can we write the div tag innerHTML value in the shortcut itself? Yes we can, isn’t that brilliant. All you need to do is to add a {innerHTML} after the div tag
section.container>.header{My Page}+p.description{This is my page}
Let’s multiply
Let’s say I want to add a ui tag, with 3 li tags in it, with anchor tags in each of them and custom links inside it.
ui.list>(li.list-item>a:link)*3
You can use * to multiply and create multiple shortcuts and brackets “()”.
lorem ipsum
At times we want to add dummy text to fill up our HTML with dummy data, let’s say I want to add about 10 lines of dummy data is my description.
section.container>.header+.description*10>lorem20
just adding lorem will add the entire lorem ipsum dummy text, lorem20 will create only the first 20 words of lorem ipsum dummy text.
That concludes the most common emmet shortcuts I use to speed up my HTML code, you can visit here to get more shortcuts and info about emmet.
Now all you need to do to speed up your development is practice, practice and practice and you’ll get the hang of emmet.
Custom Snippets
Now a days we have a lot of repetition in our HTML and JS code with small variations. We can speed things up by writing our own snippets in our VS code project.
How to create a snippet in VS code?
Go to | preferences: configure user snippets
in mac: | (command + shift + P) -> type snippet -> enter
Create a new snippet file. You can create global snippets for all your projects, but I like to create snippets per project as that way I can get more specific with each snippet. Creating a new snippet file on your local project will create a <fileName>.code-snippets file in .vscode folder in your project.
The .code-snippet file is nothing but a json object file where you can declare all your snippets.
Hello Snippets
Let’s look at a simple snippet
“Add default Action type”: This is nothing but the key of our snippet.
“scope”: Where do we want this snippet? in this case we have javascript,typesctipt, it can also be css or html.
“prefix”: What we need to type in VS code to trigger this snippet
“body”: this is actually the snippet body that will get inserted in the code after pressing tab or enter after the typing the above prefix
“description”: when you type the prefix, you can see this description pop up in a tooltip in VS code.
${1:actionType}: User input in the snippet body with default value of actionType, this is where your cursor will be after the snippet body gets added to the file. After adding this value, you can press tab and it’ll jump to the next user input (which in our case in ${2:actionPrefix)
Let’s try it out
You can add your action types, actions, effects, custom components etc in the snippets and further speed up your development process. Again, practice makes perfect. Do let me know which snippets you love the most and how much time they end up saving you.
Custom Components Snippet
As we spoke above in the emmet tutorial, we can write a custom component with it’s custom props using only emmet, but we can speed it up even more using custom snippets.
Let’s say I’ve a custom button component which looks something like this:
We can write a custom snippet for it as following:
And voila, we have our custom button snippet, we don’t need to use emmet anymore for this as doing it with this custom snippet will be much faster. I can add the type of the button, size, style, click handle and the text on the button just by typing and pressing tab to jump to the next field.
\t will add an empty space (this is not required, you can always use a prettier extension and fire it up after adding the button in the HTML file)
Best VS code extensions
I use these extensions everyday to further speed up my development process.
> TabNine: “Tabnine is a powerful Artificial Intelligence assistant designed to help you code faster, reduce mistakes, and discover best coding practices — without ever leaving the comfort of VSCode.” (One small issue I have with this is that this extension is quite heavy, and eats up ram like anything. But still the predictions are top notch)
>Bracket Pair Colorizer: This color codes the brackets and really helps in the review process.