6 noviembre, 2015
Esta nota fue publicada originalmente en la edición 140 de revista POWER. Podes suscribirte a la versión impresa y/o digital aquí.
Por Fernando Luna
Efectivamente Microsoft ha cambiado su forma de ver el mundo de los sistemas operativos y herramientas en general. La importancia de la comunidad en el mundo Linux, sumada a la interactividad en las redes sociales de su equipo de ingenieros con la gente que utiliza los productos, hicieron que el gigante de Redmond comprendiera que el desarrollo de un producto es mucho más efectivo teniendo una interacción directa con quienes vayan a utilizarlo, es decir: el cliente final.
Así fue como nacieron los grandiosos proyectos de Microsoft que hoy conocemos como Technical Preview, donde podemos encontrar a Windows, Office y Visual Studio, entre otros productos. A su vez, haciendo referencia a este último producto, Microsoft comenzó a analizar una clara movida que surgió en estos últimos años: el uso de editores de código livianos.
En base al auge que demuestra la preferencia de muchos usuarios por editores como Notepad++, Sublime Text, Code Writer, o Brackets, entre otros tantos, Microsoft comprendió que muchos usuarios optan hoy por un editor de código simple que no requiera un tiempo importante en levantar un IDE, y que a su vez reconozca sintaxis de diferentes lenguajes y que pueda conectarse a repositorios en línea. De este conjunto de necesidades, Microsoft trajo a la luz a su nueva herramienta de código liviano, a la cual bautizó Visual Studio Code.
El IDE
Visual Studio Code posee un entorno de desarrollo simplificado, que le permite editar código a los desarrolladores que no requiera una compilación continua para poder funcionar. Por ello, en este nuevo editor, el developer podrá editar sin problema el código de páginas ASP.net, HTML5, JavaScript, CSS, .SQL, XML, entre otras tantas opciones.
Visual Studio Code ofrece una liviandad en cuanto a IDE se refiere, que supera con creces a muchos otros editores, diferentes de la plataforma Visual Studio. Entre los otros entornos de desarrollo podemos destacar a Dreamweaver, Netbeans y Eclipse. Estos programas poseen soporte multilenguaje pero verdaderamente son pesados de instalar, medianamente complejos de configurar, y ocupan mucho espacio en el disco (aunque esto último ya no es un gran impedimento).
Simpleza ante todo
Microsoft puso mucho énfasis en hacer un producto sencillo, fácil de instalar y con las herramientas indispensables para que el programador solo se ocupe de escribir código. Para alzarnos con una copia de VSCode, simplemente debemos ir a la siguiente URL y descargar la versión correspondiente para nuestro sistema operativo. Recordemos que está disponible para OS-X, Linux y Windows.
Al ejecutar el programa, en su pantalla principal encontramos la barra de menú superior, la barra de herramientas, una barra lateral de acceso rápido, y la pantalla central dividida en dos, teniendo en el centro la opción de comenzar a escribir código, y sobre la derecha, una serie de accesos directos a tutoriales e información rápida sobre el producto.
Por supuesto que todos aquellos que han pasado por el uso de Brackets.io o similar, el uso de VSCode se les hará casi instantáneo. Para quienes no han tenido contacto con ningún editor “Lite” de código, pasen por los párrafos contiguos para tomar un rápido pantallazo de la herramienta.
Características de VSCode
En la pantalla principal de este IDE nos encontramos, al iniciarlo por primera vez, una ventana de bienvenida sobre el lateral derecho de la pantalla. En este marco encontramos una serie de consejos que nos permiten acceder a los puntos más importantes de la aplicación. Para abrir un archivo, o iniciar un comando determinado, debemos presionar la combinación de teclas <Ctrl+O>.
Esto iniciará una pequeña ventana con una caja de texto, donde podemos tipiar el nombre de un archivo o carpeta. Inmediatamente debajo de la ventana, encontraremos el listado de archivos abiertos previamente, a modo de acceso directo.
VSCode es un IDE que no posee una interfaz similar a Visual Studio, donde podemos iniciar un nuevo proyecto específico, ingresando un nombre de proyecto y solución, seleccionando un lenguaje de programación específico, y eligiendo el tipo de proyecto al inicio del mismo (web, mobile, o desktop).
Crear un proyecto nuevo
Este IDE nos permite crear una serie de proyectos específicos, a saber: Web, utilizando ASP.NET 5, o Node.JS. También podemos iniciar proyectos simples basados en HTML5, CSS, JavaScript, o editar algún framework de desarrollo, como lo es Jquery Mobile o Ratchet, entre otros.
La manera de iniciar un nuevo proyecto con este IDE es crear una carpeta determinada en nuestro equipo, ya sea de forma manual o mediante línea de comandos, o iniciar un nuevo proyecto. Por ejemplo, tipiando los comandos necesarios de Apache Cordova, y luego buscando la carpeta creada desde la opción [Open Folder].
Abierta la carpeta del proyecto nuevo, nos aparece sobre el extremo derecho un menú desplegable sobre el ícono [Explore]. Dentro del apartado VSCODE del menú desplegable encontraremos la opción de crear un nuevo archivo. Presionamos sobre dicho ícono, y a continuación escribimos el nombre del archivo en cuestión.
Inmediatamente veremos el archivo expandido en el apartado central del IDE, donde ya podemos comenzar a escribir código. Haremos un ejemplo rápido en HTML5 para evaluar el comportamiento de VSCode. Para esto utilizaremos Ratchet Framework, descargable desde la siguiente URL.
Luego de descargar este archivo .ZIP, debemos arrastrar sus contenidos hacia la carpeta del proyecto que iniciamos. VSCode detectará el nuevo contenido de forma instantánea y actualizará el listado de archivos y subcarpetas en el apartado de proyecto del IDE.
Al seguir escribiendo el código, que permite vincular nuestro HTML inicial con archivos CSS y JS, el IDE VSCode no presentó problema alguno. Sin embargo, al referenciar una ruta incorrecta hacia un archivo JS, el IDE no advirtió de movida el error, el cual para subsanarlo debimos corregirlo de forma manual.
Una buena forma de automatizar el código en un nuevo proyecto es, al referenciar un archivo CSS o JS determinado, o tal vez otro archivo HTML si este no existe, podemos escribir la ruta estimada para el mismo dentro del código que estamos trabajando, y luego mantener presionada la tecla <Ctrl> y hacer clic sobre el archivo. VSCode nos dirá que no existe y nos ofrecerá, mediante un cuadro de diálogo, crear un nuevo archivo en la ruta especificada. De elegir esta última opción, el IDE creará el archivo por nosotros.
