Pluggins

tamaños-imagenes-bootstrap
tamaños-imagenes-bootstrap
tamaños-imagenes-bootstrap
tamaños-imagenes-bootstrap
  • crtl + f sirve para encontrar una clase o etiqueta o lo que andes buscando con el nombre
  • Material Icon theme: para tener íconos
  • TypeScript Importer: ayuda con la importación de modulos de TypeScript
  • Bracket pair colorizer 2, te ordena las llaves de distinto color para que no te pierdas
  • ctrl + g , : + noLineaCodigo

    Pluggins navegadores Google Chrome y Mozilla

  • Json Viewer Awesome Google Chrome: Nos permite trabajar con archivos json de una manera muy fácil

    Pluggins para WordPress

  • Wordpress snippets
  • Wordpress snippet

    Pluggins para ser rapido

  • Bookmarks
  • Bracket Pair Colorizer 2
  • Color Highlight
  • Liveserver
  • Material Icon Theme
  • Material Theme
  • Paste JSON as Code
  • TODO Highlight
  • TODO Tree

    Comandos para ser rapido en VSC

  • alt + flecha arriba/abajo para mover el renglon o renglones(si seleccionaste varios)
  • shift + tabulador para arreglar
  • Ctrl + Shift + / Comentar codigo, no tienes que seleccionar todo el renglon, con que el cursor este en el renglon, lo podrás comentar
  • Ctrl + Shift + A Comenta lo que hayas seleccionado
  • Ctrl + CLICK en vinculo Para que te lleve al archivo, sirve también con los nombres de las FUNCIONES y CONSTANTES
  • select word + ctrl + d selecciona la sig palabra igual a la que seleccionaste
  • Ctrl + CLICK en vinculo + ALT
  • Ctrl + Shift + L Te pone un cursor en cada palabra identica que haya a la que estás seleccionando
  • Ctrl + Shift + K borra las lineas
  • Ctrl + Tabulador para moverse rapido entre las pestañas
  • Ctrl + Shift + P meter el texto seleccionado en etiquetas seleccionar WRAPy luego escribir las etiquetas
  • file>preferences>shortcuts para crear un shortcut(esa es la ruta en VSC)
  • Ctrl + K + S Para configurar shortcuts
  • Ctrl + Dselecciona la misma palabra o etiqueta
  • Ctrl + P luego @ te muestra todo, clases, variables, constantes, funciones etc
  • Ctrl + G luego numero te lleva a la linea que le digas, se usa en archivos grandes

Crear snippets

file>preference>user snippet

Primero le das un nombre, luego un prefijo, y por último el body es lo que va a generar.


"media query": {
"prefix": "mq",
"body": [
"@media (min-width: $1) {\n\t$0\n}"
]
}

    Notas

  • Puedes hacerlo con cada lenguaje de programación
  • El back slag \ se utiliza cuando quiere poner un caracter especial como comillas dobles o simples
  • POner una descripción después del body usando una , después del corchete, así:
    "media query": {
    "prefix": "mq",
    "body": [
    "@media (min-width: $1) {\n\t$0\n}"
    ],
    "description": "Te escribe el script principal para empezar a escribir tu Media Query en CSS" }
  • Si quiero que el curso quede en algún lugar específico, escribo $1 donde quiero que este el cursor
  • Si quiero que seleccione todo una vez que use mi snippet, escribo esto:
    "media query": {
    "prefix": "mq",
    "body": [
    "@media (${2:min-width: }) {\n\t$0\n}"
    ],
    "description": "Te escribe el script principal para empezar a escribir tu Media Query en CSS" }
    En pocas palabras: ${2:LoQueQUieroQueSeModifiqueVaEntreLasLlavesYDespuésDeLosDosPuntos}
  • Otra manera de generar un salto de linea sin usar \n es:
    "Generar Clase": { "prefix": "clase",
    "body": [
    "export class ${1:nombreClase} {",
    "",
    " constructor() {",
    " $2",
    " }",
    "}"
    ],
    "description": "Te escribe el script principal para empezar a escribir tu Media Query en CSS" }
     Al dejar las comillas dobles vacías es como un salto de linea, puedes dejar espacio usando barra espaciadora por que el tabulador no lo acepta, por ejemplo donde está el constructor, el $2 es para que al presionar tabulador me mande a esa posición VSC

Mis snipptets

"media query": {
"prefix": "mq",
"body": [
"@media (min-width: $1) {\n\t$0\n}"
]
}

 "custom properties": {
"prefix": "cust",
"body": [
":root {\n\t /*FUENTES*/ \n\t--fuentePrincipal: 'Staatliches', cursive;\n\t--fuenteTexto: 'Open Sans', sans - serif;\n\t--fuenteSecundaria: 'Raleway', sans - serif;\n\t /*COLORES*/ \n\t--colorPrimario: #FF5B00;\n\t--grisOscuro: #2F2E2E;\n\t--grisClaro: #EBEBEB;\n\t--blanco: #ffffff;\n\t--black: #000000;\n}"
]
}

 "fuente": {
"prefix": "fuentes",
"body": [
".clase{\n\tfont-family: var(--fuentePrimaria); {\n\t$0\n}"
]
}