Fuente: https://ihatetomatoes.net/useful-vscode-extensions-visual-enhancements/
Extensiones de Visual Studio Code (VSCode) útiles: mejoras visuales
¿ Está buscando algunas extensiones VSCode útiles que puedan acelerar su flujo de trabajo de desarrollo front-end?
La primera sección se centrará en las mejoras visuales .
Estas extensiones son útiles para cualquier proyecto , no solo para el desarrollo de React o Angular .
Vídeo relatado
1. Indent Rainbow
![Sangrar arco iris para VSCode](https://ihatetomatoes.net/wp-content/uploads/2018/07/img_indent-rainbow.png)
Indent Rainbow es una extensión simple que hace que la sangría sea más legible al colorear la sangría de cada pestaña.
![Sangrar arco iris para VSCode](https://ihatetomatoes.net/wp-content/uploads/2018/07/img_indent-rainbow-default.png)
Por defecto viene con un “arco iris” de colores, pero si prefieres algo más sutil como yo, simplemente ingresa la siguiente configuración en tu Configuración de usuario.
“indentRainbow.colors”: [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.2)"
]
![Sangrar arco iris para VSCode](https://ihatetomatoes.net/wp-content/uploads/2018/07/img_indent-rainbow-subtle.png)
Estos colores funcionan muy bien con el tema predeterminado de VSCode y se combinan perfectamente con el esquema de colores predeterminado de VSCode.
2. Bracket Pair Colorizer
Esta extensión fue [Deprecated] por tanto ya no se puede instalar.
Esta incluida en la configuración de Visual Studio Code
@id:editor.bracketPairColorization.enabled @id:editor.guides.bracketPairs
Sigo dejando la reseña para tener el antecedente.
![Colorizador de pares de soportes para VScode](https://ihatetomatoes.net/wp-content/uploads/2018/07/img_bracket-pair-colorizer.png)
Si escribe código React, Vue o Angular, lo más probable es que tenga muchos corchetes en su código.
¡Esta extensión te ayuda a identificar corchetes coincidentes con colores y conectarlos con líneas también!
![Colorizador de pares de soportes para VScode](https://ihatetomatoes.net/wp-content/uploads/2018/07/img_bracket-pair-colorizer-default.png)
Puede desactivar la línea vertical y horizontal alrededor del bloque de código. Simplemente agregue esto a su Configuración de usuario.
“bracketPairColorizer.showHorizontalScopeLine”: false
3. Better Comments
![Mejores comentarios para VSCode](https://ihatetomatoes.net/wp-content/uploads/2018/07/img_better-comments-extension.png)
La mejor extensión de comentarios le permite resaltar ciertos comentarios en su código.
![Mejores comentarios para VScode](https://ihatetomatoes.net/wp-content/uploads/2018/07/img_better-comments.png)
Resalte cosas que hacer , preguntas o notas importantes para otros desarrolladores.
4. Color Highlight
![Resaltado de color para VSCode](https://ihatetomatoes.net/wp-content/uploads/2018/07/img_color-highlight-extension.png)
Color Highlight resalta estilos colores css que se encuentran en su documento.
![Resaltado de color para VSCode](https://ihatetomatoes.net/wp-content/uploads/2018/07/img_color-highlight-extension-example.png)
No sólo reconoce los colores en su hoja de estilo sino también en otros archivos como .js, .jsx, .ts, .tsx
y otras extensiones de archivo.