[Article] Visual Studio Code | Tips 4

En post anteriores vimos funcionalidades que posee la herramienta. En este post veremos plugins. Visual Studio Code posee una gran variedad de plugins que pueden cubrir todas nuestras necesidades. Veremos algunos de los más recomendados.

Bookmarks

Este plugin nos permitirá poner marcar en nuestros archivos para luego poder movernos entre estos para ubicar las secciones  de código que deseamos. con el comando Ctrl + Alt + K marcamos o desmarcamos el código. Se podrá ver un icono celesta del lado izquierdo.  Una vez que marcamos el código podemos movernos hacia adelante con Ctrl + Alt + L y hacia atrás con Ctrl + Alt + J.

Prettier

Prettier es un formateador de código para javascript, typescript y css. Presionaremos Ctrl + Shift + P para ingresar a la paleta de comandos, tipeamos Format Document y presionamos enter. Automáticamente el código de idéntica de la forma correcta.

Paste Json As Code

Paste Json as Code nos ayuda a copiar código JSON desde cualquier lugar y pegarlo en nuestro editor dependiendo el tipo o lenguaje que seleccionemos. Lo que hara sera tirar el objeto JSON. Para esto seleccionamos nuestro código JSON, luego presionamos Ctrl + Shift + P y tipeamos Paste JSon as Code (recordemos que detectara el lenguaje del archivo destino por su extensión), le damos un nombre y presionamos enter. Nuestro código, en el caso del ejemplo, se tipara en C#.

GitLens

GitLens dará la capacidad de poder ver que comentarios referentes a git tiene el codigo el cual estamos trabajando. Es una herramienta muy útil que nos dice que cosas estan sin commit o quién fue el último en modificar ese código.

Project Manager

Este plugin agrega una nueva funcionalidad a Visual Studio Code. Normalmente solamente podemos abrir una carpeta de proyecto, pero con Project Manager podremos abrir varias carpetas en nuestro entorno de trabajo.

Live Server

Si somos desarrolladores web nos servirá de mucha ayuda un servidor Web. Lo que hace este plugin es tener un servidor web disponible que irá reflejando los cambios a medida que vamos modificando nuestro código.

Conclusión

Visual Studio Code es una poderosa herramienta para desarrolladores. Tiene una gran cantidad de funcionalidad pensadas para nosotros, y si no las tiene, algun plugin puede ayudarnos con lo que necesitamos. No se pierdan de probar esta herramienta.

[Article] Visual Studio Code | Tips 3

Como vimos en el post anterior, Visual Studio Code se ha vuelto una de las herramientas de cabecera para muchos programadores. En este post vamos a ver mas funcionalidades de la herramienta que no ayudaran con nuestro código.

EDITING HACKS

La herramienta posee un gran cantidad de funciones dentro del editor de texto que hace que sea más sencillo y rápido editar mientras estamos desarrollando. Veremos algunas de ellas.

Selección Múltiple

Si queremos editar varios valores que pertenecen a una columna debemos presionar Alt + Click seleccionado el lugar donde queremos comenzar. Luego presionando Ctrl + Alt  + Up o Down seleccione la filas.

Podemos seleccionar una secuendi de tag para editarlos. Seleccionaremos el tag y presionamos Ctrl + D hasta el tag final.

Siempre seleccionamos por filas para editar y cuando debemos modificar una columna debemos ir fila por fila para poder editarlo. Ya no es necesarios. La edición de columnas nos ayudará con este problema. Debemos mantener presionado Shift + Alt y arrastre el cursor para seleccionar las columnas.

Copiar Filas

Cuando copiamos filas la ejecución clásica es: primero, seleccionar filas, luego presionar Ctrl + C, bajar una fila y presionar Ctrl + V. Con Shift + Alt + Up y Shift + Alt + Down podemos hacer lo mismo copiando hacia arriba o hacia abajo la fila en la cual estamos posicionados.

Mover Filas

De la misma forma que duplicamos filas, podemos mover bloque de código hacia arriba o hacia abajo. En caso de ser html respetará los tags. Si solo estamos ubicados en una línea moverá solamente esa línea

Formateo Automático de Código

Supongamos que tenemos una persona en el equipo desordenada. Escribe su código sin respetar el formato del código que está haciendo. Para ordenarlo podemos seleccionar el código y presionar Ctrl +K + F.

Ventana rápida de referencias

Seleccionaremos un objeto, luego presionamos Shift + F12, se abrirá una ventana donde podemos ver el listado de archivo junto al código de donde ese objeto está siendo referenciado.

Para buscar todas las referencias debemos presionar Shift + Alt + F12.

Renombrado de Símbolos

Imaginemos que declaramos un objeto con un nombre erróneo y ese objeto fue utilizado en un gran cantidad de sitios. ¿Estamos perdidos? No! podemos seleccionar el símbolo, presionar F2 y cambiar el nombre. Automaticamente se abrira todos los archivos los cuales fueron afectados por el cambio.