Extensions for VS Code

When you are coding you want to be at your peak of productivity and not care about some small mistakes that will be giving you a headache in the future, like a forgot ; in the code.

To help you be more productive there are several VS Code extensions that you can find in the extensions panel on your software.
Below I bring my 10 extensions that I use regularly in my VS Code.

1. Auto Import
2. Auto Rename Tag
3. Auto Close Tag
4. GitLens
5. Live Server
6. Lorem Ipsum
7. Code Spell Checker
8. CSS Peak
9. PHP Server
10. Quokka.js

Now let’s see in details this extensions.

1. Auto Import
   This extensions allows you to import automatically packages in your JavaScript, TypeScript and TSX files.
   For instance, you are working on a data.js file that contains an array with multiple items, like id and name, and you want to import these into a new JS file, like a view, you just type var.map(item => (Something key={item.id})) and press tab, it’ll auto import the data.js file to you.
2. Auto Rename Tag
   This extension renames all HTML and XML tags, basically anything with <tag> will be renamed as you want.
   Lets say that you called a p tag but you saw that it would be more aesthetic with a span tag, you just need to put your cursor in the opening tag and rename it, the closing tag will be renamed automatically.
3. Auto Close Tag
   This is self explanatory, you open any kind of tag, including custom ones, and it will be closed automatically.
4. GitLens
   For those working on teams or even alone and using GitHub, this extension provides a glimpse in your code, provinding information such as whom, why and when the code was edited and changes history.
5. Live Server
   Live server is just for HTML files, it creates a localhost with auto-reload that refreshes the page when something is edited in the .html.
   This extension is helpful when working on static pages.
6. Lorem Ipsum
   How about instead of visiting the lorem ipsum webpage to generate dummy text you do this in VS Code? With this extension you can add a single line or multiple lines in your code to see how it will be when the real elements arrive on the page.
7. Code Spell Checker
   A commom spell checker for VS Code, like the one in Word. It helps to see where you misspelled the text in your code.
8. CSS Peak
   It provides a quick glance at the CSS class or id from your HTML file, not needing to browse through the original file. It works with HTML and EJS files and the styles supported by this extension is CSS, LESS and SCSS.
9. PHP Server
   Similar to Live Server but this serves locally a PHP file instead of HTML files. It’s a alternative to XAMPP or WAMPP but it doesn’t come with PHP MyAdmin included, only provides support for PHP files and it does not have a auto reaload function.
10. Quokka.js
    This is to boost your productivity while coding in JS and TypeScript. It’s a tool for prototyping the code in your IDE, the runtime values are updated automatically and displayed next to the code, while typing it.