5 Useful VS Code Extensions for Freshmen in IT Majors

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.

Live Server

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.196.168.0.1);
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.

Babel JavaScript

To be conversant with JavaScript, it’s also necessary to be able to navigate the written code and not waste time while you could be actually writing. This helper – just as EssayHub essay service – will be integral to your studies.

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.

Prettier

Available for:

HTML
CSS
GraphQL
TypeScript
JavaScript
JSX
JSON
Flow
Vue
Angular

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);
manage the punctuation (like add a comma after objects’ properties in JavaScript);
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.

Available for:

HTML
XML

GitHub Copilot

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:

Ruby
JavaScript
Go
Python
TypeScript

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.

Takeaway

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).

You may also like: