VS-Code Developer Extensions
Ritesh Gandalwad
Associate Software Engineer @ NAVEX | Bachelor's in Computer Science
Hey Everyone :)
Today i am going to show you some VSCode Extension which helped me to boost my Productivity in Web Development.
This post is for everyone including beginners.
1. HTML Snippets -
Type part of a snippet, press enter, and the snippet unfolds.
Snippets named as the tag without braces
div --> <div></div>
doc --> <!DOCTYPE html>
g--> <a href=""></g>
2. Intellisense for CSS classnames -
This extension has autocomplete class name feature in html specially for Bootstrap class names if you re familiar with bootstrap then you know about the bootstrap classes and styling components with bootstrap class names.
3. Emmet Live -
Open the command palette (F1 on Windows) and look for the command 'Emmet Live'. Hit enter and input your HTML Emmet abbreviation.
This helps to write HTML Code fastly and also saves time.
4. Javascript Booster -
This VS Code extension provides various code actions (quick fixes) when editing code in JavaScript (or TypeScript/Flow).
You can convert normal function to arrow function with a click of button and vice versa and it has many features like that.
5. Live Server -
Launch a development local Server with live reload feature for static & dynamic pages. It can update the web page everytime you do changes to the code and you don't have to refresh the page again and again to see the updates you have done to the page.
6. ES7/React/Redux -
Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax. If you are a react developer , then you should check this extension. It has many snippets for autocomplete the codes.
7. Vscode-styled- components-
If you use styled-components to style your components in react, then this one is best for you as it autocomplete the css code written in js file.So, check this one definitely.