Let's see some best VS code extensions for web development to Improve your Productivity.
Step to install vs code extension :
Open VS Code Quick Open (Ctrl+P) -> Paste the ${vs-code-cmd} and press enter.
1)Regex Previewer
- Regex Previewer helps to preview your regular express matches in side by side view.
- Regex Previewer supports JavaScript, TypeScript, PHP and Haxe.
Demo :
Installation & Docs :
Installation cmd : ext install chrmarti.regex
Extension Link: https://marketplace.visualstudio.com/items?itemName=chrmarti.regex
GitHub Repo : https://github.com/chrmarti/vscode-regex
2)GraphQL
- GraphQL Extension helps to validate, highlight and suggest code snippets.
- GraphQL Extension support language feature like go definition.
- GraphQL Extension also supports query annotation.
Demo :
Installation & Docs :
Installation cmd : ext install GraphQL.vscode-graphql
Extension Link: https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql
GitHub Repo : https://github.com/graphql/vscode-graphql
3)GitHub Theme
- GitHub theme extension offers five different modes of themes.
- GitHub Light
- GitHub Dark
- GitHub Light Default ✨ New ✨
- GitHub Dark Default ✨ New ✨
- GitHub Dark Dimmed ✨ New ✨
- GitHub theme allows overriding your themes by using configuration.
Demo :
Installation & Docs :
Installation cmd : ext install GitHub.github-vscode-theme
Extension Link: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
GitHub Repo : https://github.com/primer/github-vscode-theme
4)DotENV
- DotENV supports dotenv file syntax.
- DotEnv supports keyword, variable, string interpolation, unquoted, white space, numerical, comments, escape sequence, double quotes, single quotes.
Demo :
Installation & Docs :
Installation cmd : ext install mikestead.dotenv
Extension Link: https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv
GitHub Repo : https://github.com/mikestead/vscode-dotenv
5)XML
- XML extension helps to creating and editing XML documents.
- XML extension works based on LemMinX XML Language Server.
- XML extension provides lots of features like Syntax error, General code completion, Auto-close tags, Automatic node indentation, Symbol highlighting, Document folding, XSD validation, and more.
Demo :
Installation & Docs :
Installation cmd : ext install redhat.vscode-xml
Extension Link: https://marketplace.visualstudio.com/items?itemName=redhat.vscode-xml
GitHub Repo : https://github.com/redhat-developer/vscode-xml
6)Sass
- SASS ( Syntactically Awesome Style Sheets ) is a preprocessor scripting language.
- This Sass extension helps to autocomplete the sass syntax on typing and highlight.
- It helps to formats your sass file with a proper indent.
- This Sass extension has a hover information feature.
- With sass, you can import and export your sass variable to another file.
- You can configure lint, Property Space by using configuration.
Installation & Docs :
Installation cmd : ext install Syler.sass-indented
Extension Link: https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented
GitHub Repo : https://github.com/TheRealSyler/vscode-sass-indented
7)Format HTML in PHP
- This Extension is purely for PHP Developer.
- Work with HTML in PHP files formatting is difficult.
- Format HTML in PHP extension helps to format your HTML code block in PHP files.
- Format HTML in PHP extension using JSbeautify to formates your HTML code.
- You can set formatting specifications like indent and spacing and more by using vscode configuration
Demo :
Installation & Docs :
Installation cmd : ext install rifi2k.format-html-in-php
Extension Link: https://marketplace.visualstudio.com/items?itemName=rifi2k.format-html-in-php
GitHub Repo : https://github.com/RiFi2k/format-html-in-php
8)jQuery Code Snippets
- jQuery Code Snippets extension auto-completes the code snippets while typing.
- jQuery Code Snippets have 130 jQuery Code Snippets.
- You can trigger auto-completes by typing jq. it will list all available snippets.
Demo :
Installation & Docs :
Installation cmd : ext install donjayamanne.jquerysnippets
Extension Link: https://marketplace.visualstudio.com/items?itemName=donjayamanne.jquerysnippets
GitHub Repo : https://github.com/DonJayamanne/jquerysnippets/blob/master/README.md
9)Live Share
- Live Share extension helps to share your vs code instance with your friends.
Installation & Docs :
Installation cmd : ext install MS-vsliveshare.vsliveshare
Extension Link: https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
GitHub Repo : https://github.com/MicrosoftDocs/live-share
10)PrintCode
- PrintCode allows printing your source code.
- You can configure the font size, tab size, paper size, line numbers, and more on vs code configuration.
Demo :
Installation & Docs :
Installation cmd : ext install nobuhito.printcode
Extension Link: https://marketplace.visualstudio.com/items?itemName=nobuhito.printcode
GitHub Repo : https://github.com/nobuhito/vscode.printcode
I think this information is helpful to you.
Thanks for reading - Don't Forgot To Share & Comment
Any suggestion or queries please comment, our team will response asps.
You may like this :
Best Visual Studio Code Extensions - Part 7
Best Visual Studio Code Extensions - Part 6
Best Visual Studio Code Extensions - Part 5
Best Visual Studio Code Extensions - Part 4
Best Visual Studio Code Extensions - Part 3
Best Visual Studio Code Extensions - Part 2
Best Visual Studio Code Extensions - Part 1
Best IDE / Editor Web Development
Best 5 Angular UI component library
Why JavaScript most popular ?
Super 👌💫💫🤩
ReplyDelete