Most useful VS Code extensions for your web development process

Most useful VS Code extensions for your web development process

VSCode stands for Visual Studio Code. It's a source code editor developed by Microsoft for Windows, Linux, and macOS. It supports debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring. It's free and open-source. Users can able to customize the editor's theme, keyboard shortcuts, and preferences. Visual Studio Code is based on Electron, a framework which is used to deploy Node.js applications for the desktop running on the Blink layout engine. VSCode was announced on April 29, 2015, by Microsoft at the 2015 Build conference. On November 18, 2015, Visual Studio Code was released under the MIT License and its source code posted to GitHub. Extension support was also announced.

Visual Studio Code, the best Code Editor to use in 2019, has a whole lot of extensions, they come with a kind of Extension-store.

Here are the most useful VS Code extensions for your web development process.

NPM

This is the official Node Package Manager support on VS Code. It helps in to manage the package.json file in every imaginable way. It flags warnings for dependencies that are defined but not installed or the ones that are installed but not defined in the package.json, it also indicates discrepancies in version control of packages.

Shopify Liquid Snippets

The Shopify Liquid Snippets includes various Liquid snippets to make developing themes faster. This includes snippets for control flow tags, iteration tags, variable tags, array filters, and more. This extension has one dependency, the Liquid Languages Support extension.

ESLint

This extension integrates ESLint into VS Code, it requires you to already have ESLint installed on your computer: either locally or globally. You can do this with npm, by running npm install -g eslint. There are more detailed configuration and installation settings and instructions on the extension marketplace page.

Settings Sync

Settings Sync is one of the best and must have VS Code extension that every user should have. The reason being, Settings Sync will sync all your custom VS Code’s settings, key bindings, themes, and plugin list with GitHub. This eliminates the need to reinstall all the extensions and themes and configure them every time you install VS Code or when using VS Code on multiple systems.

Live Server

If you are a web developer or just someone who works with web technologies like CSS, JavaScript, PHP, HTML, etc., then Live Server is a must-have. What Live Server does is that it will create a local server within VS Code and lets you open the development pages with just two clicks in any browser of your choice.

Prettier

Prettier is another one of the favorite extensions that would install almost immediately. As the name suggests, Prettier makes the code look pretty and improves readability by properly formatting it according to the official and industry standards. After installing the extension, you can either prettify your code by pressing a keyboard shortcut or configure the extension from the VS Code settings page to format code automatically on save.

Git Lens

VS Code has proper built-in support for Git and makes it easy to use. Git Lens takes it up a notch and supercharges the built-in Git capabilities of VS Code. What makes Git Lens special is that it makes it easy to explore repositories, explore file history, visualize code authorship using Git blame annotation and code lens, highlights recent changes, commit search, compare different branches, etc.

Debugger for Chrome

No need to leave Code if you need to debug JavaScript. Debugger for Chrome (released by Microsoft), let's you debug your source files directly in Code. A similar solution is available in Visual Studio, but the whole experience works much smoother in Code.

CSS Peek

With the CSS Peek extension, you can add an inline CSS editor to Visual Studio Code. The feature was inspired by the similar capability of Adobe Brackets code editor. CSS Peek allows you to load a CSS file inline while editing an HTML file. When you “peek” into a class, ID, or HTML tag, CSS Peek displays all the related CSS rules within the inline editor. This way you can edit your stylesheet right from your HTML file and you don’t have to go through the whole CSS to find all the related rules.

Angular 7 snippets

This is the official Angular 7 snippets extension for VS Code. It follows the Angular style guide and helps to make working with Angular a whole lot easier. It has code predictability features coupled with auto-complete functionality compatible with the new version 6. It has support for typescript, service workers, RxJS, ngRx and even Angular Material.

Live Sass Compiler

This extension by Ritwik Dey compiles your scss files into CSS files just as swiftly and as real-time as node-sass. With a watch-my-sass button at the taskbar, it can show a real-time preview of the compiled styles in your preferred browser, also with the Live Reload feature.

Guides

The Guides extension adds additional indentation guides to your editor. It’s different from the built-in indentation guides by adding stack and active indentation guides, indentation backgrounds, and you can color and style those customizations.

Vetur

This is the official Vue js extension on VS Code. It has been here to help in making Vue js development easier. It has error-checking capabilities, code auto-completion feature and also has support for providing snippets. Vue developers also get the latest updates on meetups and conferences here, it's really that cool.

Open in browser

This extension does exactly what it says, it enables you to view an HTML file in the browser. It opens HTML pages in your default browser, but you can also select “open in other browsers” to open in a different one on right click.

Path Intellisense

The Path Intellisense extension helps to autocomplete filenames. Super useful when writing out paths in markup, or in any file that has path references.


 

You can share your experiences with us in comment section. Thank you!

Recommended for you