Aquí hay algunos trucos súper secretos de VS Code para aumentar su productividad

Programando como aficionado, profesional o incluso como desarrollador de una vez al mes, debe saber que tener herramientas inteligentes y afiladas es vital para cualquiera que esté dispuesto a dedicar el máximo de horas productivas mientras trabaja.

He seleccionado una pequeña colección de consejos, trucos y extensiones, y los he filtrado para mantener solo los más raros y los más útiles para un desarrollador web moderno. Como sabemos, el ecosistema de JavaScript es muy grande y sigue creciendo. Por esta razón, intentaré ser imparcial tanto como sea posible.

Los siguientes consejos de Visual Studio Code lo ayudarán a salir de todas sus sesiones de codificación con este aspecto:

Haciéndolo hermoso y amigable

Si realmente se ve bien y es amigable, te encantará el tiempo que pasas con él.

1. Tema e íconos del material

Esta es la bestia en los temas de VS Code. Creo que el tema material es lo más parecido a escribir con un bolígrafo y un papel dentro del editor (especialmente cuando se usa el tema variante sin contraste ). Su editor casi parece plano y sin problemas, pasando de las herramientas integradas al editor de texto.

Imagina un tema épico junto con íconos épicos. Iconos de tema materialson solo una alternativa increíble para reemplazar los iconos VSCode predeterminados. El gran catálogo de iconos diseñados se integra sin problemas con el tema haciéndolo más bonito. Esto le ayudará a encontrar sus archivos fácilmente en el explorador.

2. Modo Zen con diseño centrado

Es posible que ya conozca la vista del modo Zen, también conocida como vista libre de distracciones (para aquellos que provienen de Sublime Text) donde todo (excepto el código) se elimina para brindarle una verdadera intimidad con su editor de código. ¿Sabía que puede centrar el diseño para ayudarlo a leer su código como si estuviera en un visor de PDF? Esto realmente te ayudará a concentrarte en una función o estudiar el código de otra persona.

Modo Zen : [Ver> Apariencia> Alternar modo Zen ]

Diseño central: [Ver> Apariencia> Alternar diseño centrado ]

3. Fuentes con ligaduras

El estilo de escritura hace que la lectura sea fácil y conveniente. Puede hacer que su editor se vea mejor con fuentes increíbles junto con ligaduras. Aquí están 6 de las mejores fuentes que admiten ligaduras (según www.slant.co)

Puedes probar Fira Code, es simplemente increíble y de código abierto. Así es como cambia la fuente en VSCode después de instalarlo.

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

La fuente de renombre Operator Mono no viene con soporte nativo para ligaduras. Sin embargo, si eres un gran fanático de las ligaduras, puedes agregarlas usando esta biblioteca.

4. Sangría de arco iris

Sangría con estilo. Esta extensión colorea la sangría frente a su texto alternando cuatro colores diferentes en cada paso.

La configuración de sangría predeterminada colorea la sangría siguiendo un esquema de arco iris. Sin embargo, personalicé el mío para seguir diferentes tonos de gris. Si desea que el suyo se parezca a este ejemplo, copie y pegue el siguiente fragmento en susettings.json

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],

5. Personalización de la barra de título

Este es un gran ajuste visual. Lo copié de Wes Bos en una de sus lecciones de React & GraphQL. Básicamente, cambió los colores de la barra de título en diferentes proyectos para reconocerlos fácilmente y ayudar a la audiencia a distinguirlos también. Esto es realmente útil si trabaja en aplicaciones que pueden tener el mismo código o nombres de archivo, por ejemplo, una aplicación móvil nativa de reacción y una aplicación web de reacción.

Esto se hace 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 diferentes colores de la barra de título.

Codificación más rápida

La esencia misma de hacerlo a tiempo

1. Etiqueta de envoltura

Si no conoce a Emmet, probablemente sea alguien a quien le guste escribirlo todo. Emmet le permite escribir un código abreviado y obtener las etiquetas correspondientes devueltas. Esto se hace seleccionando un montón de código y escribiendo el comando Wrap with Abbreviated al que he enlazadoshift+alt+.

Míralo a continuación.

Imagina que quieres envolver todos estos pero como líneas individuales. Usaría ajustar con líneas individuales y luego insertar * después de la abreviatura, por ejemplodiv*

En caso de que quiera saltar directamente a Emmeting, esta es la hoja de trucos de Emmet

2. Equilibrio hacia adentro y hacia afuera

Este consejo fue tomado de //vscodecandothat.com/ que realmente recomiendo.

Puede seleccionar una etiqueta completa en VS Code mediante los comandos balance inwardy balance outwardEmmet. Es útil vincular estos comandos a los atajos de teclado, como Ctrl + Shift + Up Arrowpara Balance hacia afuera y Ctrl + Shift + Down Arrowpara Balance hacia adentro.

3. Turbo Console.log ()

A nadie le gusta escribir declaraciones muy largas como console.log (). Puede ser realmente irritante, sobre todo cuando solo desea generar algo realmente rápido, ver su valor y luego continuar codificando. ¿Y si te dijera que puedes registrar cualquier cosa en consola tan rápido como Lucky Luke?

Esto se hace con una extensión llamada Turbo Console Log . Permite el registro de cualquier variable en la línea siguiente con un prefijo automático siguiendo la estructura del código. También puede descomentar / comentar alt+shift+u/ alt+shift+ctodo el archivo console.log () agregado por esta extensión.

Además, también puede eliminarlos todos con alt+shift+d:

4. Servidor en vivo

Esta es una extensión increíble que te ayuda a lanzar un servidor de desarrollo local con función de recarga en vivo para páginas estáticas y dinámicas. Tiene un gran soporte para funciones importantes como: HTTPS, CORS, direcciones de host local personalizadas y puerto.

Descarguelo aqui

Incluso puede permitirle compartir su host local, si se usa con VSCode LiveShare.

5. Copiar / Pegar con varios cursores

Uno de los primeros "Wows" que grité al usar VS Code sucedió cuando edité varias líneas agregando cursores en diferentes líneas. Mucho después, encontré un muy buen uso de esta función. Puede copiar y pegar el contenido seleccionado por esos cursores y se pegarán exactamente en el orden en que se copiaron.

Echa un vistazo a continuación.

6. Pan rallado y contornos

El Breadcrumb muestra la ubicación actual y le permite navegar rápidamente entre símbolos y archivos. Para comenzar a usar migas de pan, habilítelo con el comando Ver> Alternar migas de pan o mediante la he breadcrumbs.enabconfiguración de t led.

La Vista de esquema es una sección separada en la parte inferior del árbol del Explorador de archivos. Cuando se expanda, mostrará el árbol de símbolos del editor activo actualmente.

La vista Esquema tiene diferentes modos de Ordenar por, seguimiento de cursor opcional. También incluye un cuadro de entrada que filtra los símbolos a medida que escribe. Los errores y advertencias también se muestran en la vista Esquema, lo que le permite ver de un vistazo la ubicación de un problema.

Diverso

Esos pequeños retoques que lo cambian todo

1. Código CLI

VS Code tiene una poderosa interfaz de línea de comandos que le permite controlar cómo ejecuta el editor. Puede abrir archivos, instalar extensiones, cambiar el idioma de visualización y generar diagnósticos a través de opciones de línea de comando (conmutadores).

Imagina que acabas de git clone rl> a repository and you want to replace the current instance of VS Code you are u sing. code . -r will do the trick without you having to leave the CLI interface (Learn more here).

2. Polacode

You often come upon appealing code screenshots with custom fonts and themes like the one below. This was taken in VS Code with Polacode Extension

I know Carbon is also a good and more customizable alternative. However, Polacode enables you stay in your code editor and use any proprietary font you may have bought which is unusable in Carbon.

3. Quokka (JS/TS ScratchPad)

Quokka is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results and console logs in your code editor.

An awesome use case for Quokka is when you are studying for technical interviews, you are able to output each step without having the stress of setting breakpoints in debuggers.

It can also help you study a library’s functions like Lodash or MomentJS before actually using them. It even works for Async calls.

5. WakaTime

Do your friends think you spend too much time coding? Record it and show them that 10hrs/day is not “too much”. WakaTime is an extension that helps to record and store metrics and analytics regarding your programming activity.

You can set goals, view coding languages you often use, you can even compare yourself to other ninjas in the world.

6. VSCode Hacker Typer

Have you ever been typing code in front of a crowd? You often type recklessly and talk while typing which confuses you a little bit. Imagine a pre-typed code that only comes up when you simulate typing like in geektyper.

Jani Eväkallio brought to VS Code this extension. It will help you record and replay macros (code written in your editor) making you 100% more focused when typing to an audience.

7. Exclude folders

I learned this trick on a StackOverFlow post.This one is a quick tweak for excluding folders like node_modules or any other from the explorer tree to help you focus only on what matters. As for me, I really hate opening the tedious node_module folder in my editor, so I decided to hide it.

For example to hide node_modules you can do this:

  1. Go to File > Preferences > Settings (or on Mac Code > Preferences > Settings)
  2. Search files.exclude in the settings
  3. Select add pattern and type **/node_modules
  4. Voila! node_modules disappeared from the explorer tree

8. [Your Suggestions]

You can always comment some of your most secret tips on VSCode, I’ll be glad to append them to the list to help others. :)

I hope these tips will really boost your productivity with VS Code. Please clap and share the post if you liked it and comment if I missed any extension.

Dylan Tientcheu (@DylanTientcheu) | Twitter

Dylan Tientcheu(@DylanTientcheu). Javascript 熱狂者 * #Developer & #Designer * Technical Writer *…twitter.com