El desarrollo de software puede resultar abrumador. Parece haber un flujo interminable de nuevas herramientas, lenguajes y marcos de trabajo, y a menudo no tenemos ni idea de por dónde empezar. Entre esas diversas herramientas se encuentra un editor de código. Vamos a desmitificar los editores de código y sumergirnos en uno de los editores de código más populares: Visual Studio Code.
¿Qué es un editor de código?
Es posible que hayas oído hablar de un editor de texto, como Microsoft Word, Google Docs o la aplicación Notas de Apple. Con estas herramientas, un usuario puede editar texto. Un editor de código es muy similar. Es una herramienta diseñada específicamente para escribir y editar código (en lugar de texto plano). Podemos optar por utilizar un editor específico de código en lugar de un editor de texto para evitar problemas de formato automático, para utilizar funciones que faciliten la programación o para utilizar los mismos programas que utilizan nuestros compañeros de equipo para mantener los procesos.
Hay muchos editores de código diferentes que se pueden utilizar, como Sublime Text, Webstorm y Visual Studio Code (VS Code). Sin embargo, a la hora de elegir uno u otro, suele depender de las preferencias personales y de los lenguajes de programación que se deseen utilizar. Normalmente, un editor de texto sirve para cualquier lenguaje, pero Webstorm, por ejemplo, se comercializa para desarrolladores que programan en JavaScript. Por tanto, la elección de un editor u otro depende de las necesidades y preferencias de cada persona.
Si desea ver este blog en directo, aquí hay un video de Nyah Macklin & Jessica Rose que recorre el proceso de instalación de Visual Studio Code.
¿Por qué utilizar Visual Studio Code?
VSCode (desarrollado por Microsoft) se ha disparado en popularidad debido a su plétora de características, extensiones e interfaz fácil de usar. Es compatible con cientos de lenguajes de programación, incluyendo JavaScript, TypeScript, HTML y CSS - en Couchbase lo utilizamos con frecuencia para nuestro desarrollo, por lo que vamos a ver cómo descargar, instalar y utilizar VSCode hoy.
¿Cómo descargar VSCode?
Visite la página oficial Código VS configurar sitio web y navegue hasta el enlace de su sistema operativo específico (Windows, MacOS o Linux). (Si no está seguro de qué sistema operativo está utilizando, aquí tiene una recurso genial para averiguarlo).
Una vez que haga clic en cualquiera de los enlaces anteriores, deberá hacer clic en otro enlace que dice Descargar Visual Studio Code o Instalador de código de Visual Studio. Esto iniciará el proceso de descarga en su ordenador. (Ver)
Una vez que se haya descargado, debería aparecer una ventana emergente en algún lugar de la pantalla que indique que la descarga se ha completado.
Haga doble clic en el recuadro, que debería iniciar las instrucciones de instalación de VS Code (o le llevará a su carpeta de Descargas, donde de nuevo deberá hacer doble clic en el icono de VSCode). Haga clic en los pasos para completar la instalación (si no está seguro de alguna pregunta, los valores predeterminados suelen ser suficientes). Una vez terminado, VS Code debería abrirse automáticamente, pero si no es así, busque VS Code en su carpeta de Descargas y haga doble clic en el icono.
¿Cómo escribir código con VS Code?
Una vez que se abra VS Code, aparecerá lo siguiente, que le permitirá elegir un tema (el aspecto que desea que tenga VS Code).
Ahora que tienes el poder de VS Code en tus manos, puedes crear un nuevo archivo donde escribirás tu código, o abrir una carpeta y luego crear una nueva carpeta para alojar todos tus archivos de código.
Aquí he creado una carpeta llamada Couchbase_4_Life. (Puedes nombrar tu carpeta como quieras, ya que este será el nombre de todo tu proyecto. Nota: siempre puedes cambiarlo más adelante).
A VS Code a menudo le gusta comprobar si confía en los autores de los archivos de una carpeta en particular. Como usted mismo será el autor (o la persona que escribe el código que ponemos en esta carpeta), puede seleccionar la opción Sí, confío en los autores botón. Si alguna vez no te fías del autor puedes abrir la carpeta en Restringido modo. Más información aquí.
Ahora verá el título de la carpeta en la esquina superior izquierda de la pantalla.
Cuando pase el ratón por encima del título, verá 4 iconos. De izquierda a derecha representan, Archivo nuevo, Nueva carpeta, Actualizar Exploradory Contraer carpetas en el Explorador. Explorador, por cierto, sólo significa Explorador de Archivos, también conocido como el lugar en VS Code donde puede ver todos sus archivos. La sección del explorador está representada en la esquina superior izquierda donde se superponen dos trozos de papel, uno con un pliegue en la esquina.
A continuación, podemos seleccionar el primer icono, Archivo nuevo e introduzca el nombre del archivo específico que queremos crear. En esta captura de pantalla, un index.js y un index.html se han creado.
Haga clic en el botón index.html y debería aparecer un archivo vacío en el centro de su pantalla con el cursor parpadeando en la línea número 1. ¡Enhorabuena! Aquí es donde escribirás tus primeras líneas de código para este proyecto. Abajo comencé mi archivo con la línea html y una etiqueta h1 con la línea "¡Hola amigos de Couchbase, Bad Website Code y FreeCodeCamp!" Cuando escribí todo esto, hay un punto blanco que es visible en la parte superior cerca del nombre del archivo.
Este punto significa que el archivo aún no se ha guardado. Para que cualquier código que escriba se "guarde", tiene que ir a su escritorio y navegar a Archivo y luego Guardar o Guardar como. Una vez hecho esto, el punto desaparecerá, indicándole que su código se ha guardado correctamente.
A continuación, sería maravilloso ver el sitio web que estábamos codificando en VS Code. Para ello, puede descargar una extensión de VSCode llamada Servidor en directo. Las extensiones de VS Code son herramientas y funciones adicionales que puede descargar gratuitamente del mercado de Visual Studio Code y que facilitan la codificación y el desarrollo de software. Estas extensiones han sido creadas por desarrolladores como tú y como yo, ¡y a veces por la propia Microsoft!
En VS Code en el panel izquierdo, navega hasta el último icono que parece 4 cuadrados y uno separado. Haga clic en ese icono que se abrirá otro panel donde se puede buscar cualquier extensión que existe en el mercado. Introduce el término, servidor en directoy haga clic en uno con el nombre Ritwick Dey.
Una vez que haga clic en él, verá que esta extensión se ha instalado casi 40 millones de veces, y tiene cerca de una calificación de 5 estrellas. Estas son buenas señales para saber que esta extensión es de buena reputación y digna de ser instalada en su ordenador. Pulse el botón azul Instale botón. Una vez que ese botón se convierte en la palabra, Desinstalar a continuación, pulse el botón pequeño x en el Extensión: Servidor Live en la barra de pestañas superior y vaya a la pestaña index.html archivo.
Una vez en ese archivo, haga clic con el botón derecho del ratón en cualquier zona del archivo, lo que debería abrir una ventana emergente con la frase Abrir con Live Server en la parte inferior. Haz clic en ese botón.
Tu navegador debería haber aparecido en algún lugar de tu ordenador con el código que hemos escrito. ¡Este es tu primer sitio web! Como puedes ver, la URL tiene un aspecto extraño, y no tiene un ".com" o cualquier otra cosa y eso es porque este "sitio web" sólo es accesible desde su ordenador personal. Este sitio web aún no está en Internet para que todo el mundo lo vea, todavía está en fase de borrador.
En el próximo post, hablaremos de cómo compartir tu código en sus formas borrador y final utilizando el control de versiones y una herramienta llamada GitHub. ¡Nos vemos allí!
<3 Couchbase
#LearningOnTheCouch
