Miguel Ángel Durán Profile picture
Jul 31, 2022 9 tweets 4 min read Read on X
Si usas Visual Studio Code en tu día a día estoy seguro que no le estás sacando el máximo partido.

Aquí tienes 7 TRUCOS para trabajar como un PRO y ahorrar tiempo:
¿Necesitas crear un fichero y a la vez algún directorio?

❌ NO crees la carpeta manualmente y luego el archivo.
Puedes crear el fichero directamente con toda su estructura DE UNA.

Separa las carpetas con / y finalmente añade el archivo.

¡Y así lo haces todo de una vez! ⬇️ Creando la carpeta folder/subfolder/index.js directamente enResultado de crear el fichero folder/subfolder/index.js
¡NO uses ninguna extensión para COLOREAR tus paréntesis!
Code ahora lo tiene integrado y funciona de LUJO.

Detectarás más rápido las llaves y paréntesis de tu CÓDIGO.
Funciona en cualquier lenguaje de programación.

Activa estas opciones y mira cómo queda en el código: Preferencias de Visual Studio Code sobre el Bracket Pair ColCódigo donde se ven las llaves y los paréntesis coloreados
Desde la terminal, puedes abrir la carpeta en la que te encuentras en Visual Studio Code.

Para hacerlo, ejecuta el comando:
code .

¿No te encuentra el ejecutable de Code?
Necesitas ejecutar esto en tu editor: Paleta de comandos de Code donde se ve cómo puedes instalar
En Visual Studio Code puedes pinear 📌 los archivos de tu proyecto.

De esta forma no tendrás que andar buscándolos cada dos por tres.

Yo lo suelo usar para el archivo package.json y así lo tengo siempre visible.

Te quedarán así: Opción de pinear una pestaña en Visual Studio Code para noIcono de pin al lado de la pestaña.
Hay cuatro atajos de teclado ⌨️ que me parecen ESENCIALES para la vida del programador:

- Mover líneas de código arriba y abajo.
- Cortar, copiar y pegar una línea sin seleccionar
- Eliminar una línea completa.
- Comentar/Descomentar líneas.

Te los enseño aquí:
Si tienes que ordenar líneas alfabéticamente.
NI SE TE OCURRE hacerlo MANUALMENTE.

1. Selecciona las líneas que quieres ordenar.
2. Abre la Paleta de Comandos.
3. Selecciona "Sort lines ascending" (o descending)
4. Enter y... ¡listo! Opción de ordenar las líneas seleccionadas de forma ascendLíneas ordenadas ascendentemente tras usar la opción de VS
Si haces hover encima de un color en CSS, te abrirá un selector.

Allí puedes elegir el color y la transparencia que quieras.

Cada vez que selecciones un nuevo color cambiará el valor.

Haz clic en la barra con el color para cambiar entre formatos rgba, hexadecimal, hsl y hwb. Al hacer hover sobre un color en un archivo CSS en Visual St
¡Comparte estos 7 TRUCOS con un RT para que llegue a más gente!
Si veo que hay interés, hacemos otra lista con 7 TRUCOS más. 🤩

¡Y ahora a ponerlos en práctica en tu día a día para ser más productivo!

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Miguel Ángel Durán

Miguel Ángel Durán Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @midudev

Jun 28, 2024
Cómo pasar de Junior a Senior en Programación

MEGA HILO con ideas, trucos y consejos. Ilustración en pixel art que muestra la progresión de un programador de junior a senior. A la izquierda, un joven programador con equipo básico y código simple, evolucionando hacia la derecha donde el programador gana experiencia, con código más complejo y mejor equipo. La etapa final en el extremo derecho muestra a un programador senior con herramientas avanzadas, código sofisticado y un entorno de alta tecnología, pasando de una habitación simple a una oficina moderna
1 🛤️ Camino al Senior: Empezando por el Principio

Lo más importante. NO HAY ATAJOS y necesitas tiempo.
Comienza con una base sólida. Domina los fundamentos de la programación: algoritmos, estructuras de datos y patrones de diseño.

Ese conocimiento te servirá siempre.
2 🧠 Profundiza en tu Stack

Para iniciarte es buena idea saber un poco de todo, te abre más posibilidades en el mercado, pero conforme ganas años de experiencia te ayudará especializarte.

Eso sí, tampoco te cierres en banda a nada nuevo. La tecnología cambia rápido.
Read 17 tweets
Jun 25, 2024
¡Consigue un 100 de Rendimiento en tu Web!

MEGA HILO con trucos para que lo consigas ↓ 100 de puntuación en Web Performance
1. Carga diferida de código

Con imports dinámicos puedes cargar bibliotecas sólo cuando las necesitas.

Por ejemplo: Si necesitas algo sólo tras la interacción del usuario...
¡Entonces cárgalo entonces y no desde el principio!

Un ejemplo con código JavaScript: Código JavaScript que usa import dinámico al hacer click en un botón para cargar una biblioteca.
2. Detecta el JS y CSS que no necesitas

Usa la pestaña de Cobertura en las DevTools.
Te dice el % de uso de cada uno de tus archivos
Al darle a un archivo, te muestra las líneas que se usan
Así detectas fácil qué no estás usando Uso de la pestaña Coverage (o Cobertura) en las DevTools que te indica que tanto por ciento estás usando de los archivos de una página.
Read 14 tweets
Jun 21, 2024
5 repositorios de GitHub para crecer de Junior a Senior:
1. La ruta para ser Senior Software Engineer

Libros, contenido, newsletter, artículos, comunidades y mucho más para guiarte en tu camino al crecimiento profesional.

🔗 github.com/jordan-cutler/…
Image
2. Build your Own X

Aprende a desarrollar casi cualquier cosa.
Sistemas operativos, drivers, compiladores, bots, juegos, buscadores...

No importa lo que quieras programar, en este repositorio tienen una guía para que lo aprendas.

🔗 github.com/codecrafters-i…
Image
Read 6 tweets
Jun 17, 2024
Cursos de Google para Aprender Programación Web
En Español, desde cero y sin coste ↓ Cursos de Google para Aprender Programación Web con HTML, CSS y JavaScript
Aprende HTML

Curso de HTML para desarrolladores web que va de nivel principiante hasta experto. Repasas todos los elementos y atributos que debes conocer, además de la semántica de la web.

web.dev/learn/html
Image
Aprende sobre CSS

Desde los fundamentos de CSS, como el modelo de caja, cascada y especificidad, caja flexible, grid y z-index.

Hasta funciones, tipos de color, gradientes, propiedades lógicas y herencia.

web.dev/learn/css
Image
Read 4 tweets
May 13, 2024
Aprender a PROGRAMAR NO TIENE que ser ABURRIDO
CSS, JavaScript, Python, TypeScript, Blockchain...

Los 10 mejores juegos para aprender a programar ⇩ Un chico en su habitación aprendiendo a programar usando videojuegos.
1. SQL Murder Mystery

Resuelve con consultas SQL un misterioso asesinato. Desde cero y hasta niveles avanzados.

mystery.knightlab.com
Image
2. WARRIOR JS

Controla con JavaScript un caballero para superar para superar todos los obstáculos de las mazmorras.

Totalmente gratis con dos niveles de dificultad.

warriorjs.com
WarriorJS
Read 11 tweets
Mar 14, 2024
¿Quieres configurar tu VISUAL STUDIO CODE y que te quede como el de la imagen?

¡Te comparto mi tema, configuraciones, fuente, trucos y extensiones! ↓ Image
Tema: One Dark Pro
Variante: Darker

Para conseguir el mismo estilo debes activar las itálicas, las negritas y que los colores sean vívidos.

Es mi preferencia personal pero a mi me gusta mucho cómo queda. Configuración para One Dark Pro: Bold, Italic, Markdown Style, Vivid activados. Color Theme: One Dark Pro
Fuente: Cascadia Code De Microsoft y de código abierto.
Descarga:

Instala la versión "Cascadia Code PL" (trae ligaduras y Power Symbols).

Activa las ligaduras en Code y carga la fuente correcta así: github.com/microsoft/casc…
Configuración en Visual Studio Code para activar las ligaduras. En tu settings.json usa "editor.fontLigatures" y ponlo a true.
Read 8 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(