Cómo usar Visual Studio Code

Visual Studio Code, VSCode para amigos, es un editor increíblemente poderoso que está creciendo enormemente en popularidad. Descubra por qué y sus principales características para desarrolladores

Introducción

Desde el principio, los editores son una fiera extraña. Algunas personas defienden enérgicamente su elección de editor. En el mundo Unix tienes esosEmacsvsvi"Guerras", y me imaginopor quétanto tiempo se dedica a debatir las ventajas de unos frente a otros.

Usé toneladas de editores e IDE en los últimos años. Puedo recordar TextMate, TextWrangler, Espresso, BBEdit, XCode, Coda, Brackets, Sublime Text, Atom, vim, PHPStorm. La diferencia entre un IDE y un editor radica principalmente en el conjunto de características y la complejidad.

Prefiero en gran medida un editor sobre un IDE, ya que es más rápido y se vuelve menos complicado.

En los últimos 12 meses he estado usando VS Code, el editor de código abierto de Microsoft, y rápidamente se ha convertido en mi editor favorito.

¿Debería cambiarme a VS Code? ¿Y por qué?

Si está buscando sugerencias sobre si usarlo o no, permítame decir, debe cambiar a él desde cualquier otro editor que esté usando ahora.

Este editor se basa en décadas de experiencia como editor de Microsoft.

El código del editor es completamente de código abierto y no se requiere ningún pago para usarlo.

UsaElectróncomo base, lo que le permite ser multiplataforma y funcionar en Mac, Windows y Linux. Está construido usando Node.js, y puede extenderlo usando JavaScript (lo que lo convierte en una ventaja para todos los desarrolladores de JavaScript).

Esrápido, fácilmente el editor más rápido que he usado después de Sublime Text.

Se ha ganado el entusiasmo de la comunidad: hay miles deextensiones, algunos oficiales y otros hechos por la comunidad, y esencuestas ganadoras.

Microsoft lanza una actualización cada mes. Las actualizaciones frecuentes fomentan la innovación y Microsoft está escuchando a sus usuarios, mientras mantiene la plataforma lo más estable posible (debería decir que nunca tuve un problema con VS Code en 1 año de usarlo todos los días casi todo el día).

Empezando

La página de inicio de Visual Studio Code en Internet eshttps://code.visualstudio.com/.

Vaya a ese sitio para descargar la última versión estable del editor.

VS Code site

El proceso de instalación depende de la plataforma y debería estar acostumbrado.

Cuando inicie el editor por primera vez, verá la pantalla de bienvenida:

Welcome screen for VS Code

Hay una barra de herramientas a la izquierda con 5 iconos. Que da acceso a:

  • El explorador de archivos
  • Buscar
  • Fuente de control
  • El depurador
  • Las Extensiones

Explorador

Comencemos la exploración con el explorador (juego de palabras).

VS Code Explorer

Presione el botón "Abrir carpeta" en la barra lateral, o elOpen folder...enlace en la página de bienvenida. Ambos activarán la vista del selector de archivos.

Elija una carpeta donde tenga el código fuente, o incluso solo archivos de texto, y ábrala.

VS Code mostrará el contenido de esa carpeta en su vista:

Opened folder

A la derecha, la vista vacía muestra algunos comandos para realizar algunas operaciones rápidas y su atajo de teclado.

Si selecciona un archivo a la izquierda, ese archivo se abrirá en el panel principal:

Files list

y si comienza a editarlo, observe que aparecerá un punto junto al nombre del archivo en la pestaña, y también en la barra lateral:

Editing file

PrensadoCMD+Ple mostrará un selector de archivos rápido para mover fácilmente archivos en proyectos grandes:

Quick file picker

Puede ocultar la barra lateral que aloja el archivo usando el acceso directoCMD+B.

Nota: estoy usando los atajos de teclado de Mac. La mayoría de las veces, en Windows y Linux, simplemente cambia CMT a CTRL y funciona, pero no siempre. Imprime tureferencia de atajos de teclado.

El segundo icono de la barra de herramientas es "Buscar". Al hacer clic en él, se muestra la interfaz de búsqueda:

Search

Puede hacer clic en los iconos para que la búsqueda distinga entre mayúsculas y minúsculas, para hacer coincidir palabras completas (no subcadenas) y utilizar una expresión regular para la cadena de búsqueda.

Para realizar la búsqueda, presioneenter.

Al hacer clic en el símbolo ▷ a la izquierda, se habilita la herramienta de búsqueda y reemplazo.

Al hacer clic en los 3 puntos, se muestra un panel que le permite incluir algunos tipos específicos de archivos y excluir otros archivos:

Search and replace

Fuente de control

La pestaña Control de fuente se habilita haciendo clic en el tercer icono de la barra de herramientas.

Source control

VS Code viene con soporte Git listo para usar. En este caso, la carpeta que abrimos no tiene el control de fuente inicializado.

Hacer clic en el primer icono en la parte superior, con el logo de Git, nos permite inicializar el repositorio de Git:

Git repo is initialized

losUal lado de cada archivo significa que se ha actualizado desde la última confirmación (dado que nunca hicimos una confirmación en primer lugar, todos los archivos se actualizan).

Crea la primera confirmación escribiendo un mensaje de texto y presionandoCmd-Entero haciendo clic en el icono ✔︎ en la parte superior.

First commit

Por lo general, configuro esto para organizar automáticamente los cambios cuando los confirmo.

El icono de 3 puntos, cuando se hace clic, ofrece muchas opciones para interactuar con Git:

Git options

Depurador

El cuarto icono de la barra de herramientas abre el depurador de JavaScript. Esto merece un artículo por sí solo. Mientras tanto, echa un vistazolos documentos oficiales.

Extensiones

El quinto icono nos lleva a las extensiones.

Extensions

Las extensiones son una característica importante de VS Code.

Pueden proporcionar tanto valor que seguramente terminará usando toneladas de ellos.

Tengo muchas extensiones instaladas.

Una cosa para recordar es que cada extensión que instale afectará (más o menos) el rendimiento de su editor.

Puede deshabilitar una extensión que instale y habilitar solo cuando la necesite.

También puede deshabilitar una extensión para un espacio de trabajo específico (hablaremos sobre los espacios de trabajo más adelante). Por ejemplo, no desea habilitar las extensiones de JavaScript en un proyecto de Go.

Hay una lista de extensiones recomendadas, que incluyen todas las herramientas más populares.

Recommended extensions

Dado que edito muchos archivos de rebajas para mi blog, VS Code me sugiere elmarkdownlintextensión, que proporciona linting y verificación de sintaxis para archivos Markdown.

Como ejemplo, instalémoslo.

Primero, inspecciono el número de visitas. Son 1,2 millones, ¡tantos! Y las críticas son positivas (4.55). Al hacer clic en el nombre de la extensión, se abren los detalles a la derecha.

Extension details

Al presionar el botón verde Instalar, se inicia el proceso de instalación, que es sencillo. Hace todo por ti, y solo necesitas hacer clic en el botón "Recargar" para activarlo, que básicamente reinicia la ventana del editor.

¡Hecho! Probémoslo creando un archivo de rebajas con un error, como faltaaltatributo en una imagen. Nos lo dice con éxito:

markdownlint extension

A continuación, presento algunas extensiones populares que no querrá perderse y las que más utilizo.

La terminal

VS Code tiene un terminal integrado.

Puedes activarlo desde el menúView ➤ Integrated Terminal, o usandoCMD+\`y se abrirá con su shell predeterminado.

The terminal

Esto es muy conveniente porque en el desarrollo web moderno casi siempre tiene algunosnpmoyarnproceso que se ejecuta en segundo plano.

Puede crear más de una pestaña de terminal y mostrarlas una al lado de la otra, y también apilarlas a la derecha en lugar de en la parte inferior de la ventana:

Multiple terminals

La paleta de comandos

La paleta de comandos es una herramienta muy poderosa. Lo habilitas haciendo clic enView ➤ Command Palette, o usandoCMD+SHIFT+P

Aparecerá una ventana modal en la parte superior, que le ofrecerá varias opciones, según los complementos que haya instalado y los comandos que utilizó por última vez.

Las operaciones comunes que realizo son:

  • Extensiones: instalar extensiones
  • Preferencias: Tema de colorpara cambiar el tema del color (a veces cambio de la noche al día)
  • Formato de documento, que formatea el código automáticamente
  • Ejecutar código, que es proporcionado por Code Runner, y ejecuta las líneas resaltadas de JavaScript

puede activar cualquiera de ellos comenzando a escribir, y la función de autocompletar le mostrará el que desea.

Recuerda cuando escribisteCMD+Ppara ver la lista de archivos, antes? Es un acceso directo a una función específica de la paleta de comandos. Hay otros:

  • Ctrl-Shift-Tabte muestra los archivos activos
  • Ctrl-Gabre la paleta de comandos para permitirle ingresar un número de línea para ir a
  • CMD+SHIFT+Omuestra la lista de símbolos encontrados en el archivo actual

Que simbolossondepende del tipo de archivo. En JavaScript, pueden ser clases o funciones. En Markdown, títulos de las secciones.

Temas

Puede cambiar el tema de color utilizado haciendo clic enCMD-k+CMD-t, o invocando elPreferencias: Tema de colormando.

Esto le mostrará la lista de temas instalados:

Themes

puede hacer clic en uno o moverse con el teclado, y VS Code le mostrará una vista previa. Haga clic en entrar para aplicar el tema:

Light Theme

Los temas son solo extensiones. Puede instalar nuevos temas yendo al administrador de extensiones.

Probablemente, lo mejor para la detección es utilizarel sitio web del mercado.

Mi tema favorito esAyu, que proporciona un gran estilo para cualquier momento del día, noche, mañana / tarde y tarde.

Personalización

El tema es solo una personalización que puedes hacer.

Los iconos de la barra lateral que se asignan a un archivo también son una gran parte de una buena experiencia de usuario.

Puedes cambiarlos yendo aPreferences ➤ File Icon Theme. Ayu viene con su propio tema de iconos, que combina perfectamente con los colores del tema:

Ayu Light

Todas esas personalizaciones que hicimos hasta ahora, el tema y el tema de iconos, se guardan en las preferencias del usuario.

IrPreferences ➤ Settings(también accesible a través deCMD-,) para verlos:

Settings

La vista muestra la configuración predeterminada a la izquierda, para una referencia fácil, y la configuración anulada a la derecha. Puede ver el nombre del tema y el tema de iconos que configuramos, enworkbench.colorThemeyworkbench.iconTheme.

Hice zoom usandoCMD-+, y esta configuración también se guardó parawindow.zoomLevel, por lo que la próxima vez que se inicie VS Code, recordará mi elección para hacer zoom.

Puede decidir aplicar alguna configuración globalmente, enAjustes de usuario, o relativo a un espacio de trabajo, enConfiguración del espacio de trabajo.

La mayoría de las veces, esas configuraciones se agregan automáticamente por extensiones o por el Código VS en sí, pero en algunos casos, las editará directamente en este lugar.

Buenas opciones de configuración

VS Code tiene muchas opciones. Todo es altamente configurable y, a veces, es difícil entenderlo.

Puede abrir el archivo JSON de configuración usando la paleta de comandos y seleccionarOpen Settings (JSON).

Algunas buenas opciones de configuración que configuré en mi código:

Opción Descripción
"editor.minimap.enabled": false Elimina el minimapa, que se muestra a la derecha del editor.
"explorer.confirmDelete": false Deja de pedirme confirmación cuando quiero eliminar un archivo (¡tengo control de fuente!)
"explorer.confirmDragAndDrop": false Deshabilitar la confirmación para arrastrar y soltar
"editor.formatOnSave": true Formatee el código automáticamente cuando lo guarde
"editor.formatOnPaste": true Formatee el código automáticamente cuando lo pegue en mi código
"javascript.format.enable": true Habilitar el formato para el código JavaScript
"files.trimTrailingWhitespace": true Recortar espacios en blanco en archivos
"editor.multiCursorModifier": "alt" Al hacer clic en la tecla Alt y hacer clic con el mouse, puedo seleccionar varias líneas
"editor.detectIndentation": true Adaptarse a la sangría del archivo, útil al editar el código de otras personas
"editor.quickSuggestionsDelay": 0 Muestre la sugerencia de código inmediatamente, no después de unos segundos

La mejor fuente para codificar

me gustaCódigo Fira. Es gratis y tiene algunas ligaduras de programación muy agradables, que transforman construcciones comunes como!==y=>a símbolos más agradables:

Fira code

Habilítelo instalando la fuente y agregando esto a su configuración:

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true`

Espacios de trabajo

Todas las configuraciones de usuario se pueden anular en la configuración del espacio de trabajo. Tienen prioridad. Son útiles, por ejemplo, cuando usa un proyecto que tiene reglas de pelusa diferentes de todos los demás proyectos que usa, y no desea editar sus configuraciones favoritas solo para eso.

Puede crear un espacio de trabajo a partir de un proyecto existente haciendo clic en elFile ➤ Save Workspace as...menú.

La carpeta abierta actualmente se habilitará como carpeta principal del espacio de trabajo.

La próxima vez que abra el código VS, o cambie de proyecto, en lugar de abrir una carpeta, abra un espacio de trabajo, y eso abrirá automáticamente la carpeta que contiene su código, y recordará todas las configuraciones que estableció específicamente para ese espacio de trabajo.

Además de tener configuraciones a nivel de espacio de trabajo, puede deshabilitar extensiones para un espacio de trabajo específico.

Puede trabajar con carpetas hasta que tenga una razón específica para querer un espacio de trabajo.

Una buena razón es la posibilidad de tener varias carpetas raíz independientes. Puedes usar elFile ➤ Add Folder to Workspacepara agregar una nueva carpeta raíz, que se puede ubicar en cualquier lugar del sistema de archivos, pero se mostrará junto con la otra carpeta existente que tenía.

Edición

IntelliSense

Cuando edita en uno de los lenguajes admitidos (JavaScript, JSON, HTML, CSS, Less, Sass, C # yMecanografiado) VS Code tiene IntelliSense, una tecnología que sugiere el autocompletado de funciones y parámetros, a medida que los escribe.

Formato de código

Dos útiles comandos (Format DocumentyFormat Selection) están disponibles en la paleta de comandos para autoformatear el código. VS Code por defecto admite el formato automático para HTML, JavaScript, TypeScript y JSON.

Errores y advertencias

Cuando abres un archivo, verás a la derecha una barra con algunos colores. Esos colores indican algunos problemas en su código. Por ejemplo, esto es lo que veo ahora mismo:

Warnings

Esas son todas las advertencias o errores. Puede intentar encontrarlos en el código, donde verá piezas subrayadas en rojo, o también puede presionarCMD-Shift-M(o eligeView ➤ Problems)

View problems

Atajos de teclado

Te mostré muchos atajos de teclado hasta ahora.

Está empezando a ser complicado recordarlos todos, pero son una buena ayuda para la productividad. Sugiero imprimir la hoja de referencia de atajos oficiales, paraMac,LinuxyVentanas.

Mapas de teclas

Si está acostumbrado a los atajos de teclado de otros editores, tal vez porque trabajó con un editor durante mucho tiempo, puede usar un mapa de teclas.

El equipo de VS Code proporciona mapas de teclas para los editores más populares listos para usar: vim, Sublime Text, Atom, IntelliJ, Eclipse y más. Están disponibles como complementos. Abriendo elPreferences ➤ Keymaps Extensionsmenú.

Fragmentos de código

Los fragmentos son geniales.

Para cada idioma en el que pueda estar desarrollando, hay extensiones que brindan fragmentos listos para usar para que los use.

Para JavaScript / React, uno popular esVS Code ES7 React / Redux / React-Native / JS fragmentos

Solo escriberfe, presione TAB y esto aparecerá en su editor:

import React from 'react'

const $1 = props => { return <div>$0</div> }

export default $1

hay muchos de estos atajos y ahorran mucho tiempo. No solo por escribir, sino también por buscar la sintaxis correcta.

También puede definir sus propios fragmentos. Hacer clicPreferences ➤ User Snippetsy siga las instrucciones para crear su propio archivo de fragmentos.

Escaparate de extensiones

El comando de la CLI de VS Code

Abra la paleta de comandos y busque elinstall 'code' command in PATHmando.

Presione enter y elcodeestará disponible globalmente en su línea de comandos.

Esto es muy útil para iniciar el editor y abrir una nueva ventana con el contenido de la carpeta actual, concode ..

code -ncreará una nueva ventana.

Una cosa útil que no siempre se sabe es que VS Code puede mostrar rápidamente la diferencia entre dos archivos, concode --diff file1.js file2.js.

Resolver problemas de CPU de alto uso

Me encontré con un problema de uso elevado de CPU y ventiladores girando, con un proyecto con muchos archivos debajonode_modules. Agregué esta configuración y las cosas parecían normales nuevamente:

  "files.exclude": {
    "/.git": true,
    "/.DS_Store": true,
    "/node_modules": true,
    "/node_modules/": true
  },
  "search.exclude": {
    "/node_modules": true
  },
  "files.watcherExclude": {
    "/node_modules/": true
  },

Más tutoriales de devtools: