Visual Studio Code Header

5 Must Have Visual Studio Code Extensions

This article looks at improving the effectiveness which developers can write code in Visual Studio Code through the use of extensions. Having an effective development environment makes writing great software both faster and easier. Visual Studio Code is a relatively new open-source IDE primarily developed by Microsoft. VS Code is targeted mainly at developing languages that traditionally haven’t been easy to develop in Visual Studio with such as JavaScript, Python, etc. It has full debugger and breakpoint support for languages that otherwise usually don’t have an easy to use debugger such as JavaScript.

1. Instant Markdown

Instant markdown example

As developers working effectively with markdown files typically used within version control systems such as Git for things such as changelogs or readmes, is very important. This extension makes working with markdown from within VS Code a lot simpler. It also allows viewing as the file is being edited which proves to be an invaluable feature for documentation writing and more. Download and installation instructions found on the visual studio marketplace.

2. ESLint

ESLint is a an excellent linter choice for ensuring code style rules are adhered to for various languages it supports. Having a linter enforce style rules makes sticking to a project or language style far easier removing some of the thought required by the developer as clear indicators if style isn’t followed appear within the IDE. Download and installation instructions found on the visual studio marketplace.

3. Code Navigation

Code Navigation example

This extension is fantastic for developers who come from IDEs with forward and back buttons and other code navigation features, particularly Visual Studio. It allows things such as navigating to class definitions on ctrl+click (rebindable) as well as the aforementioned forward and back buttons. Download and installation instructions found on the visual studio marketplace.

4. Debugger for Chrome

Debugger for Chrome example

This extension is similar to Instant Markdown in the sense that it provides a live look at code you are writing, in this case JavaScript. It extends the debugging functionality on VS Code in numerous ways that it details in the documentation. If you are writing frontend JavaScript this extension really is a must have. Download and installation instructions found on the visual studio marketplace.

5. Path Intellisense

Path Intellisense example

Referencing file locations is made incredibly easy with this extension, it might seem like a very trivial thing to add intellisense for but filepaths can often be a source of frustration and this removes that problem entirely. Download and installation instructions found on the visual studio marketplace.

Conclusion

Hopefully after reading this article you at least one addon to use which will improve your development workflow, even if the improvements are minor over the course of an entire project time saved or stress reduced will all add up. As with all things open-source these extensions may change over time, or even become obsolete as features are added to VS Code so keep in mind that information provided in this article is only accurate at the time of writing.


Also published on Medium.