Develop

README.md

@@ -4,22 +4,117 @@ Un pequeño repositorio donde aprenderemos un par de trucos para trabajar rápid
 
 También hay un par de extensiones bastante útiles que les pueden servir.
 
+## Shortcuts VSCODE WINDOWS
+
+PDFs oficiales de la documentación de Visual Studio Code:
+
+1. Atajos en **[WINDOWS.](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)**
+2. Atajos en **[MAC OSX](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf)**
+3. Atajos en **[LINUS](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf)**
+
+&nbsp;<!-- SALTO DE LINEA -->
+
+### Shortcuts principales.
+
+* **'Ctrl + Shitf + p'** => Paleta de comandos.   
+* **'Ctrl + b'** => Cerramos menú lateral. 
+* **'Ctrl + k  Ctrl + s'** => **Abrir Keyboard Shortcuts** En el podremos configurar nuestros propios Shortcuts.
+* **'Ctrl + Shift + ñ'** => Abrir Terminal Integrada.
+
+
+### Movimiento de lineas.
+
+* **'Alt + ↑'** => Movimiento de lineas hacia Arriba.  
+* **'Alt + ↓'**  => Movimiento de lineas hacia Abajo. 
+* **'Shitf + Tab'** => Eliminar Sangria.
+
+
+### Selección.
+
+* **'Shitf + ↑'** => Selecciona las lineas que se encuentran en la parte superior. 
+* **'Shitf + ↓'** => Selecciona las lineas que se encuentran en la parte inferior. 
+* **'Ctrl + Shift + L'** => **Seleccionar todas las ocurrencias de la selección**.
+* **'Shift + Alt + ↦'** => Seleccionamos la palabra
+
+
+
+### Comentarios.
+
+* **'Ctrl + k   Ctrl + c'** => Comentamos lineas de codigo. 
+* **'Ctrl + k   Ctrl + u'** => Descomentamos lineas de codigo. 
+* **'Shitf + Alt + A'** => Comentamos el codigo seleccionado.
+
+
+### Rutas.
+
+* **'Ctrl + Click'** => Creación rapido de la ruta de archivo.
+
+
+### Navegar definición.
+
+* **'Alt + F12'** =>  Ojear definición.  
+* **'F12'**  =>   Ir a la definición.
+
+### Borrar, deshacer y rehacer.
+
+* **'Ctrl + Shift + K'** => Borrar un bloque de código linea seleccionado.
+* **'Ctrl + Z'** => deshacer P. 
+* **'Ctrl + Shift + Z'** => **Rehacer**.
+
+
+### Modo Zen
+
+* **'Ctrl + K Z'** => Mode Zen, es decir entra al modo sin distracciones.
+
+
+### Wrap abbreviation
+
+* **'Ctrl + Shift + a** => **wrap with Abbreviation**, agregamos marquilla a la seleccion como:
+ ``` 
+<code></code>,
+ <ul></ul>,  
+ entre otras.
+ ```
+
+
+### Navegación entre ventanas.
+
+* **'Ctrl + W'** => Cerrar tab o ventana
+* **'Ctrl + K  Ctrl + W'** => Cerrar todas las ventanas
+* **'Ctrl + Shift + T'** => Reabrir ventana anterior
+* **'Ctrl + TAB'** => Cambiar de tab o ventana
+
+
+* **'Shitf + Alt + d'** => Clonar líneas ( Copy Line Down)
+
+### Manejo **Multicursor**
+
+* **'Ctrl + Alt + ↑'** =>  Crear cursor arriba.
+* **'Ctrl + Alt + ↓'** =>  Crear cursor abajo.
+* **'Ctrl + ↦'** => Me permite colocar el cursor en la inicial de la siguiente palabra.
+* **'Mantener Alt + Doble click'** => Multiples cursores en posiciones especificas.
+* **'Mantener Alt + Seleccionar'** => Multiples cursores en posiciones especificas y la palabra lleva separador.
+ * **'Ctrl + d'** => **Multiples cursores sobre la palabra seleccionada**.
+
+### Manejo de **Lowercase y Uppercase**
+
+* **'Ctrl + Shift + U'** =>  Convierte las palabra seleccionadas en mayusculas.
+* **'Ctrl + Shift + L'** =>  Convierte las palabra seleccionadas en minisculas.
+
+
+
+&nbsp;<!-- SALTO DE LINEA -->
+
 ## Extensiones
 
 * [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)
-
 * [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)
-
 * [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
-
 * [Liveserver](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
-
 * [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
-
 * [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)
-
 * [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype)
-
 * [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
+* [TODO Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
+
 
-* [TODO Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

src/app/01-edicion-basica/01-movimientos.html

@@ -8,13 +8,13 @@
 -->
 
 <ul>
-    <li>Línea 7</li>
-    <li>Línea 3</li>
-    <li>Línea 6</li>
+    <li>Línea 1</li>
     <li>Línea 2</li>
-    <li>Línea 5</li>
+    <li>Línea 3</li>
     <li>Línea 4</li>
-    <li>Línea 1</li>
+    <li>Línea 5</li>
+    <li>Línea 6</li>
+    <li>Línea 7</li>
 </ul>
 
 

src/app/01-edicion-basica/02-movimientos.html

@@ -9,20 +9,20 @@
 
 <ul>
     <li>
-        <span>línea 4</span>
-        <span>Nada importante 4</span>
-    </li>
-    <li>
-        <span>línea 3</span>
-        <span>Nada importante 3</span>
+        <span>línea 1</span>
+        <span>Nada importante 1</span>
     </li>
     <li>
         <span>línea 2</span>
         <span>Nada importante 2</span>
     </li>
     <li>
-        <span>línea 1</span>
-        <span>Nada importante 1</span>
+        <span>línea 3</span>
+        <span>Nada importante 3</span>
+    </li>
+    <li>
+        <span>línea 4</span>
+        <span>Nada importante 4</span>
     </li>
 </ul>
 

src/app/01-edicion-basica/03-comentarios.ts

@@ -8,17 +8,17 @@
         Ctrl + \
 */
 
-const a = 10;
-const b = 20;
-const c = { a, b };
+// const a = 10;
+// const b = 20;
+// const c = { a, b };
 
 
-const a = 30;
-const b = 40;
-const c = { a, b };
+// const a = 30;
+// const b = 40;
+// const c = { a, b };
 
 
-console.log( a, b, c );
+// console.log( a, b, c );
 
 // Resultado final
 // Sólo dejar un bloque comentado

src/app/01-edicion-basica/04-comentarios.html

@@ -11,19 +11,19 @@
 -->
 
 <div>
-    <span>Hola</span>
+    <!-- <span>Hola</span> -->
     <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit.
-        Eum maiores nostrum cum quasi totam.
+        Eum maiores nostrum <!-- cum quasi totam. -->
     </p>
 </div>
 
 <h1>Objetivo final</h1>
 
 <div>
-    <span>Hola</span>
+    <!-- <span>Hola</span> -->
     <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit.
-        Eum maiores nostrum cum quasi totam.
+        Eum maiores nostrum <!-- cum quasi totam. -->
     </p>
 </div>

src/app/01-edicion-basica/07-borrar-lineas.ts

@@ -13,12 +13,9 @@
 */
 
 let NoMeBorres = ':)';
-let Borrame = ':(';
 
 NoMeBorres = '1';
-Borrame    = 'a';
 NoMeBorres = '1';
-Borrame    = 'a';
 
 
 // Resultado final (sin los comentarios claro.)

src/app/01-edicion-basica/08-deshacer-rehacer.ts

@@ -10,7 +10,9 @@
 
 */
 
-
+function holaMundo() {
+    return 'Saludos';
+}
 
 
 

src/app/01-edicion-basica/11-emmet-wrap.html

@@ -15,7 +15,7 @@
 
 <p>
     Ejecutar el comando
-    ng serve
+    <code>ng serve</code>
 </p>
 
 

src/app/01-edicion-basica/assets/js/app.js

@@ -0,0 +1,2 @@
+
+console.log("hola mundo")

src/app/02-multi-cursor-edicion/01-clonar-lineas.html

@@ -16,13 +16,13 @@
 -->
 
 <span>Hola</span>
+<span>Hola</span>
+<span>Hola</span>
+<span>Hola</span>
+<span>Hola</span>
 
 
 
 <!-- Objetivo -->
 
-<span>Hola</span>
-<span>Hola</span>
-<span>Hola</span>
-<span>Hola</span>
-<span>Hola</span>
+<span>Hola</span>

src/app/02-multi-cursor-edicion/02-multi-cursor-basico.html

@@ -9,12 +9,12 @@
 -->
 
 <!-- Desde aquí -->
-
-
-
-
-
-
+<li>Hola Mundo</li>
+<li>Hola Mundo</li>
+<li>Hola Mundo</li>
+<li>Hola Mundo</li>
+<li>Hola Mundo</li>
+<li>Hola Mundo</li>
 <!-- Hasta aquí -->
 
 

src/app/02-multi-cursor-edicion/03-multi-cursor-copy.html

@@ -9,13 +9,13 @@
         Ctrl + Alt+ ↑ / ↓
 -->
 
-<span>amarillo</span>
-<span>rojo</span>
-<span>verde</span>
-<span>naranja</span>
-<span>morado</span>
-<span>negro</span>
-<span>blanco</span>
+<span class="amarillo">amarillo</span>
+<span class="rojo">rojo</span>
+<span class="verde">verde</span>
+<span class="naranja">naranja</span>
+<span class="morado">morado</span>
+<span class="negro">negro</span>
+<span class="blanco">blanco</span>
 
 
 <!-- Objetivo final -->

src/app/02-multi-cursor-edicion/04-multi-cursor-formato.ts

@@ -8,10 +8,10 @@
         Ctrl + Alt+ ↑ / ↓
 */
 
-const hulk = 'brouce banner';
-const Hawkeye = 'cinton francis';
-const ironman = 'tony stark';
-const spiderman = 'peter parker';
+const hulk       = 'brouce banner';
+const Hawkeye    = 'cinton francis';
+const ironman    = 'tony stark';
+const spiderman  = 'peter parker';
 const viudaNegra = 'natalia romanova';
 
 

src/app/02-multi-cursor-edicion/05-capitalizar.ts

@@ -20,11 +20,11 @@
 
 function capitalizados() {
 
-    const hulk       = 'brouce banner';
-    const Hawkeye    = 'cinton francis';
-    const ironman    = 'tony stark';
-    const spiderman  = 'peter parker';
-    const viudaNegra = 'natalia romanova';
+    const Hulk       = 'Brouce Banner';
+    const Hawkeye    = 'Cinton Francis';
+    const Ironman    = 'Tony Stark';
+    const Spiderman  = 'Peter Parker';
+    const ViudaNegra = 'Natalia Romanova';
 
 }
 

src/app/02-multi-cursor-edicion/06-todas-ocurrencias.html

@@ -8,16 +8,18 @@
         Mantener ⌘ + Doble click
         Mantener ⌘ + Seleccionar
 
-        Mantener Ctrl + Doble click
-        Mantener Ctrl + Seleccionar
+        Mantener Alt + Doble click
+        Mantener Alt + Seleccionar
 
 -->
 
-<span>amarillo</span>
-<p>rojo</p>
-<div-personalizado>verde</div-personalizado>
-<bold>naranja</bold>
-<otro-div-complejo>naranja-azul</otro-div-complejo>
+<span class="amarillo">amarillo</span>
+<p class="rojo">rojo</p>
+<div-personalizado class="verde">verde</div-personalizado>
+<bold class="naranja">naranja</bold>
+
+
+<otro-div-complejo class="naranja-azul">naranja-azul</otro-div-complejo>
 
 
 <!-- Objetivo final -->

src/app/02-multi-cursor-edicion/07-siguiente-ocurrencia.html

@@ -9,10 +9,12 @@
 
 -->
 
-<span>Uno</span>
-<span>Dos</span>
-<span>Cuarenta y cinco</span>
-<span>Un millón, ciento cincuenta mil</span>
+<ul>
+    <li>Uno</li>
+    <li>Dos</li>
+    <li>Cuarenta y cinco</li>
+    <li>Un millón, ciento cincuenta mil</li>
+</ul>
 
 
 <!-- Objetivo final -->