• One of the most amazing pieces of Visual Studio Code is adaptability, particularly through extensions. In case you're a web developer, you won't almost certainly live without introducing these extensions!

    Table of Contents

    1. Auto rename tag
    2. CSS Peek
    3. JS-CSS-HTML formatter
    4. Better Comments
    5. Code Spell Checker
    6. Path Intellisense
    7. Live server
    8. Browser Preview
    9. Project Manager

    Auto rename tag

    Need to rename an element in HTML? Well, with Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be renamed automatically. Simple, but effective!

    Ref:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

    CSS Peek

    As its name suggests, this extension lets you jump to the CSS code using classes and IDs.

    Ref:https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

    JS-CSS-HTML Formatter

    This extension wraps js-beautify to format your JS, CSS, HTML, JSON files.

    Don’t invest time formatting your code. There's no compelling reason to. It's overly simple to arrangement and can be designed to organize your code consequently on spare.

    With this, you will never stress over formatting again!

    Ref:https://marketplace.visualstudio.com/items?itemName=lonefy.vscode-JS-CSS-HTML-formatter

    Better Comments

    This expansion color codes different kinds of remarks to give them diverse centrality and stand out from the remainder of your code. I utilize this ALL THE TIME for todo remarks. It's difficult to disregard a major orange comment disclosing to me I am very brave work to do.

    There are additionally color codes for questions, alerts, and highlights. You can likewise include your own!

    Ref:https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development#toc-16-better-comments

    Code Spell Checker

    A basic spell checker that works well with camelCase code.

    The objective of this spell checker is to help find basic spelling mistakes while keeping the quantity of false positives low.

    Ref:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

    Path Intellisense

    In huge projects, recalling explicit file names and directories your files are in can get tricky. This expansion will give you intellisense to simply that. As you begin typing away in citations, you will get intellisense for registries and file names. This will spare you from investing a great deal of time in the file explorer.

    Ref:https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

    Live server

    Make changes in code editor, switch to browser, and refresh to see changes.

    That is the unending cycle of a developer, however imagine a scenario in which your browser would consequently refresh whenever you make changes. That is the place

    Live Server comes in!

    It additionally runs your application on a localhost server. There are a few things you can possibly test when running your application from a server, so this is a decent advantage.