Skip to main content

13 VSCode Extensions That Every Web Developer Should Use

These are the most common extensions at VSCode that may be useful for you

VSCode Extensions
Almost every Web-Developer knows what VSCode is and why is it so important to use its extensions, they help us to debug our code, make it more readable and prettier, and just add more useful features to our workspace
Of course, there’s not every useful extension, however, I have added 13 extensions without which I just can’t live.

1. Auto Close Tag

It’s one of the most important extensions, As you may have noticed from the title, it automatically adds a close tag that you wanted to write. You don’t need any command to activate this extension

2. Auto Rename tag

When you want to change your <button> tag to <a> you just will need to change the first(opening) tag and the second will change automatically

3. Beautify

The function of it is straightforward— when you have an ugly file without any “spaces” and “tabs”, where every tag goes right after earlier, beautify will really help you
  • To use this extension you first need to press F1
  • Then write “Beautify” and choose it
It will automatically make your code more readable and prettier

4. Bracket Pair Colorizer

It gives every pair of brackets its own color and you can find the right pair quickly and easily

5. ESLint

ESLint statically analyzes your code to quickly find problems and also can automatically fix them. When it defines a problem it will have a red underscore and you can easily fix it yourself

6. JavaScript (ES6) code snippets

My favorite extension for JavaScript. When you write something at your code and forget how calls function it will automatically offer you to write it down and you can just press Enter

7. Kite

Kite does almost the same thing as “JavaScript (ES6) code snippets”. It has neural networks that help you to code faster

8. Live Server

When you write your HTML, CSS, or JavaScript file you can press “Go Live” at the bottom of your VSCode window and it will automatically add your changes on a webpage without any reloads and etc.

9. Material Icon Theme

Material Icon Theme adds icons to your files and folders at the top of your VSCode window and you can much easily move among them

10. One dark pro

One more extension that will make your VSCode workspace more comfortable and handsome. It changes your standard theme to incredible new

11. Open In Browser

It’s an elementary extension that allows us to open our files right through the browser


12. Path Intellisense

When we need to write a path at our “href” or “src” tags it will provide your a path to an already existing file

13. Settings Sync

The latest extension is actually the most important. It syncs your setting at VSCode to your account(Google, Github, etc.) and if you delete VSCode itself nothing terrible will happen

Conclusion

I used and use nowadays these extensions for Web-Development and not only. I hope that you enjoyed this article and that these extensions were useful for you.

Comments

Popular posts from this blog

8 VS Code Plugins To Improve Your Productivity

  VS Code is a great editor that ships with many features out of the box. That is one of the reasons why it’s the most used IDE. However, there are some areas where it can be improved — and that’s where extensions come into play. I’m not a big fan of having many plugins installed. There is always the risk of making your editor slower or introducing too much magic into your daily routine. You still need to be in the driver’s seat. That’s why I try to stay as close to the raw features as possible. I have no more than ten plugins installed at any given time. I try to be very tidy there. If you installed something and you feel it is not helping, just delete it. It might be distracting you or impacting performance. However, there are some very specific extensions that will have a very important impact on your productivity. I want to focus on those in this article. You are most likely not going to need them all, as your workflow might be different than mine, but you might discover something

5 Common CSS mistakes developers make

If you are starting your carrier as a web developer, CSS is a headache for many developers, based on my experience. It takes time to learn it and master it. This article is covering some common mistakes that you may face when writing CSS code. Ready, let’s go! 1. Using px when it’s not needed⁣   Do you know that you don’t need to use px when you want to set the a value to 0: 2. Repeating the same code⁣   Always keep in mind the DRY rule. Don’t repeat yourself. The number of code lines will cost you in terms of app performance and loading time. 3. Using color names⁣   Using a color code is better: 4. Not using shorthand properties⁣   Avoid multiline of code when you can do the same thing with one line: 5. No font fallback⁣ Always complete the font you’re using:   Read More :: 5 Common Challenges Faced by Web Developers   Read More :: Top 10 Web Development Trends for 2021