Visual Studio Code es uno de los editores de código más populares que no solo es de código abierto, sino también multiplataforma, liviano y rápido. Aunque VS Code es bastante potente desde el primer momento gracias a su tecnología Intellisense y extensiones incluidas como Emmet, puede aumentar aún más su funcionalidad y utilidad instalando extensiones adicionales. Estos son algunos de los mejores VSextensiones de código que encontré al usar Visual Studio Code durante los últimos dos años más o menos.
Las mejores extensiones de código de Visual Studio
Settings Sync es uno de los mejores y debe tener la extensión VS Code que todo usuario debería tener. La razón es que Settings Sync sincronizará todas las configuraciones, combinaciones de teclas, temas y lista de complementos de su VS Code personalizado con GitHub. Esto elimina la necesidad de reinstalar todas las extensiones y temas y reconfigurarlos cada vez que instala VS Code o cuando usa VS Code en múltiples sistemas. Lo mejor de Settings Sync es que es bastante fácil de usar. De hecho, después de vincularlo con GitHub, puede cargar o sincronizar configuraciones con solo un atajo de teclado. Si es necesario, puede configurarlo para cargar o descargar configuraciones automáticamente.
Si es un desarrollador web o simplemente alguien que trabaja con tecnologías web como CSS, JavaScript, PHP, HTML, etc., Live Server es imprescindible. Lo que hace Live Server es que creará un servidor local dentro de VS Code y le permitirá abrir las páginas de desarrollo con solo dos clics en cualquier navegador de su elección. No es necesario ir manualmente a la ubicación del archivo y abrirlo desde allí. Sin mencionar que cuando Live Server está activo y funcionando, la página se recargará automáticamente cada vez que guarde el documento. Entonces, si eres un desarrollador web, pruébalo. No volverás.
Como puede ver por el nombre en sí, la extensión Abrir en el navegador le permite abrir cualquier archivo compatible en el navegador predeterminado o en el navegador de su elección con un solo clic. Aunque no es tan potente ni tiene tantas funciones como la extensión Live Server, Open in Browser lo ayuda a obtener una vista previa rápida del documento web sin crear una instancia de un servidor en segundo plano. Sin mencionar que la extensión Abrir en el navegador es bastante liviana y hace lo que dice que hará sin contratiempos.
Prettier es otra de mis extensiones favoritas que instalo casi de inmediato. Como sugiere el nombre, Prettier hace que el código se vea bonito y mejora la legibilidad al formatearlo correctamente de acuerdo con los estándares oficiales y de la industria. Después de instalar la extensión, puede embellecer su código presionando un atajo de teclado o configurar la extensión desde la página de configuración de VS Code para formatear el código automáticamente al guardar. Si es necesario, puede modificar cómo Prettier da formato a su código cambiando varias configuraciones como espacios de tabulación, espaciado entre corchetes, coma final, ancho de impresión, ajuste, etc., desde la propia página de configuración.
Color Info es una extensión muy simple pero efectiva que muestra una gran vista previa e información adicional sobre los colores que usa en CSS. En caso de que se lo pregunte, sí, VS Code muestra una pequeña vista previa del color que está usando. Sin embargo, no es tan útil, especialmente en temas oscuros. La información adicional que muestra Color Info incluye, entre otros, valores HSL, valores RGB, valor alfa, varios tipos de vistas previas de color, etc. Color Info es compatible con CSS, SASS, SCSS y LESS.
¿Alguna vez ha querido hacer algunos cambios, actualizar o agregar código pero se le olvidó? Instale Todo Highlighter y no tendrá que volver a pasar por ese calvario. Si alguna vez usó la función Todo en cualquier IDE (Entorno de desarrollo integrado), Todo Highlighter en VS Code funciona de la misma manera. Simplemente agregue los Todo como lo haría normalmente y se destacarán de su código regular y atraerán su atención hacia él.
No importa cuántas veces use expresiones regulares, todavía me confunden. Para decirlo con franqueza, no puedo escribir mi propio Regex correctamente. Una de las razones de esto es que no puedo verificar mi expresión regular sobre la marcha. Ahí es donde entra en juego Regex Preview. Después de instalar Regex Preview, mostrará la vista previa de su expresión regular una al lado de la otra. Si juega con muchas expresiones regulares, pruebe Regex Preview y vea si se ajusta a sus necesidades.
VS Code tiene el soporte incorporado adecuado para Git y lo hace fácil de usar. Git Lens lo lleva a un nivel superior y sobrealimenta las capacidades integradas de Git de VS Code. Lo que hace que Git Lens sea especial es que facilita explorar repositorios, explorar el historial de archivos, visualizar la autoría del código usando la anotación de culpa de Git y la lente del código, resalta los cambios recientes, confirma la búsqueda, compara diferentes ramas, etc. Git Lens, marca una gran diferencia en su flujo de trabajo.
En el desarrollo web, es muy común vincular varios tipos de archivos como CSS, JS en documentos como HTML y PHP. Si bien no es tan difícil escribir la ruta del archivo, un poco de ayuda en forma de autocompletado puede ser de gran ayuda. Path Intellisense hace exactamente eso. es decir, completa automáticamente el nombre y la ruta del archivo para que no tenga que pensar dos veces sobre la ruta o el nombre del archivo.
VS Code tiene una característica interesante llamada Ir a definición e Ir a definición de tipo que lo lleva a la declaración o definición de tipo de un símbolo. CSS Peek lo lleva a un nivel superior y le muestra una vista previa del uso de CSS en su documento. Esto es bastante útil ya que no tiene que dejar su documento actual solo para ver lo que está haciendo con esa clase o ID de CSS específica. Si es diseñador web, CSS Peek es una de esas extensiones imprescindibles para VS Code.
Markdown All in One le permite crear y editar rápidamente archivos Léame o texto enriquecido usando Markdown dentro de VS Code. Lo mejor de Markdown All in One es que puede mostrar una vista previa en vivo y el uso también es muy intuitivo.
Si escribe mucho código, es natural que se mueva entre algunas partes importantes una y otra vez. Aunque VS Code tiene números de línea, le facilita la vida si puede marcar esas líneas importantes. La extensión de marcadores hace exactamente eso para que pueda marcar fácilmente posiciones importantes y navegar entre ellas de forma rápida y sencilla.
Recientemente descubrí la extensión Bracket Pair Colorizer y rápidamente se convirtió en una de mis extensiones favoritas en VS Code. Como puede ver por el nombre en sí, Bracket Pair Colorizer facilita la identificación de brackets coincidentes. No solo hará coincidir los corchetes con los colores, sino que también resaltará todo el bloque de código dentro de los corchetes para que sepa dónde se encuentra. Confíe en mí, cuando esté creando bucles anidados o declaraciones if, Bracket Pair Colorizer lo ayudará mucho.
Espero que ayude. Si cree que me perdí alguna de sus extensiones favoritas de VS Code, compártalas en la sección de comentarios a continuación.