Si estás comenzando en el desarrollo web o ya te dedicas a esto, debes tener estassd extensiones para optimizar tu desarrollo. Este es mi top (No enumerado, porque siempre se pueden añadir nuevas), de extensiones de Visual Studio Code.

Prettier – Code formatter

Prettier te ayudará a formatear ese espaguetti de código mal indentado y hacerlo más legible y bonito .

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Path Intellisense

Path Intelisense te ayudara a encontrar las rutas relativas fácilmente dentro de tu proyecto.

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

Npm Intellisense

Este plugin te ayuda a autocompletar los módulos de npm instalados

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

JSON formatter

Esta extensión te ayudara a formatear tu código JSON en un formato más legible

https://marketplace.visualstudio.com/items?itemName=ClemensPeters.format-json

Javascript Auto Backticks

Convierte fácilmente un string en un template string, simplemente insertando tu variable ${myVariabdle} y esta extensión se encargar á de el resto.

https://marketplace.visualstudio.com/items?itemName=chamboug.js-auto-backticks

JavaScript (ES6) code snippets

Esta extensión agrega snipets a tu vsc con las siguientes extensiones:

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• Html (.html)
• Vue (.vue)

Live Preview

Con esta extension podras visualizar documentos HTML de manera sensilla justo al lado de tu editor de código o en un navegador externo.

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

Live Share

Siempre me preguntan que como hago para que otros desarrolladores entrén a escribir código en vivo conmigo y la respuesta es esta extensión de pair programming

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

Intellisense for CSS class names in HTML

Esta extensión añade sugerencias y autocompletado a tus clases de css en tu HTML (Por algo se llama así).

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

Indent-rainbow

Agrega colores a la indentacion de tu código para que nunca te confundas. en cada línea, ademas te permite configurar los colores a tu gusto.
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Para configurar los colores a tu gusto

En Vscode, presiona el siguiente comando: CTRL + SHIFT + P y escribe:

Selecciona: Preferences: Open User Settings (JSON)

Ahora agrega las siguiendtes líneas a tu configuración(Esta es la paleta de colores que yo uso en escala de grises🦝):

// Configuraciones de colores de indentación: Personalización de colores para la guía de indentación
  "indentRainbow.colors": [
    "rgba(0, 0, 0, 0.4)",
    "rgba(16, 16, 16, 0.4)",
    "rgba(32, 32, 32, 0.4)",
    "rgba(64, 64, 64, 0.4)",
    "rgba(96, 96, 96, 0.4)",
    "rgba(128, 128, 128, 0.4)",
    "rgba(160, 160, 160, 0.4)",
    "rgba(192, 192, 192, 0.4)",
    "rgba(224, 224, 224, 0.4)",
    "rgba(255, 255, 255, 0.4)"
  ],

Image

Convierte y optimiza tus imágenes a otros formatos, fácilmented con esta extensión.
https://marketplace.visualstudio.com/items?itemName=n3rds-inc.image

lemon-tree

En conjunto con el paquete Lemon-tree podrás automatizar las traducciones de tu sitio web de manera visual.

https://marketplace.visualstudio.com/items?itemName=garrux.lemon-tree

Conclusión

Estas son las extensiones que me ayudan en mi día a díá como web developer, si conoces otras, te invito a dejarlas acá debajo en los comentarios.