I use Visual Studio Code it is small download by design and only includes the minimum number of components shared across most development workflows. Basic functionality like the editor, file management, window management, and preference settings are included. A JavaScript/TypeScript language service and Node.js debugger are also part of the base install. Most VS Code users will need to install additional components depending on their specific needs.

The list of extenstions i use:

Beautify

Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

VS Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VS Code, AND honouring any .jsbeautifyrc file in the open file's path tree to load your code styling. Run with F1 Beautify (to beautify a selection) or F1 Beautify file.

for more information on how you can set up your styling you can visit: Beautify

Code spell checker

It is basic spell checker that works well also with camelCase code. The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

Example

HTML Snippets

Installation

1. Install Visual Studio Code 0.10.1 or higher
2. Launch Code
3. From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX)
4. Select Install Extension
5. Type HTML-Snippets
6. Choose the extension
7. Reload Visual Studio Code

Type part of a snippet, press enter, and the snippet unfolds as you can see bellow.

Example

JavaScript (ES6) code snippets

It does the same as the HTML snippet but hen for JavaScript ES6

Supported languages (file extensions)

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• Html (.html)
• Vue (.vue)

more info is found here: [https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets](JS Snippets)

Live Server

With liveserver you can launch a local development server with live reload feature for static & dynamic pages so you can see what you code live and see if it looks good or you need to change things.

Example

Auto rename tag

With this you can automatically rename paired HTML tags for example if you have a div and you want to change it to section it automatically changes the closing tag.

Example