Visual Studio Code is probably the most popular code editor among web developers. No wonder, its marketplace is riddled with thousands of extensions. But how does a freshman who has just entered the world of information technology choose the right ones? Here’s a list of the most helpful extensions for you to start on the right foot in coding.
This lifesaver is among the first ones you should download and use every time you start coding. Imagine you see a mockup or other technical requirements, get excited, and write the code in one go. You reload the page manually and see a mess. Where did it come from? When did it happen? How much should you fix?
All these questions and worries can be avoided if you use this extension. Just click on Go Live on the bottom panel, and the browser will show you the tab with your website or code you’re writing. From now on, you can see instantly how your changes affect the website. Just don’t forget to turn on auto-saving in the VS Code settings, and the process will go smoothly.
Moreover, you can have a live reload of the page you’re coding not only on your computer. Imagine you’re dealing with adaptive design. Can any of us know how many different screen settings there are in the world of devices? The mockup versions might not be enough to adjust the content to all smartphones.
The mode of adaptive/responsive web development offered by browsers is a bit of help. Yet, it’s still advisable to take your smartphone (and a couple of others from the people who are connected to the same Wi-Fi) and check how the website would look on a real random phone. You might be surprised.
To open the live reload on another device:
- run it on your computer first;
- run ipconfig in your command prompt;
- find the IP address (e.g.22.214.171.124);
- put it into the browser’s address bar on your device;
- add a colon;
- put in the number from the VS Code bottom bar (“Port:xxxx”);
- open the website.
You can install it and keep away the unnecessary distractions. The extension provides important highlights of the syntax elements. Using it, you will be able to easily distinguish between variables, functions, objects, arrays, strings, and mistakes, of course.
Imagine writing a complex website (not just a landing page) that will host numerous essay reviews like NoCramming does, for example. It won’t be just about two developers. You’ll have a whole team where everyone will gradually develop their own coding (and formatting) style.
Meanwhile, both your and your teammates’ code should be clear for anyone else, there has to be some unity. That’s what Prettier was made for – to provide this unity and spare you from making small edits every minute. Particularly, it helps:
- correct minor mistakes;
- align the formatting style among all the developers (if all of them use it, of course);
- simplify the life of the person who is to review the code (they won’t have to learn the 10 ways the team members like to add indentation);
- format the document automatically as you switch a tab or a window.
As an alternative, you may also try the Beautify extension.
Auto Rename Tag
This extension will simplify your studies by a single feature that is enclosed in its name. The HTML tags coming in pairs that you misspelled or used incorrectly no longer need to be edited manually.
Just rename the first tag and see its pair change similarly.
Finally, the newcomer. This extension is not even in free access yet, but the buzz around it just keeps growing. There are even people who took advantage of the hype to upload their own extensions referring to those as Copilot’s substitutes before it is out.
VS Code already has in-built tools to give prompts of specific tags, instructions, and keywords, but that’s more than that. The assistant powered by Artificial Intelligence helps developers to write whole lines and functions. In addition, it follows your style and edits.
The GitHub extension is guided by the billions of lines of code from public repositories. So, this thing definitely knows something about coding. In particular, the extension is on friendly terms with:
However, judging from the official page of GitHub Copilot, the latter is acquainted with many other languages. So, it may be of help beyond the items listed above. Let’s see. For now, it’s available only to testers, but you can sign up to be among the first ones to try it.
The number of extensions you need to use depends on the languages and tools you work with. Mind that the extensions above are rather general and can be considered a starter pack. Anyway, in due time, you will find what you need. Just mind that some extensions can conflict since they are not compatible (but it’s not the case with those in our list).