Web Development using Visual Studio Code
Since Microsoft has released the Visual Studio Code (also known as VSCode) in 2015, it has become the most popular code editor among many developers. It has very active community & contributors on Github. Being open source, portable & cross platform supported, are some big advantages for VSCode.
If you are getting started with web development, VSCode is a great tool to work with. It has lot of flexibility & customization options to fit your developer environment.
In order to get started, we will need some extensions from the Microsoft’s Marketplace, which are available for free.
1. Prettier
Ever got into messy HTML indentation situation? Prettier comes for the rescue. It is a simple, yet powerful tool to indent your messy HTML, CSS & JS. Not only those, it also helps formatting TypeScript, Flow, JSX, JSON, SCSS, Less, Vue, Angular, GraphQL, Markdown & YAML, if you’re into them.
2. HTML CSS Support
This basically helps by suggesting the tags that are being used in the currently opened HTML & CSS files. This is really helpful when you are working with very large project with a lot of tags & classes.
3. Live Server
This is a very powerful tool for web developers, especially for the frontend developers. All it does is, it creates a local server on some specified port, opens the website, you’re currently working on, in your default browser & updates it as soon as you make any changes to your code. It subtracts the effort of you, to constantly that click that refresh button in order to see the changes, reflect in the browser. It has got a handy shortcut on the status bar of the VSCode to start the server.
4. Browser Preview
This extension performs very similar task as the aforementioned Live Server but it takes it to a step further by creating an integrated browser. Can it be more handy than this? No. If you’re curious about how it does this, it uses Headless Chrome under the hood, so it is secure.
5. Debugger for Chrome
Debugging is twice as hard as writing code in the first place.
— Brian Kernighan
As a web developer, you will work a lot with Javascript & it is ok to have bugs in your code. That’s where the debugging action is done & this extension can be useful for that. All the Javascript you write can be debugged, or in simple words, compiled using any browser because, they have JS compilers (also known as Javascript Engine), built-in. In the case of Chrome, it is the V8 Engine that interprets the Javascript code.
6. ES6 Code Snippets
This extension has predefined code snippets for commonly used Javascript & Typescript code. This is a time saver in the sense that, you don’t need to write the whole syntax, it completes for you.
7. Bracket Pair Colorizer
This is a simple extension, that highlights the current blocks’ brackets to prevent confusion when working with a lot of nested blocks.
8. Quokka.js
This is known as the live scratchpad for Javascript. Best part of it is the live evaluation of your code. This helps in debugging the code as you write it.
There are more extensions to improve productivity & work flow. This article will get updated every month with more extensions.
As a bonus, below are some sources to learn Web Development from.
