It's #FrontendFriday - Useful Visual Studio Code Extensions
In general, extensions have the advantage of "improving" an existing product (e.g. software) or offering the possibility of adapting it to your own needs.
Extensions for development environments (IDE) usually aim to relieve the developer of work and thus save time and effort. Recurring tasks, for example, can be solved using shortcuts or even completely automated.
Among many positive effects, careless errors can be avoided and better code quality can be achieved.
Below you will find some very useful extensions to support you in your work with Visual Studio Code.
Live Server
| Live Server is a local deployment server with a "live reload" function for static and dynamic websites.
Some Angular developers are familiar with the npm package nodemon. In principle, Live Server offers the same function for your IDE. If you make a change to the code and save the modified file, the changes are reloaded directly in the browser without having to perform the update yourself. This leads to a significantly faster and smoother workflow. |
Auto Rename Tag
| Auto Rename Tag is a very small and simple extension that nonetheless makes programming much easier.
In an HTML code, the opening and closing HTML tag must always have the same name. If you want to change a tag later, it must be changed manually in both places without an extension, otherwise it will lead to a syntax error. Especially with large and nested HTML code, it is not always easy to find the two tags that belong together. Auto Rename Tag makes this task easier by automatically adapting the opening and closing tag in exactly the same way. |
|
IntelliSense for CSS class names in HTML
| IntelliSense for CSS class names in HTML is an extension for the auto-completion of CSS rules.
This is very useful for particularly large CSS files. If you want to assign a CSS rule to an HTML tag, the available rules are suggested directly via a dropdown. This applies not only to your own CSS rules, but also to those that are integrated into the HTML, such as Bootstrap. |
CSS Peek
| CSS Peek facilitates the interaction of HTML and CSS.
This extension offers the following options:
|
Pretti
| Prettier is one of the most popular extensions for VS Code.
The shortcut "Ctrl+alt+F" can be used to format entire files or just selected areas of a file. For example, the formatting indented the code correctly, replaced double quotation marks with single quotation marks and added forgotten semicolons. The extension offers even more shortcuts, setting options and good documentation on its website https://prettier.io/. |
Source |
Install extensions
Finally, a short guide on how to install extensions in VS Code:
Open VS Code → open the tab for extensions on the bottom left-hand side or use the shortcut CTRL+SHIFT+X → enter the desired extension in the search field → select the extension and click Install → after installation, VS Code may need to be restarted.
