Top 10 Visual Studio Code extensions for web developers

Don't know about the Visual Studio Code? here is a quick summary!

Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and available for multiple operating systems like Windows, Linux, and macOS. Visual Studio Code is one of the most popular code editors out there. It's free. and it comes with built-in support for multiple programming languages. Thanks to Microsoft for making developer's life easier.

How to install extensions in Visual Studio Code

There are many extensions on the VS Code Extensions Marketplace.You can Install these extensions and many other popular extensions that include snippets in their language support from the Extensions Marketplace tab in VS-Code.

1. Tabnine

TabNine is an AI code autocomplete tool that predicts the rest of the code programmers are typing, much like word or phrase autocomplete in a Google search window.
install TabNine

2. ES7 React/Redux/GraphQL/React-Native snippets

This snippet extension is much more powerful and useful for React development with over 2 million-plus downloads. this extension provides you Javascript and React/Redux snippets in ES7 with Babel plugin features for Visual Studio Code.
install ES7 React/Redux/GraphQL/React-Native snippets

3. Auto Import - ES6, TS, JSX, TSX

Auto Import - ES6, TS, JSX, TSX (VSCode Extension) Automatically finds, parses, and provides code actions and code completion for all available imports. Works with JavaScript (ES6) and TypeScript (TS).
install Auto Import - ES6, TS, JSX, TSX

4. GitLens — Git supercharged

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore *Git * repositories, gain valuable insights via powerful comparison commands, and so much more.
install GitLens — Git supercharged

5. Live Server

Live Server - Makes your existing server live - this is a Web Extension that helps you to live to reload feature for dynamic content (PHP, Node.js, ASPNET -- Whatever, it doesn't matter). static files located on your computers like HTML, CSS, and JS don't need a server to be opened by your browser. What your extension does is just reloading your browser when it detects changes in your static files.
install Live Server

6. Auto Rename Tag

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does. it's one of the useful extensions for web development.
install Auto Rename Tag

7. Prettier - Code formatter

Before Prettier

After Prettier

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.
install Prettier-Code formatter

8. ESLint

It's one of the useful extensions for Javascript ** development with **15 million-plus **downloads. **ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, to make code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions: ESLint uses Espree for JavaScript parsing. install ESLint

9. Live Sass Compiler

A VSCode Extension that helps you to compile/transpile your SASS/SCSS files to CSS files in real-time with live browser reload. This extension saves a lot of time, you don't have to manually compile the Sass file and reload the browser again and again. install Live Sass Compiler

10. Bracket Pair Colorizer

We can use a VS Code extension called Bracket Pair Colorizer to add color to each set of opening and closing brackets, making it easier to identify each set of brackets. It's up to you to decide whether you'd like to add this feature to VS Code or not. However, it's a popular tool and many developers find it useful. the best thing about this extension you can customize the color of brackets.
install Bracket Pair Colorizer

Conclusion

The main focus of this blog is to introduce you to some awesome and useful extensions of Visual Studio Code. by using these extensions you can make your development much faster 🔥.

---

Thank you for reading. 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up. 👍

Feel free to ask any questions in a comment section and share which Visual Studio Code extensions do you use for your daily development.

Let's Connect. 👋

Github | LinkedIn | Twitter

Comments

[Alp Gul]

My Vs Code Extensions List

code --list-extensions --show-versions:
abusaidm.html-snippets@0.2.1
Alexey-Strakh.stackoverflow-search@1.2.0    
aliariff.auto-add-brackets@0.11.0
angryobject.react-pure-to-class-vscode@1.1.8
anseki.vscode-color@0.4.5
christian-kohler.npm-intellisense@1.4.0     
christian-kohler.path-intellisense@2.4.0    
cmstead.js-codeformer@1.28.2
codezombiech.gitignore@0.7.0
CoenraadS.bracket-pair-colorizer@1.0.61
cssho.vscode-svgviewer@2.0.0
dbaeumer.vscode-eslint@2.1.25
donjayamanne.githistory@0.6.18
dsznajder.es7-react-js-snippets@3.1.1
eamodio.gitlens@11.6.0
ecmel.vscode-html-css@1.10.2
eg2.vscode-npm-script@0.3.22
esbenp.prettier-vscode@9.0.0
formulahendry.auto-close-tag@0.5.12
formulahendry.auto-rename-tag@0.1.8
GitHub.codespaces@1.0.6
GitHub.github-vscode-theme@5.0.0
GitHub.vscode-pull-request-github@0.30.0
GregorBiswanger.json2ts@0.0.6
infeng.vscode-react-typescript@1.3.1
kenhowardpdx.vscode-gist@3.0.3
loiane.ts-extension-pack@0.3.0
lokalise.i18n-ally@2.8.1
meganrogge.template-string-converter@0.5.3
mhutchie.git-graph@1.30.0
MS-CEINTL.vscode-language-pack-tr@1.60.4
msjsdiag.vscode-react-native@1.6.1
PKief.material-icon-theme@4.10.0
pmneo.tsimporter@2.0.1
pustelto.bracketeer@1.3.1
rbbit.typescript-hero@3.0.0
ritwickdey.LiveServer@5.6.1
sburg.vscode-javascript-booster@14.0.1
searKing.preview-vscode@2.2.5
skyran.js-jsx-snippets@10.2.0
steoates.autoimport@1.5.4
stevencl.addDocComments@0.0.8
stringham.move-ts@1.12.0
TabNine.tabnine-vscode@3.4.27
thekalinga.bootstrap4-vscode@6.1.0
WallabyJs.quokka-vscode@1.0.401
wix.vscode-import-cost@2.15.0
xabikos.JavaScriptSnippets@1.8.0