vscode

  • extensiones y confs react
    • Auto Rename Tag, Highlight Matching Tag
    • conf default formatter con prettier
    • conf: emmet included lenguajes
    • ES7+ React/Redux/React-Native snippets

      vscode Shortcuts y Tips

  • 20 Tips para PROGRAMAR MÁS RÁPIDO en Visual Studio ✔
  • cntrl + shfit + S → guardar todo
  • cntrl + k, y contrl + D → formatear codigo
  • contrl + D → duplicar linea
  • contrl + shift + v → Historial de copiado
  • contrl + k + c → comentar
  • contrl + k + u → descomentar
  • posible cambiar comandos: enviroment, keyboard en opciones
  • shift + enter → crear llaves auto (cursor en cabecera del metodo)
  • control + ALT + click izquierdo → Multiedicion (lineas a la vez)
  • shfit + alt + . → Multiedicion seleccionando una palabra, se añaden las palabras iguales
  • dos veces TAB → Autocompletar
  • cambiar nombre de variable o metodo en varias partes, cursor en la variable a renombrar y usar shortcut → Contrl + R x2 (manten pulsado control y R dos veces) y enter al renombrar
  • Encapsular codigo → CTRL + R, y CTRL + E (cursor en la variable a encapsular) ventana en la que elegir en que parte del codigo quieres que se sustituya la variable por la property
  • (añadir variables a una propiedad)
  • Auto importar librerias → cursor en el metodo y pulsar → CTRL + . EJ: tambien para implementar los metodos de una interfaz o posibles valores de un switch
  • Abrir lista de metodos → CRTL + Espacio ( cursor despues del punto .)
  • ver imputs del metodo → CTRL + Shfit + Espacio cursor dentro de los parentesis (navegar por las cabeceras con las flechas del teclado)
  • Buscar en proyecto → CTRL + f (buscar en todo el proyecto o pag)
  • Buscar archivos o metodos del proyecto CTRL + , (abrir archivo sin buscarlo)
  • Ir hacia el un metodo rapidamente → poner el cursor en el metodo y F12
  • Ir hacia un metodo → CTRL + click izquierdo en el metodo
  • Saber donde se usa el metodo → Shift + F12 (cursor sobre el metodo) abre ventana con las lineas donde se esta usando
  • Lista de metodos (buscar metodo dentro de un archivo sin saber el nombre, usar desplegable superior izquierda para ver metodos de la clase y parametros de entrada

vscode Configuracion

  • settings.json
    • “workbench.startupEditor”: “newUntitledFile”
    • “workbench.editor.languageDetection”: true
    • “editor.guides.bracketPairs”: true
    • “editorbracketPairColorization.enabled”: true
    • “oneDarkPro.bold”: true
    • “oneDarkPro.italic”: true
    • “oneDarkPro.vivid”: true
    • “workbench.sideBar.location”: "right”
    • "telemetry.telemetryLevel": "off"
    • “editor.codeActionOnSave”: { “source.fixAll.eslint”: true }
    • cambiar conf de prettier para que no ponga puntos y comas en JS
  • Iconos
    • Material icon theme, despues activar iconos en comand palet
  • confs web developer
    • autoformat
    • auto format: format
    • cntr + shitft + f
    • Format on save
    • HTML format
  • css peak :
    • cntrl + shitft + F12 cargar css file , quick edit
    • cntrl + hover
    • F12
  • color-highlight
    • marker type: dot-before
  • Bracket Pair Colorizer 2
    • colors: scope colors
  • Prettier Now
    • vs code extension Prettier Now
    • Output Colorizer
    • pretifier code on demand o cuando guardes
    • format on save
    • Set editor.formatOnSave to true in settings to automatically format files on save.
    • configurar colums aline
    • Añade espacies e indentacion al guardar el archivo
    • funciones muy largas mejor organizadas
    • foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
    • conf editor: Format on save
    • CMD + Shift + P -> Format Document
  • Emmet
    • lorem*3
    • shortcut html en vs code ! y tab
    • Windows: CTRL + K + C) comentar
    • : Ctrl + Shift + P comand input
    • command palet buscar togge line comment
    • nav>ul>li
    • ul>li.item$*5
    • h$[title=item$]{Header $}*3
  • VS code Plugins midudev
    • Error lens
    • Version lens
    • ESlint
    • github copilot
    • thunder client , hacer peticiones a apis ,grphql
    • Tailwind CSS, autocomplete
    • Para rust: rust-analyzer
    • import cost, cuanto ocupa cada dependecia
    • git lens, muy cargado de info
  • React
    • crear react component rcc

vscode añadir a menu contextual

Visual Studio Code “Open With Code” does not appear after right-clicking a folder Adding Visual Studio Code to Your Context Menu

 Windows Registry Editor Version 5.00

 ; Open files

 [HKEY_CLASSES_ROOT\*\shell\Open with VS Code]

 @="Edit with VS Code"

 "Icon"="C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe,0"

 [HKEY_CLASSES_ROOT\*\shell\Open with VS Code\command]

 @="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%1\""

 ; This will make it appear when you right click ON a folder

 ; The "Icon" line can be removed if you don't want the icon to appear

 [HKEY_CLASSES_ROOT\Directory\shell\vscode]

 @="Open Folder as VS Code Project"

 "Icon"="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\",0"

 [HKEY_CLASSES_ROOT\Directory\shell\vscode\command]

 @="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%1\""

 ; This will make it appear when you right click INSIDE a folder

 ; The "Icon" line can be removed if you don't want the icon to appear

 [HKEY_CLASSES_ROOT\Directory\Background\shell\vscode]

 @="Open Folder as VS Code Project"

 "Icon"="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\",0"

 [HKEY_CLASSES_ROOT\Directory\Background\shell\vscode\command]

 @="\"C:\\Program Files (x86)\\Microsoft VS Code\\Code.exe\" \"%V\""