Best VS Code Extensions for Web Development - Part 7

    

    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)Shortcut Menu Bar

 

    - Shortcut Menu Bar helps to create the shortcut menu bar in your visual studio code.

    - In the Shortcut Menu Bar, you can add 35 + buttons in the bar.

    - You can add buttons in the bar like Save, Navigate back and forward,

    - Beautify/format document or selection, Beautify/format document, Open files list, toggle terminal, Quick open, show/hide activity bar, Cut, Copy, Paste, Debugging, and more.

    - In the Shortcut Menu Bar, you can add a user-defined button from 0 to 9.

 

    Demo :

 

    Installation & Docs :

 

        Installation cmd : ext install jerrygoyal.shortcut-menu-bar

        Extension Link: https://marketplace.visualstudio.com/items?itemName=jerrygoyal.shortcut-menu-bar

        GitHub Repo : https://github.com/GorvGoyl/Shortcut-Menu-Bar-VSCode-Extension

 

2)Markdown PDF

 

    - Markdown PDF helps to convert your Raw HTML files into pdf.

    - Markdown PDF supports Syntax highlighting, markdown-it-checkbox, emoji, markdown-it-container, etc.

    - Markdown PDF allows you to convert your HTML files into various media formats like PDF, PNG, JPEG, HTML.

    - Markdown PDF you can export your HTML files into the above formats.

    - You can export all formats at a time.

    Demo :

    

    Installation & Docs :

 

        Installation cmd : ext install yzane.markdown-pdf

        Extension Link: https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf

        GitHub Repo : https://github.com/yzane/vscode-markdown-pdf

3)Jest

 

    - Jest is a Javascript testing framework.

    - VS Code Jest extension helps to suggest the code snippets.

    - Jest show status of the test case in inline like ( Fail / Pass ). 

    - Jest support syntax highlighting and highlights the errors.

    - Jest show coverage reports.

    - Jest supports multiple test run modes like automated, manual, and hybrid onSave.

    - You can track the whole project test status.

 

    Demo :

        

    Installation & Docs :

 

        Installation cmd : ext install Orta.vscode-jest

        Extension Link: https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

        GitHub Repo : https://github.com/jest-community/vscode-jest

4)Jira and Bitbucket (Atlassian Labs)

 

    - Jira and Bitbucket help to manage both your Jira and Bitbucket in the same place.

    - With help Jira and Bitbucket manage you Jira issue like create, edit, update, tracking.

    - This extension helps manage your bitbucket pull request, code review, etc. you can trigger the build and get the build status.

    - Jira and Bitbucket remove the context of switching between the browser to VS Code.

    Demo :

    

    Installation & Docs :

 

        Installation cmd : ext install Atlassian.atlascode

        Extension Link: https://marketplace.visualstudio.com/items?itemName=Atlassian.atlascode

        Bitbucket Repo : https://bitbucket.org/atlassianlabs/atlascode/src/main/

        Website : https://bitbucket.org/atlassianlabs/atlascode/src/main/README.md

 

5)Live Sass Compiler

 

    - Live Sass Compiler helps to transpile Sass or Scss files into CSS.

    - Live Sass Compiler allows writing Sass or Scss in your projects.

    - Liver Sass Compiler supports live-reload and auto-prefix.

    - This extension allows customizing the export CSS file location.

    - You can export the SASS or SCSS files into .css, .min.css.

    - You can Exclude the files by using settings.

    Demo :

 

 

    Installation & Docs :

 

        Installation cmd : ext install ritwickdey.live-sass

        Extension Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

        GitHub Repo : https://github.com/ritwickdey/vscode-live-sass-compiler

 

6)Indent Rainbow

 

    - Indent Rainbow helps to colorize indent each line has a different color.

    - This extension is a very helpful developer who working with python.

    - You can configure your color using the setting.

 

    Demo :

 

    Installation & Docs :

 

        Installation cmd : ext install oderwat.indent-rainbow

        Extension Link: https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

        GitHub Repo : https://github.com/oderwat/vscode-indent-rainbow

7)Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets

 

    - Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets for Visual studio code helps to suggest the code snippets.

    - This extension reduces the development time.

    - This extension auto-completes the code snippets while typing.

 

    Demo :

    

    Installation & Docs :

 

        Installation cmd : ext install thekalinga.bootstrap4-vscode

        Extension Link: https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode

        GitHub Repo : https://github.com/1tontech/bootstrap4-snippets

 

    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 8

         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 ? 

         Most Popular JavaScript Frameworks & Libraries for Web Development