Consejos y trucos de VSCode para usuarios avanzados

¿Por qué querría ser un usuario avanzado de Visual Studio?

Convertirse en un usuario avanzado es otra forma de mantenerse a la vanguardia. Los desarrolladores a menudo hablan sobre cómo se mantienen en la cima de su juego y cómo constantemente aprenden cosas nuevas y continúan perfeccionando sus habilidades. Esta es una pregunta frecuente en las entrevistas, ya que los empleadores tienden a preferir el talento dedicado a ampliar su conjunto de habilidades. Dominar su IDE y su computadora puede ser una de las mejores inversiones en su desarrollo profesional.

Los desarrolladores siempre están buscando un nuevo blog que los haga mejores en su trabajo. Sea cual sea el IDE que estés usando, probablemente tenga un blog: ¡Suscríbete!

Otra razón es que simplemente ahorra tiempo. Invertir tiempo en mejorar su flujo de trabajo puede resultar en una mayor productividad o más tiempo para divertirse. Hoy, analizaremos más de cerca Visual Studio y VSCode y discutiremos formas de mejorar sus habilidades hasta el punto de convertirse en un usuario avanzado.

¿Cómo me convierto en un usuario avanzado de VSCode?

Esto es lo que distingue a un usuario regular de un usuario avanzado :

• Conocimiento íntimo de su IDE: VSCode tiene una excelente documentación, ¡léala!
• Personalización: los usuarios avanzados adaptan su flujo de trabajo para satisfacer sus necesidades específicas.
• Automatice todas las tareas aburridas y repetitivas.
• Mejore continuamente su flujo de trabajo y realice un seguimiento de la evolución de su IDE.

En este artículo, tengo la intención de explicar cómo abordé cada uno de estos puntos y dotarlo con el conocimiento para hacerlo por su cuenta. Lo que hago no necesariamente funcionará para ti, al menos no del todo. Las personas trabajan en diferentes entornos y proyectos (para mí, principalmente se trabaja con React.js y TypeScript en Windows), pero el enfoque general es válido para todos.

Prueba con broma

Escribo una prueba a la vez, lo que significa que necesito una forma de ejecutar una prueba a la vez. Sin embargo, la solución nativa de expresiones regulares es bastante torpe. Por eso uso Jest Runner. Esta útil extensión le permite ejecutar o depurar suites o pruebas individuales.

El siguiente video muestra que todo lo que necesita hacer es hacer clic con el botón derecho en el nombre de la prueba y usar el menú contextual para ejecutarla.

Probando con Pacto

Podría decirse que la parte que consume más tiempo al escribir una prueba de contrato es la coincidencia. Resolví esto creando fragmentos útiles para automatizar acciones repetitivas. Estos son algunos que hice, no dude en usarlos (es decir, simplemente cópielos y péguelos en /snippets/typescript.json de /snippets/typescript.json ).

El siguiente video muestra cómo usar estos fragmentos:

1. Seleccione todas las ocurrencias del mismo tipo, es decir, seleccione todas las cadenas, horas y otros valores.
2. Use la combinación de teclas predefinida o invoque Insert Snippet y seleccione el fragmento relevante, o simplemente comience a escribir el prefijo del fragmento que desea usar.

Git

La mayoría de los desarrolladores usan Git y GitHub a diario, y yo también. Sin embargo, trato de evitar usar la terminal o github.com.

GitHub Pull Requests and Issues me permite abrir, editar y revisar PR en la comodidad de VSCode. Considero que mi IDE es un mejor lugar para revisar el código que las aplicaciones web o de escritorio de GitHub. Algunos desarrolladores pueden no estar de acuerdo, pero aprecio la consistencia y la comodidad de hacerlo en mi IDE.

Git puede hacer mucho, pero he memorizado muy pocos de sus comandos. Pero, ¿por qué memorizar algo en primer lugar? Memorizar demasiados aspectos granulares de su rutina no es demasiado productivo.

GitLens expone una plétora de características sorprendentes al alcance de su mano. Gracias a él, rara vez tengo que alcanzar la terminal para usar Git.

Personalización de terminales

Independientemente del sistema operativo que use, puede hacerlo mejor que el terminal predeterminado. Estoy usando Windows Terminal + cmder. Si es usuario de Unix, busque iTerm (macOS) o Oh My Zsh (Linux y macOS). Los integré con VSCode y agregué muchos alias (accesos directos) que me ahorran tiempo al escribir comandos.

Por ejemplo:

• ys = yarn start - me ayuda a iniciar una aplicación con solo dos caracteres
• del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - elimina el directorio proporcionado y muestra un mensaje de éxito cuando termina
• gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - elimina todas las ramas locales excepto la master

Guardar algunos caracteres aquí y allá puede parecer una tontería, pero estas características de ahorro de tiempo se acumulan a largo plazo. Encuentro una ventaja secundaria en hacer alias: pasar menos tiempo escribiéndolos me ayuda a mantenerme enfocado y no perder el hilo de mis pensamientos porque no estoy tratando de recordar cómo invocar el comando.

Codigo de GENERACION

Crear un nuevo componente, página, etc. es algo que hago con frecuencia y es bastante sencillo, como sabrán la mayoría de los lectores. Pero crear una nueva carpeta e inicializar archivos en ella puede ser tedioso. Entonces, automaticé este proceso.

El siguiente video muestra Supercharge React en uso. Usando New Component , puedo especificar el nombre y la ubicación del nuevo componente. Luego, la extensión ejecuta un script que crea una carpeta e inicializa este nuevo componente.

IntelliSense

VSCode tiene un poderoso IntelliSense y, la mayoría de las veces, no tiene que pensar en usarlo. Sin embargo, cuando esté buscando sugerencias, puede presionar Ctrl+Espacio para ver la documentación sobre cada opción disponible.

IntelliSense se puede personalizar adicionalmente para adaptarse a su flujo de trabajo y preferencias personales.

Atajos de teclado

Estoy seguro de que usa atajos como Ctrl+S y Ctrl+F . Todos están bien documentados, y si no está muy familiarizado con la amplia gama de atajos de VSCode, le insto a que cambie esto y haga un esfuerzo adicional para dominarlos. ¿Cierta unión es demasiado torpe? ¿Un comando que invocas a menudo tarda demasiado en escribirse? Abra el editor de teclado de VSCode para crear accesos directos.

Si se pregunta si se ha asignado un comando a una determinada combinación de teclas, haga clic en el botón del teclado en la barra de búsqueda donde puede registrar las pulsaciones de teclas. Luego verá qué/si los comandos se han asociado con ellos.

Atajos de ratón

A los desarrolladores a menudo se les dice que para ser productivos, deben aprender a odiar su mouse y amar su teclado . Esto podría ser válido si está trabajando en archivos pequeños y densos. Pero en una era de formato de código automático y archivos que contienen cientos de líneas de código, diría que es más una excepción que la regla.

No solo uso activamente mi mouse, sino que lo personalicé para que se ajuste a mi flujo de trabajo usando Logitech Options. Programé las teclas especiales de mi mouse para ejecutar ciertos comandos en VSCode.

Así es como puede "enseñar" a su mouse a hacer algo más que simplemente mover el cursor y hacer clic:

1. Seleccione VSCode en el menú superior derecho.
2. Haga clic en el botón que desea personalizar.
3. Seleccione Asignación de pulsaciones de teclas en la lista de acciones de la izquierda.
4. Ingrese un atajo predefinido en VSCode.

Configuración de copia de seguridad y sincronización

No tiene mucho sentido personalizar nada si no puede hacer una copia de seguridad y reutilizarlo cuando lo necesite nuevamente.

La solución nativa solo está disponible para los internos en este momento. Sin embargo, Settings Sync lo ayuda a guardar la configuración de su código como Gist y le permite sincronizar su flujo de trabajo entre varias máquinas. Necesita un token de GitHub para configurarlo, pero luego, solo necesita ejecutar un solo comando para cargar y descargar su configuración.

Extensiones de VSCode recomendadas

Ya mencioné varias extensiones y expliqué cómo las uso. Aquí hay algunas menciones notables:

• Envolvente: ¿Necesita envolver algún código seleccionado en una función de flecha o tal vez en un bloque de prueba y captura? ¡Esta extensión lo hará por ti!
• Buscar node_modules: incluso si no ha excluido node_modules del explorador de VSCode para mejorar el rendimiento, esa carpeta es tan grande que es imposible navegar. Esta extensión te permite buscar lo que sea que estés buscando en lugar de desplazarte sin parar.
• Glean y React Refactor proporcionan algunas herramientas de refactorización útiles para sus archivos JSX.
• La etiqueta de cierre automático agrega automáticamente la etiqueta de cierre para los archivos HTML/JSX/TSX.
• File Utils: una forma conveniente de crear, duplicar, mover, renombrar y eliminar archivos y directorios. También es personalizable.
• JavaScript Booster automatiza algunas acciones de refactorización comunes.

Resumen

No seas un usuario habitual. Sea un usuario avanzado en su lugar. Siempre ve un paso más allá que los demás y mira a dónde te lleva. Siempre tome nota de las ineficiencias y trate de mitigarlas.

Mi solución a esto debería ser familiar para la mayoría de los desarrolladores: un tablero Kanban . Cada vez que noto algo que me frena, lo escribo como una tarea pendiente. Cada vez que tengo algo de tiempo libre, trato de encontrar una solución para ello.

Si encuentra esta publicación abrumadora y no sabe por dónde empezar, lea los documentos, ¡le dará el mejor ROI ! Sé que leer la documentación oficial suena aburrido, pero prometo que valdrá la pena a largo plazo. No solo le enseñará cómo ser más productivo, sino que también aprenderá cómo se debe escribir la documentación.

Para hacerlo más fácil, he compilado esta lista de partes de lectura obligatoria de los documentos:

• Consejos y trucos: algunos son obvios y probablemente ya los conozcas, aunque puedo garantizarte que encontrarás algo que no conocías.
• Trucos de edición: Estos trucos de edición son increíblemente poderosos y aprenderlos te beneficiará a diario.
• Reducir/Expandir código: prueba este atajo cuando te estés emparejando con otro desarrollador, ¡para impresionarlos!
• Combinaciones de teclas: aprenda cómo funcionan las combinaciones de teclas y cómo personalizarlas, es uno de los pilares para dominar su IDE.
• Cientos de lenguajes de programación admitidos: aprenda qué características específicas tiene VSCode para el idioma elegido.