Código de Visual Studio Mi nuevo editor de código favorito

En este video les presentaré mi nuevo editor de código favorito: Visual Studio Code. Visual Studio es un producto de Microsoft, que puede ser una sorpresa para muchos de ustedes, pero deje de lado sus ideas preconcebidas por un momento y únase a mí mientras les muestro todo..

Código de Visual Studio

 

A lo largo de los años he usado una variedad de editores de códigos diferentes; TextMate, Coda, Sublime Text, Atom, y cada uno tiene sus pros y sus contras. Sin embargo, Visual Studio Code es absolutamente mi favorito hasta ahora, así que echemos un vistazo a algunas de sus características..

Comience descargando la versión para su sistema (Windows, Mac OS, Linux) en code.visualstudio.com (también es gratis).

UI

Una de las razones por las que me gusta tanto Visual Studio Code es su interfaz; es muy simple.

Tiene un par de barras laterales, que pueden colocarse a la izquierda o a la derecha de acuerdo con sus preferencias. El primero te da algunos iconos para cambiar entre paneles. Elija entre Explorador, Buscar, Git, Depurar y Extensiones. Vaya a Vista para cambiar el tipo de pantalla (pantalla completa, modo zen, etc.)

Al pasar sobre las carpetas en el Explorador, tenemos un par de opciones: Nuevo archivo, Nueva carpeta, Actualizar y Contraer todo. Al hacer clic con el botón derecho aparece un menú contextual..

Paleta de comandos

Golpear Shift-Command-P para abrir la paleta de comandos.

Dentro de este panel puede buscar lo que quiera para una acción rápida y fácil; Comandos Git, cambio de temas, instalación de extensiones, todo se puede hacer a través de la Paleta de comandos.

similar, Comando-P traerá el Ir al archivo… paleta.

Terminal

Participación Mando-' abrirá la terminal incorporada, que yo amor.

Esto abre el terminal directamente en la raíz de su proyecto, evitando que tenga que navegar. Haciendo clic en el + El icono abre más ventanas de terminal que se pueden cambiar usando el menú desplegable. Todo esto se suma a una característica realmente útil, especialmente si utiliza compiladores al codificar.

Git

Otra característica de la que soy un gran fan es la integración de Git. Los cambios que realice en sus archivos se resaltan en varios lugares para que sepa exactamente lo que está sucediendo:

En la figura de arriba, puede ver la notificación de la barra lateral que me informa de un cambio no confirmado, el cambio listado en el panel de Git y una línea resaltada para mostrarme dónde está el cambio en el archivo..

VSC también mostrará comparaciones de versiones una al lado de la otra, solo para mayor claridad.

Otros comandos estándar de Git, como sincronización, extracción, etc., están disponibles en el panel de Git..

Emmet (Codificación Zen)

Gran noticia: Emmet ya está integrado en VSC. No se requiere configuración o configuración, simplemente puede comenzar a usarla (con Lengüeta siendo la tecla de acceso rápido predefinida para activar sus fragmentos de código) tan pronto como abra el editor por primera vez.

Cursores multiples

Cuando resaltes un fragmento de código en tu archivo, VSC resaltará automáticamente todas las demás apariciones de esa cadena. A continuación, puede golpear Comando-D para agregar otro cursor a la siguiente instancia, o Shift-Command-L Para agregar un cursor a todas las instancias. Edición en masa, fácilmente.

Ajustes

La página de configuración en VSC es muy intuitiva. Al igual que Sublime Text, las configuraciones se almacenan en un archivo (JSON en este caso) que le permite navegar por todos los valores predeterminados. Al golpear el editar Al lado de cada configuración, lo copiará en un archivo personalizado donde podrá realizar cambios:

Golpear Salvar y ver sus cambios surten efecto de inmediato..

IntelliSense

IntelliSense es una función dentro de VSC que tenía muchas ganas de probar tan pronto como abrí el editor. Es un asistente súper cargado de autocompletado y resaltado de sintaxis y va un poco más lejos de lo que usted esperaría que este tipo de característica vaya.

Al pasar el cursor sobre los selectores de CSS, le daremos un ejemplo de cómo podría usar el HTML correspondiente (muy útil para principiantes):

Al pasar el ratón por encima de las propiedades, se revela la documentación sobre lo que hacen y los valores de color se añaden con pequeñas muestras para mostrarle cómo aparecen en la pantalla. Las sugerencias de código cuando estás escribiendo son extremadamente completas.

Extensiones

Código> Preferencias> Tema de color Se abrirá (lo has adivinado) la paleta de colores. Desplácese por los ejemplos y verá que la interfaz de usuario cambia en consecuencia. Golpear Entrar para hacer esos cambios permanentes.

Más allá de los temas predeterminados, también hay un gran mercado de otros ejemplos (actualmente gratuitos) disponibles, además de extensiones de todo tipo para jugar..

Conclusión

De todas formas, algunas de mis funciones favoritas en Visual Studio Code son suficientes para decir que hay muchas, muchas más funciones disponibles para discusión. En cuanto a mi experiencia utilizando VSC hasta ahora, solo puedo decir que ha sido positivo. Anteriormente estaba usando Atom, y no me arrepiento de haber hecho el cambio un poco. Por supuesto, puedes estar en desacuerdo conmigo, pero en mi opinión personal, no te equivocarás al descargar y tomar este editor de código para dar una vuelta..

Enlaces útiles

  • Extensiones esenciales para Visual Studio Code por Craig Campbell
  • Descargar Visual Studio Code
  • Conceptos básicos de diseño web: elegir un editor de texto
  • Visual Studio Code Marketplace