An Introduction to VS Code

An introduction to VS Code features and extensions

An Introduction to VS Code

Hello World. Let's learn about VS Code.

Visual Studio Code is an open source text editor. This editor was built by Microsoft and its entire source code is available on GitHub for anyone who wishes to understand its workings and how the editor was built. It has grown to be one of the most popular editors being used today.

VS Code is built using TypeScript, JavaScript and CSS. This stack was used with the electron framework to convert it into an application that can work on macOS, Linux and Windows.

Right out of the box VS Code is a feature rich editor which has support for features like:

  1. Syntax Highlighting
  2. Configurable Snippets
  3. Git Support
  4. Code Refactoring
  5. IntelliSense
  6. Debugging

VS Code was built with keeping the web in mind and has extensive support for such web technologies like Nodejs and TypeScript. It also includes support for HTML, CSS, React/JSX, Vue, Angular, SCSS and more. But that's not the only great part about it, it works well with other languages like Python and more.

Taking a closer look at VS Code, one realises that it supports vast amount of configuration and has support for a large amount of extensions available in it's marketplace.

Let's have a look at some of the extensions which allow making development life easier using VS Code.

Better Comments

Better comments is an extension that allows highlighting of different types of comments. These comments are used by all developers and it helps them understand the working of code and in collaboration. It supports different types like:

  • Alerts
  • Queries
  • TODO's
  • Highlights

Bracket Pair Colorizer 2

This extension allows a user to identify matching brackets and helps identify the different code blocks much more easily.

GitLens — Git supercharged

One of the good extensions which allows extending on the built in git features like showing the blame for commits, highlighting the changes made in a file. It adds a sidebar which helps visualise the various working parts of git like branches, stashes and so on. One of the really good features is the interactive rebase feature that's available with the extension.

TODO Tree

The extension shows the different TODO's in the workspace and then shows it in the file tree which allows easier access and makes them easier to find. Clicking the TODO highlights it and opens it in the file.

Conclusion

This is a small introduction to the different features and extensions available in Visual Studio Code. Hopefully this gives a small insight into why Visual Studio Code is a really good editor and worth having a look at. We can have a look at some more extensions in the next article regarding the web.