10 VS code Must have Extensions as Web Developer

SURYA L's photo
SURYA L
May 30, 2022

3 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • 1.Live Server
  • 2.Prettier
  • 3.ESLint
  • 4.Icons and Themes
  • 5.Code Runner
  • 6.JavaScript (ES6) code snippets
  • 7. Auto Close Tag
  • 8.npm
  • 9.Babel JavaScript
  • 10.GitHub Copilot

Hello everyone hope everyone is doing well. My name is Surya L, The purpose of this blog is to teach all about VS code Must have Extensions as Web Developer.

1.Live Server

Liver Server is an VS code Extension used to host files which has .html file extension. It also Launches a local development server with live reload feature for static & dynamic pages.

Screenshot (217).png

Features

  • A Quick Development Live Server with live browser reload.
  • Start or Stop server by a single click from status bar.
  • Open a HTML file to browser from Explorer menu.
  • Support for excluding files for change detection.
  • Hot Key control.
  • Customizable Port Number, Server Root, default browser.
  • Support for any browser (Eg: Firefox Nightly) using advance Command Line.
  • Support for Chrome Debugging Attachment.
  • Remote Connect through WLAN (E.g.: Connect with mobile)
  • Use preferable host name (localhost or 127.0.0.1).
  • Customizable Supporting Tag for Live Reload feature. (Default is Body or head)
  • SVG Support
  • https Support.
  • Support for proxy.
  • CORS Enabled
  • Multi-root workspace supported.
  • Support for any file even dynamic pages through Live Server Web Extension.

2.Prettier

Prettier Formatter for Visual Studio Code

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary. Languages Supported 馃憞

  • JavaScript 路 TypeScript 路 Flow 路 JSX 路 JSON
  • CSS 路 SCSS 路 Less
  • HTML 路 Vue 路 Angular HANDLEBARS 路 Ember 路 Glimmer
  • GraphQL 路 Markdown 路 YAML

3.ESLint

ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It was created by Nicholas C. Zakas in 2013. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues.

image.png

4.Icons and Themes

These 2 extensions are used for file icons.

image.png

image.png

image.png

5.Code Runner

An extension used to run Code. Supported languages:

  • C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, Ring, and custom command Sponsors

image.png

6.JavaScript (ES6) code snippets

This extension contains code snippets for JavaScript in ES6 syntax for Vs Code editor (supports both JavaScript and TypeScript).

image.png

7. Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

image.png

8.npm

This extension supports running npm scripts defined in the package.json file and validating the installed modules against the dependencies defined in the package.json.

image.png

9.Babel JavaScript

Babel is a free and open-source JavaScript trans compiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines. Babel is a popular tool for using the newest features of the JavaScript programming language.

image.png

10.GitHub Copilot

GitHub Copilot is an AI pair programmer which suggests line completions and entire function bodies as you type. GitHub Copilot is powered by the OpenAI Codex AI system, trained on public Internet text and billions of lines of code.

image.png

Thanks for reading the blog. Do let me know what you think about it.

馃摣 How to reach me: Linkedin Showwcase Twitter Blog GitHub Contact Me

Did you find this article valuable?

Support SURYA L by becoming a sponsor. Any amount is appreciated!

See recent sponsors |聽Learn more about Hashnode Sponsors
Share this