VS Code: Useful Extensions for Web Developers

Hello World. Let's learn about VS Code extensions for the web.

As we learnt from my last post VS Code is a popular text editor today that was built keeping the web in mind. The basic three languages for the web are HTML, CSS and JavaScript. VS Code has great support for these languages.

HTML Support

VS Code has various features which include

Auto close tag
Color Pickers
Formatting The biggest support that VS Code has for html is Emmet Abbreviations which is described in the next section.

Emmet Abbreviations

Emmet Abbreviations are special expressions that use CSS combinators, which on parsing are converted to HTML code. Many developers use emmet to generate their html code easily. Emmet is built into VS Code and is available to use from the start. One simple example for Emmet Abbreviations is the exclamation mark i.e. ! generates the boilerplate HTML5 code.

Emmet: !

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

Another example:

Emmet: .wrapper>.container

HTML:

<div class="wrapper">
  <div class="container">
  </div>
</div>

Auto Close Tag

VS Code extension that automatically closes an opening tag.

Auto Rename Tag

VS Code extension that automatically renames the corresponding opening or closing tag when one is changed.

CSS Support

VS Code has great IntelliSense for CSS and provides description for the properties. It has support for color preview along with syntax highlighting. It has support for emmet. One cool feature is on hovering over a rule it will show the matching html tag which the style is applied to.

JavaScript Support

VS Code IntelliSense has great support for JavaScript. It provides

Code Completion
Hover Information
Function Signatures

It has built in snippets for basic javascript code. The editor supports auto imports and has great support for JSX. Debugging is easier because of the builtin debug console for both JS and Nodejs. JSX support indicates that VS Code can directly work with ReactJS.

Live Server

Live Server is an extension built to reload web pages on save. When developing web pages using html on each save a person has to reload the page manually and notice the changes thing effect. With this extension the page automatically reloads when the file is save and we can notice the changes take effect. The extension automatically loads the web page in the browser and reloads on save, added benefit of the extension is it supports any browser, allows customisation of port, and excluding files for change detection.

Live SASS Compiler

SASS/SCSS is a preprocessor available for css. The problem with using preprocessors is that the browser can only understand css and not any of its preprocessors. If a developer chooses to use SASS then it has to be compiled down to CSS and used. There are a two of ways to do this and can be done using node-sass or dart-sass. But this involves manually compiling it. This extension automatically detects changes in the sass file and recompiles it in the corresponding css file. Added benefits of this extension include changing target output location, customising css output, live reload along with live server extension.

ES Lint

ES Lint is a popular JavaScript library that can be installed using npm. This library allows a developer to find and fix any problems with their JavaScript code. It allows enforcing good programming practices by ensuring the rules of ES Lint are followed. The extension integrates ES Lint with VS Code and thus allows easily identification and fixing of errors right inside VS Code

JavaScript Frameworks

Angular Language Service

Angular Language Service is an extension built by Angular itself to enable building, testing and debugging Angular Applications right from VS Code. It supports VS Code's major features like go to definition, quick information, referring to variables, inline and external templates and enables identifying components and syntax highlights much more easily.

Vetur

Vetur is an extension built for Vuejs. It is one of the best extensions for vuejs in VS Code. It enables syntax highlighting, vue snippets for faster typing, support for emmet while working with vue files, formatting vuejs code.

Conclusion

VS Code is a great text editor with support for web development right out of the gate. The advantage of using such a text editor is the support for its vast extension library which enables much more capabilities and provides great support in making a web developers life much easier.

jugal13