Consejos y trucos para configurar Visual Studio Code y aumentar la productividad

Rubén Castro, 19 enero 2021

Aunque ya se han acabado las ofertas de navidad, en Cecotec (gran marca española de gadgets y pequeño electrodoméstico) están tirando la casa por la ventana y tienen ofertas en todos sus productos de más del 60%. ¡Corre que vuelan!

Quiero ver las mejores ofertas de Cecotec

Visual Studio Code se ha convertido en uno de los editores de texto más completos y con razón. En este artículo vamos a ver algunos consejos y trucos para configurarlo de manera inteligente y sacarle el mayor partido posible. De esta manera, en cuanto nos acostumbremos a usarlos, aumentaremos nuestra productividad de manera muy fácil.

Material Icon Theme

Lo primero que vamos a ver es algo a lo que no daba mucha importancia al principio, pero que ahora no puedo vivir sin él, se trata del Material Icon Theme.

Se trata de un tema que incluye un montón de iconos que nos facilitará mucho la tarea de identificar cada tipo de fichero gracias a los iconos fácilmente diferenciables. Además, son bonitos y se ven con bien.

Desde aquí lo puedes descargar y aprender a configurar.

Otras extensiones interesantes:

  • GitLens: herramientas para Git
  • Markdown All in One: atajos de teclado para markdown
  • Rainbow CSV: facilita el uso de tablas en csv
  • WordCounter: contador de palabras

Code Snippets

Los snippets son fragmentos o trozos de texto que se expanden gracias a plantillas y pueden generar un texto mucho mayor. Por ejemplo, podemos escribir una serie de letras que se pueden convertir en la plantilla para un bucle. Así nos ahorramos un montón de tiempo al ahorrar tecleo y reducir los errores. Como es lógico, los snippets son especialmente útiles con fragmentos de texto que utilicemos a menudo.

En VS Code podemos utilizar los snippets gracias IntelliSense al presionar Ctrl + Espacio cuando tenemos el cursor en una palabra. También podemos acceder a ellos en la paleta de comandos Ctrl + Shift + P escribiendo Insert Snippet.

Para que nos aparezcan los snippets de manera automática dependiendo del lenguaje que estemos usando (sin tener que presionar nada, como un autocompletado) debemos configurar el parámetro editor.quickSuggestions a true. Suele estar activado por defecto en muchos lenguajes, pero no en markdown, por ejemplo.

Se puede modificar en el fichero settings.json. Es útil configurarlo por workspace en vez de por usuario, así diferentes proyectos pueden tener diferente configuración

Cómo crear nuestro propios snippets

A los snippets propios de cada lenguaje les podemos añadir los que nosotros queramos. Para crearlos debemos ejecutar Preferences: Configure User Snippets en la paleta de comandos.

Una vez allí, podemos crearlos a nivel global, workspace o para un lenguaje en particular

A continuación, se nos abrirá un fichero con un ejemplo de cómo escribir nuestro propio snippet. Debemos escribir:

  • Nombre del snippet: nos aparecerá luego en el IntelliSense
  • Scope: a qué lenguajes quieres que afecte
  • Prefix: el propio snippet
  • Body: lo que queremos que se escriba
  • Description: puede proporcionar más info sobre el snippet. Es opcional

Vista de Modo Zen

Se trata de una vista sin distracciones donde se elimina todo (excepto el código) para que te concentres con más facilidad. Por supuesto, luego puedes variar la anchura de la página para que se adapte a tus necesidades.

Se activa puede activar:

  • Presionando a la vez Ctrl + K, las soltamos, y presionamos Z
  • Ver > Apariencia > Cambiar modo Zen (View > Appearance > Toggle Zen Mode)
  • Escribiendo en la paleta de comandos zen

Para salir, la forma más cómoda es presionando dos veces la tecla Escape.

Personalización de la barra de título

Podemos cambiar los colores de la barra de título según el proyecto en el que estemos, esto sirve para reconocerlos más fácilmente. Esto se puede hacer editando la configuración de la barra de título en la Configuración del espacio de trabajo para cada proyecto en el que desee que los colores de la barra de título sean diferentes.

Edición multilínea

Con VS Code podemos editar varias líneas a la vez, es algo habitual en muchos editores, pero hay gente que aún no lo conoce. Para emplear la edición de líneas múltiples debemos utilizar:

  • Windows: Ctrl + Alt + Teclas de flecha
  • Linux: Mayúsculas + Alt + Teclas de flecha

Otros ejemplos:

Ver más
WikiVersus puede usar cookies para recopilar estadísticas, optimizar la funcionalidad del sitio y ofrecerte publicidad basada en tus intereses. Si sigues navegando estarás aceptando su uso. Más información de nuestras políticas.