Visual Studio Code (VS) can be defined as a developer’s life savior. You see, developers are like magicians, they have a lot under their sleeves. For instance, talented developers know many programming languages, how to debug efficiently, multitask while writing code for different platforms, and many other things. But software can be tricky, one wrong step and you can mess up a whole platform. That’s why 5 years ago, Microsoft created a gift to take the burdens off developers: Visual Studio Code. And over the past years, other software engineers and professionals have built unique VScode extensions every developer should use.
But First… What Exactly is Visual Studio Code?
Visual Studio Code is a free source-code editor redefined and optimized for building and debugging modern web and cloud applications. Microsoft created it for Windows, Linux, and macOS. And one of the highlights for most developers is that Git Hub is integrated with VS code, making things smooth for Git users. Besides this excellent characteristic, Visual Studio Code has many other features that make this code editor so popular.
Visual Studio Code Features
IntelliSense: A developing tool that provides smart completions based on variable types, function definitions, and imported modules. For example, when developers type a specific function, before finishing typing, Intellisense already has various alternatives for them to choose from. They don’t even have to finish writing everything, so it saves them a lot of time. Also, Intellisense works with every programming language, due to the many extensions they have.
Debugging: Uh! We all hate bugs, especially the ones that bite hard and itch. Virtual bugs (errors) are equally annoying, and one of the biggest issues developers have while programming. VS Code has excellent debugging support that helps devs code neatly. It consists of an interactive debugger that developers launch or attach to their running apps.
Refactoring: VS Code supports refactoring operations. In computing, code refactoring refers to restructuring existing code and changing factoring (decomposition) without changing its internal behavior. Refactoring is essential for developers because it helps to improve their software without affecting the way it functions. Think about it this way: You have a chocolate cake, and you added a vanilla filling. But then you realize that your cake will taste much better if you added chocolate chips, but instead of making another cake, you can fill it with the chips without having to destroy the cake. This is impossible in real life unless you had cooking superpowers, but that’s a simple example of refactoring works.
Split views: This feature is a game-changer for developers who like working on multiple open editors in the same project. With the split view feature, a developer can work on two different files of the same project simultaneously. And to make this feature even better, Split Share can also be customized on how a developer prefers to lay their files: vertically or horizontally.
Extensions Marketplace: The tech and programming world is bigger than the milky way galaxy (well…not really) but still is a massive industry with many different types of programming languages. That’s the main reason for the VS Code extension marketplace. Because here, developers find what suits their needs. If they need a Python extension? There is one! If they need a Language Support for Java? Plenty of options also! And the list goes on. Plus, many of these extensions are free.
Best VS Code Extensions in 2020
If you use VS Code, you’ll soon realize that it has many awesome extensions that will make your job easier. However, the marketplace is huge, with a lot of VS Code extensions for web dev productivity. So how to know which are the best extensions? As always, we got this covered for you. Here are the 10 top VS Code extensions in 2020:
1. Bracket Pair Colorizer 2
Brackets can turn into a developer’s worst enemy, especially when they work in big projects. When developers have long nested codes, it’s hard for them to identify which bracket matches the other. But with this VS Code extension, the users can define which token to match, and which color to use. Brackets are identified with colors, making the job a lot easier for developers because the code is more readable.
2. Live Server
Every time developers change their code, they need to refresh their browser to see the changes, and this task, although it seems simple, it gets tedious and boring. But with the Live Server extension, the browser is automatically refreshed when something is changed. Many developers categorize this extension as a must-have because it boosts productivity. Not only because they don’t have to be refreshing the page all the time, but also because it’s easier to spot errors and run experiments.
3. Prettier
This is one of the best Visual Studio Code extensions for programmers who work with a team. Having a consistent code is a big deal whether you are working independently or with a group of developers. Yet, when working with a team, things get a bit uglier if there is inconsistent code formatting. Prettier is the perfect extension for devs who never want to worry about code formatting again. Its main function is to create an abstract syntax tree from your code and use it to write a new code formatted according to a new set of rules. So all a developer has to do is write code, while Prettier formats it. That’s all!
4. GitLens
GitLens extension makes developers go all ‘’Where have you been all my life?”. In simple terms, the magic of GitLense is to help a developer to understand code better. For example, they get to glance at who, why, and where a code block was transformed. This extension allows devs to go through the history of a codebase and understand how it evolved. Some other features that GitLens provides are:
- Authorship code lens showing the most recent commit and # of authors to the top of files and/or on code blocks.
- Many Side Bar views such as Repositories view (to visualize, navigate, and explore Git repositories), File History view (to visualize, navigate and explore the revision history of the current file) Search Commits view (to search and explore commit histories by message, author, files, etc) among others.
- On-demand recent changes annotations to highlight lines changed by the most recent commit.
- On-demand gutter heatmap annotations to show how recently lines were changed, relative to all the other changes in the file and to now.
- Powerful commands for exploring commits and histories, comparing and navigating revisions, stash access, repository status, etc.
5. Quokka.js
Quokka.js is the modern scratchpad for JavaScript developers. With this powerful extension developers can prototype, learn, and test JavaScript/TypeScript incredibly fast. Quokka uses a fixed color type for each result, making developers easily understand the flow’s execution. Whenever a developer is typing, runtime values are updated and displayed in their IDE next to their code, as they type.
6. JavaScript (ES6) Code Snippets
This besides Quokka.js is another of the best VS Code extensions for JavaScript Developers. This code snippet is a light-weight library extension that binds any standard JavaScript calls. Whenever a developer types a shortcode code, they can see the entire code automatically printed in their editor. And to make this better, the extension also supports HTML, Reactjs, and TypeScript. It also has import/export and method triggers as well as class helpers.
7. EsLint
This extension autoformat codes for consistent formatting across teams. Sounds familiar? Yup, it’s very similar to Prettier, but it also has its unique features. For example, EsLint, whenever devs make an error coding, will make sure they are aware of it. And it gives them options to fix the issue. Also, EsLint takes into consideration code quality rules such as no-unused-vars, no-implicit-globals, no-extra-bind, etc.
8. Debugger for Chrome
Debugging and catching code errors can be one of the most frustrating tasks developers have. Imagine putting so much effort into your work to discover it has something wrong that you can’t see. It’s like building a huge puzzle and finding out that the last piece isn’t the last and that apparently many pieces are wrong. Debugger for chrome it’s a dream come true for developers, mainly because it saves them a lot (A LOT) of time.This extension finds where the error came from in the exact lines and functions.
9. Live Share
Whenever you want to edit and code with other developers, Live Share is the perfect extension. Developers share a session with someone else, and this allows the other person to edit the code, share a server, and debugging sessions. With this real-time collaboration extension, remote devs teams have solved everything in terms of boosting collaboration.
10. Project Manager
Last but not least is Project Manager. This extension is an A+ for developers working in multiple projects because they have a dedicated sidebar for their projects. This means they can easily change projects and open them in the same or a new window. Also, this extension provides an auto-detect for Git, Mercurial, or SVN repositories.
Once In a Lifetime MasterClass
2020 has been quite a year so far, with many challenges but also with many positive things! At DistantJob, we’ve been a remote IT recruitment agency for a long time, and we know everything there is to know about finding the best programmers and managing remote teams. That’s why we are offering a completely free masterclass with our VP of operations, Rustam Ahverdiev. Don’t miss this awesome opportunity to learn more about managing remote teams and making an efficient remote transition.
