Visual Code

El editor de código fuente desarrollado por Microsoft para Windows, Linux y macOS.

Extensiones

• Bookmarks

• Bracket Pair Colorizer 2

• Color Highlight

• Liveserver

• Material Icon Theme

• Material Theme

• Paste JSON as Code

• TODO Highlight

• TODO Tree

Atajos del teclado

• shortcuts-linux

Tips

• Objetivo:
  Ordenar las listas
  Tips:
  ⌥ ↓ / ⌥ ↑
  Alt + ↑ / ↓

• Quitar tabulacion: shit + tab

• Objetivo:
  Comentar un bloque de código

  Tips:
  ⌘ /
  Ctrl + /

• Comentar varias lineas
  Ctls + shit + A

• Objetivo
  Crear carpeta assets
  Crear carpeta js
  Crear archivo app.js

  Tips:
  ⌥ click derecho
  Ctrl + click derecho sobre el enlace src="assets/js/app.js"

• Objetivo:
  Ir a la definición de la función 'saludar' rápidamente

  Tips: ctrl + click

• Objetivo:
  Seleccionar una palabra

  Tips: shit + alt

• Objetivo:
  Borrar un bloque de código

  Tips:
  Ctrl + Shift + K

  PRO:
  Seleccionar todas las ocurrencias de la selección
  Ctrl + Shift + L

• Objetivo:
  Corregir tabulaciones

  Tips:
  shit + tab

• Objetivo:
  Deshacer y rehacer el código

  Tips:
  Ctrl +Z
  Ctrl + Shift + Z

• Objetivo:
  Cero distracciones
  Ocultar Mostrar sidebar

  tips:
  Ctrl + B

• Objetivo:
  Ocultar Mostrar terminal

  tips:
  Ctrl + `

• Objetivo:  
    ***Utilizar emmet wrap***  
    ***Crear atajo (shortcut) para el mismo***  
  

  tips:
  ⇧ ⌘ P
  Ctrl + SHIFT + P

    Buscar: Wrap with abbreviation  
            debe de quedar el ng serve así  
            <code>ng serve</code>  
  

• Objetivo:
  Abrir, reabrir, cerrar tabs, cambair de tab

  tips:

   Ctrl + W            Cerrar tab  
   Ctrl + K  Ctrl + W  Cerrar todas  
   Ctrl + Shift + T    Reabrir anterior  
   Ctrl + TAB          Cambiar de tab  
  

• Tips: Copiar lineas
    * Puede cambiar, revisar los shortcuts  
  

  Pro: (Revisar shortcuts)
  Copy line down
  ⌘ K ⌘ S
  Ctrl + K Ctrl + S

• Objetivo:
  Crear múltiples cursores usando el "Next find match"

  Tip:
  Ctrl + D

• Objetivo:
  Ver rápidamente las definiciones de la clase
  También funciona con archivos HTML y otros

  Tips:

   Ctrl + P => luego escribir la @  
   Ctrl + Shift = O  
  
   Se pueden agrupar si después de la @, se escriben :  
  

• Objetivo: Manejar (ir a una linea) TODOS:

  Tips:
  ⌃ G
  ⌘ P => luego escribir :

  Ctrl + G  
  Ctrl + P => luego escribir la :  
  

• ctr + shif + f // Buscar palabra seleccionada

• Replace Symbol
  F2

• Objetivo:
  Vista previa markdown
  Tips:
  ctrl + shif + p buscar >markdown

Snippets basicos

• ir a preferencias / user snippets, y debajo escribir por ejemplo:
  "Mostrar log": {

    "prefix": "clg",  
    "body": [  
        "console.log('${1:Hola mundo}');",  
        "$2"  
    ],  
    "description": "Mostrar un log en la consola..."  
  

  },

  "Clase": {
  "prefix": "clase",
  "body": [
  "export class ${1:NombreClase} {",
  "",
  " constructor(){",
  " $2",
  " }",
  "}"
  ], "description": "Mostrar la estructura de una clase"
  }

  Extensiones

• Paste JSON as Code

• pokeapi.co

• // TODO Highlight
  // Todo Tree
  // TODO y FIXME
  Clic en el Arbol de la izquierda, y marcara todos los TODO
  Para que no aparezcan TODO de Node y otros desarrolladores ir a
  File/Preferences/Settings/extensions/TODO y y en exlude, editinsettings.json
  Pegar:
  "todo-tree-excludeGlobs":[
  "/node_modules/",
  "/vendor/", "/brower_components/",
  "/dist/"
  ],
  Son como un recordatorio
  // TODO arreglar esto
  // FIXME: corregir el problema de la funcion

• Bookmarks
  Ctrl + Alt + K : crea un toggle
  Revisar la documentacion para mas funcionalidades.

• Material Icon Theme
  Paquete con iconos, para el explorador de visualcode.

• Material theme
  Para cambiar un tema, teclear: Ctrl +k Ctrl + T , se abre el menu, ir bajando para elegir.

• Live server En un archivo .hmlt, hacer clic abajo en Go Live, y te muestra la previa en un servidor de prueba :5500.

• Para que el ColorHigLight no aparezca en el background de la palabra, ir a file, settings, extensions, color HghtLight, Marker Type, escribir: dot-before, y el color estara en un cuadrado al costado izquierdo de la palabra.

• Bracket Pair Colorizer 2
  Para editar el color de las llaves, ir a file, preference, settings, extensions, Bracket Pair Colorizer, colors edditconfig.json, y debajo pegar por ejemplo:
  "bracket-pair-colorizer-2.colors": [ "#fafafa", "#9F51B6", "#F7C244", "#F07B50"

    ]
  

Tema que estoy usando:

• Monokai Night
• Monokai Pro
• app.js Crack monokai pro

Plugins

• AB HTML Formatter

• Activitus Bar

• Angular Snippets

• Angular Language Service

• Angular2-inline

• Awesome Flutter Snippets

• Auto Close Tag

• Bookmarks

• Bootstrap 4, FontAwesome 5

• Bracket Pair Colorizer 2

• Color Highlight

• Dart

• Flutter

• Gist

• HTML CSS Support

• ionic 4 Snippets

• JavaScript (ES6)

• jshint

• Material Icon Theme

• Paste JSON as Code

• Prettier - Code Formatter

• PWA Tools

• Terminal

• TODO Highlight

• Todo Tree

• TSLint

• TypeScript Importer