Writing code faster isn’t just about knowing the syntax—it’s also about mastering the tools that make development faster and more seamless. While typing out code by hand helps build muscle memory, there comes a point where repetitive tasks become tedious and counterproductive. If you’re already comfortable with HTML, it’s time to leverage techniques that minimize grunt work and enhance your productivity. One of the most powerful tools for this is Emmet, a feature built into Visual Studio Code that allows you to write complex HTML and CSS with short abbreviations. This guide covers seven practical tips for Visual Studio Code, many of which utilize Emmet, to streamline your workflow and make you a more efficient coder.
1. HTML Boilerplate
- Open your
index.html
file. - Type
!
and press Tab or Enter.
This will automatically insert a basic HTML boilerplate, including the<!DOCTYPE>
,<html>
,<head>
, and<body>
tags.

2. Tags Auto-Complete
- Start typing an HTML tag (e.g.,
div
), and Visual Studio Code will suggest options for you. - Press Tab or Enter to auto-complete the tag, including the closing tag.
Example: Typingdiv
and pressing Tab completes it as<div></div>
.
3. Class Auto-Complete
- Start typing a period followed by a class name (e.g.,
.myclass
), and Visual Studio Code will automatically insert a div tag with the included class name. - Press Tab or Enter to auto-complete the tag.
Example: Typing.myclass
and pressing Tab completes it as<div class="myclass"></div>
.
4. CSS Auto-Complete
- Open a CSS file or add a
<style>
block in your HTML file. - Start typing a property (e.g.,
color
), and Visual Studio Code will suggest valid properties and values. - Press Tab or Enter to select a suggestion.
Example: Typingbackground
will suggestbackground-color
,background-image
, etc.
5. Typing Multiple Lines at One Time
- Press and hold Alt (Windows) or Option (Mac).
- Click and drag your cursor vertically to create multiple cursors.
Alternatively, press Ctrl + Alt + Down Arrow (Windows) or Cmd + Option + Down Arrow (Mac) to add cursors to subsequent lines. - Start typing, and the text will appear on all selected lines simultaneously.
6. Typing Dummy Text
- Type
lorem
and press Tab or Enter in your HTML file. - This inserts a block of lorem ipsum placeholder text.
- Example: Typing
lorem20
and pressing Tab inserts 20 words of lorem ipsum text.
7. Multi-Selecting Text
- Press
Cmd + D
(Mac) orCtrl + D
(Windows) to select the next occurrence of the currently highlighted word or text. - This is useful for making quick edits to repeated text, such as variable names or HTML attributes.
- Example: If you need to change all instances of a class name in a file, highlight one occurrence, press
Cmd + D
repeatedly to select the others, and start typing to replace them all simultaneously.
In Conclusion: Writing Code Faster
By incorporating these tips into your daily workflow, you’ll not only save valuable time but also reduce the frustration that comes with repetitive and mundane tasks. This will free up more mental energy for focusing on the more creative and problem-solving aspects of coding that truly define great developers. Visual Studio Code is an incredibly powerful tool that offers a wide range of features designed to help you become more efficient. Mastering these features can significantly boost both your productivity and overall efficiency, making you a faster and more effective coder in the long run.
Start by implementing one or two of these techniques, and gradually build up your toolkit as they become second nature. As you grow more comfortable with these tips, you’ll find that your workflow becomes smoother and more intuitive, leaving you more time to focus on creating quality code and building amazing projects. Happy coding, and enjoy the process of writing code faster and smarter!
Ready to start coding? Check out a tutorial!