Programming is complicated. There are many best practices to remember, guidelines to follow, and ‘known issues’ to avoid while maintaining productivity and code quality.

The modern development process is unimaginable without automation. If something can be automated and shifted to tools, it’s worth doing.

In this article, I will discuss several VS Code automation tips that frontend developers should follow. Let’s Jump in!

Live Server

Usually, when you make a change in your code, you need to refresh your browser manually to see the changes, right? In other words, if you make 100 changes to your code, you need to refresh your browser 100 times (Tiring and Time-consuming! 😫).

Live Server, the cool extension available in VSCode, automates this for you.

It takes your stress away from saving and refreshing the browser every time you want to see how your changes look.

Live Reload, a shiny feature that comes with the Live Server, ensures your changes are rendered immediately as soon as you save your work. This gets even more exciting if you’ve got VSCode’s auto-save feature enabled. Pretty awesome, right?😋

Turbo Console Log

Ever felt the need to automate the process of writing meaningful log messages? Turbo Console Logis the perfect choice for that! 🎉 With the help of Turbo Console Log, you can:

• Insert meaningful log messages automatically.
• Comment and uncomment all the log messages in the current document, inserted by the extension.
• Delete all the log messages inserted by the extension from the current document.

Tip: Build & share independent components with Bit

Bit is an ultra-extensible tool that lets you create truly modular applicationswith independently authored, versioned, and maintained components.

Use it to build modular apps & design systems, author and deliver micro frontends, or simply share components between applications.

Live SASS Compiler

Now it is possible to auto compile your SASS or SCSS files into CSS easy and inside the code editor itself in real-time with the Live SASS compiler and automatically gives you a live preview of the app or the compiled styles in your browser, just like this;

Live SASS Compiler is a handy extension available in VSCode with a lot of cool features including:

• Live SASS and SCSS compilation.
• Quick status bar control.
• Customizable extension name (.css or .min.css).
• Customizable exported CSS style (expanded, compact, compressed, nested).
• The customizable file location of exported CSS.

Auto Rename Tag

Ever changed an HTML tag name and forgot or incorrectly renamed the other tag? 😣 In an application that carries hundreds of code lines, this kind of manual update is difficult and tedious.

Let me give you two options.

You can either spend your precious coding time and try to figure out where you went wrong or simply install an extension and let it rename the second tag for you.

Auto Rename Tag is a super useful VSCode extension for developers; as the name suggests, it auto renames the second tag as the first one is updated and vice versa.

ESLint

Code linting is a static analysis used to check programmatic errors or code that doesn’t adhere to specific style guidelines.

“Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it.” — ESLint site.

ESLint, one of the most downloaded extensions in VS Code, with almost 13 million downloads to make sure you stick to standard practices like positioning, indentation, and many more. This extension requires you to install ESLint on your computer either locally or globally, and you can simply do it by running npm install eslint.

You can visit the Visual Studio Code extension marketplace page for more detailed installation and configuration instructions.

Want to see a simple example of how ESLint can help you?

This error is evident when you have a small amount of code. But imagine your code contains hundreds of lines. By running ESLint, you can quickly identify issues in your code to increase the code’s integrity and quality.😃

Prettier

Developers spend a lot of time and mental energy formatting their code.

After all, you don’t need to bother about styling anymore if Prettier formats everything for you, right?

Prettier, a trendy VSCode extension among frontend developers, with 11 million downloads and counting, takes your stress away. You can just press that magic key, and poof 💨, the code is formatted. Here’s why Prettier is incredible:

• When the style guide changes, Prettier can automatically apply it across the whole codebase.
• No effort in fixing formatting.
• No time wasted discussing styling in pull requests.
• No need to look up rules in a style guide.

Prettier not only supports JavaScript, but it also supports a lot of different syntax out of the box, including TypeScript, CSS, JSON, JSX, GraphQL, and many more.

There are other similar extensions, and one of the popular ones is, Beautify! With a few settings and configurations, you never have to worry about writing ugly codes. Beautify turns your code into a beautiful and consistent one.

Pre-Commit Hooks

So far, I have discussed different extensions in VSCode that you can use to uplift your productivity. As the final tip for this article, I am gonna discuss pre-commit hooks. So what is actually pre-commit hooks? Some may have heard about it before, and some may have not.

Git hooks are one of the most underrated features in git and can enhance your productivity as a developer.

Did you ever want to run a command every time you commit or push? Then git hooks are exactly what you’ve looked for! 😎

Git hooks are custom scripts that run before or after a git command to automate manual tasks. There several git hooks available, and the pre-commit hook is one of my favorites.

Some of the exciting features of the pre-commit hooks are:

• They are run first, even before you type in a commit message
• Exiting with anything other than zero aborts the commit.
• A Pre-commit hook is used to inspect the snapshot that is about to be committed.

assure you have not forgotten anything, ensure tests run, or examine whatever you need to check in the code.

With the use of a pre-commit hook, you can check for code style, trailing white spaces, unwanted imports, or check for appropriate documentation on new methods.

Conclusion

Great tooling helps developers to write faster, cleaner, and more consistent code. Since the beginning of its launch, Visual Studio Code (VS Code) introduced by Microsoft has gradually won many hearts.

In this article, I have discussed different extensions and methods you can use in VSCode, which will boost your productivity and automate the development process.

There are many more VS Code extensions that you can explore for all kinds of use cases. If you find any extensions worth sharing, mention them in the comments below.

Thank you for reading!!