Are you new to Visual Studio Code? Or are you just starting to learn how to code and want some tips to improve your coding tool? In this article we are going to show you five basic Visual Studio Code extensions that will make your code more readable, and will give you the much needed productivity bust during your first coding encounters.
Visual Studio Code (VS Code) was released in 2015 by Microsoft. Since then, it has become one of the most popular source code editors because of its many perks, such as syntax highlighting, embedded Git control and code completion. But what we love even more about VS Code is that it can be customised with tons of extensions, created and nurtured by the Developers’ community.
Here, Elisa and I introduce you to our top five extensions for beginners. Enjoy!
1. It’s Alive! ⚡
Don’t waste time saving files and reloading! With Live Server extension you can launch a local server with live reload. It’s very easy to use: just click on your Status Bar and “Go live”!!! From now on, you will be able to test your code without reloading manually the webpage to see the applied changes.
2. “Sjdlfsdfsdflsdflsdf” no more!
When we need some filler text to complement our code, this extension will help us create a paragraph, a line or both in a very elegant and easy way. There is no need to search for more random texts as you can create your own. Lorem ipsum resembles Latin but has no real meaning. Each sentence is randomly delivered to simulate real text as shown below:
But it can do more! And Emmet is great for that, since we can create up to 10 paragraphs in just one click or control the amount of letters that are generated. You can type lorem and then tab and it will expand into a paragraph of completely random sentences. For example, p*2>lorem abbreviation would generate a 2-paragraph text. We can change this value and customise our text.
Bonus: furrier versions of this one, but outside VS Code, are Cat Ipsum and Doggo Ipsum.
3. Get your color on!
Why don’t you try to make your code look prettier? As important as a clean code might be, it’s also important to create a value-added beautiful code. Better than the default color decoration boxes, this extension styles css colors found in your code and make it easier to read. You’ll get a better insight of the color you are actually applying:
4. Put some color into that indentation 🌈
Indentation makes your code easier to read and maintain. However, sometimes we can lost track of the inner interdependencies of our tags. But fear not, since indent-rainbow has come to the rescue. With this extension you will keep each of your blocks in check with four indentation color levels.
As some of the reviewers said, this is the type of extension you didn’t know you need it, but now you do.
Also, a helpful command in VS Code is ctrl+K+F, which automatically indents your selected code.
5. Never miss one
Following our cheerful number 4 extension, we’ll get uplifted too when we add Rainbow Brackets to our extensions list. This will make our life easier especially when programming with JavaScript and its libraries. You won’t miss a parenthesis again and your VS Code will feel dull and boring without it.
And what if these last two extensions had a lovechild? You’ll get Bracket Pair Colorized.
6. Personalize it!
Another available option for your VS Code station is that you can customise its interface. Choosing from a wide and wild range of UI themes, you can find dark, light, semantic colouring schemes and even some of them, like Noctis, specifically designed to relieve eye strain thanks to its warm palette.
7. Get downloading!
Remember that you can browse and install the extensions directly from VS Code: just click on the Extensions icon on the left side of VS Code or Ctrl+Shift+X and search for your favourite ones! If you need some more help, here’s the link with a list of the most popular extensions on the VS Code Marketplace.
We have explored our five most loved extensions for newbie coders, such as a local port to check changes along you code, a placeholder text generator, and three nice extensions that take advantage of color to make your code more clean and readable. We hope these will become your loyal companions in your coding adventures. Please share with us in the comments below your favourite extensions!
