Viernes, 6 de Noviembre de 2015

Descubriendo Visual Studio Code: Primera parte

En esta nueva entrega, nos adentramos en la nueva herramienta gratuita que pone Microsoft a disposición de los desarrolladores de aplicaciones.

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).

code_01

Siguiendo con los cambios propuestos por Microsoft, Visual Studio CODE está disponible para Windows, Linux u OS-X.

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.

code_02

Luego de una instalación simple, se inicia el IDE de Visual Studio Code. Simple de entender y de manejar.

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.

code_03

Al escribir código, de forma instantánea nos aparece la opción InstelliSense, que nos ayuda a escribir correctamente. El lenguaje de programación o de marcado, es reconocido de forma automática.

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.

code_04

De forma automática, VSCode reconoce los archivos agregados por afuera del proyecto, y actualiza la ventana de proyecto de forma automática.

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.

code_05

VSCode nos ofrece crear de forma automática, aquellos archivos que declaramos en el código de una aplicación, y que aún no existen.

 

Galería de Imágenes

Últimos lanzamientos Ver más

  • Dany Lima

    el tema visual estudio 2018 porfavor nesesito ayuda alguien me puede decir 10 herramientas o objetos puede poner en el formulario ?
    De cada 5 objeto o herramienta poner 5 propiedades y para que sirve ?

  • Pingback: Descubriendo Visual Studio Code: Primera parte | FERIC()

  • puma

    Yo Uso Visual Basic express 2010, no tengo quejas, hago desde programas pequeños hasta sistemas de gestion de inventarios con bases de datos, tengo una maquina muy vieja y versiones mas modernas no me corren….

  • GAKSoftware

    Hasta ahora uso el Visual Studio Community 2013, y me resulta muy cómodo. Con el 2015 dieron un paso para atrás. Cuando pueda probaré Visual Studio Code en un intento de reemplazar CodeLite, y veré.

  • Pingback: Descubriendo Visual Studio Code: Primera parte()

 Do NOT follow this link or you will be banned from the site!