Curso de Visual Studio Code

¿Qué es Visual Studio Code?

Instalación

En este enlace podemos descargar el Visual Studio Code.

Para que apareczca un menú contextual que nos permita abrir carpetas y ficheros utilizando el Visual Studio Code, debemos marcar las siguientes checks durante el proceso de instalación.

Shortcuts de Visual Studio Code

• Ir al archivo → ctrl + p
• Abrir terminal → ctrl + ñ
• Toggle word wrap → alt + z
• Selección múltiple → ctrl + d
• Cursor múltiple → alt + click
• Comentar / descomentar código → ctrl + Ç
• Botón derecho sobre la pestaña → Open container folder
• Accesos de la sidebar:
  • Explorador de ficheros (ctrl + shift + e)
  • Búsqueda (ctrl + shift + f) Pulsando en la flechita desplegaremos la posibilidad de reemplazar. Nota: ctrl + f busca algo en el propio archivo.
  • Git (ctrl + shift + g)
  • Debug (ctrl + shift + d)
  • Extensions (ctrl + shift + x). Para ir al marketplace.

Paleta de comandos (ctrl + shift + p)

• Envolver una palabra: Selecciono la palabra que quiero envolver -> wrap with abreviation
• View: Toggle Menu Bar
• View: Toggle Status Bar
• View: Toggle Full Screen
• View: Toggle Side Bar Visibility

User settings Copy

Su configuración nos permitirá afinar algunos comportamientos de Visual Studio Code para ser más productivos (autosalvado, autoformato, autocompletado en en proyectos de ReactJS).

Rueda dentada de la esquina inferior izquierda → Setting (Ajustes)→ Iconito en la esquina superior derecha → Pegamos el código que muestro más abajo en el lugar del que había.

while(premium == false) verCodigo = false;

Para poder ver el código fuente, accede o suscríbete.

Funcionalidades nativas de Visual Studio Code

Usar Emmet

Visual Studio Code viene con Emmet de serie:

Ejemplos: 

div#amor
div.amor
ul>li*5>a

Split View

Puedes usar el botón de split view:

ctrl + shift + p => split editor

Extensiones Copy

Indispensables:

• Auto Rename Tag by Jun Han→ Aunque Visual Studio Code ya viene con una funcionalidad de autorenombrado de etiquetas, no funciona del todo bien y esta extensión si que lo hace.
• Live Server by Ritwick Dey→ Permite visualizar nuestro código HTML en un servidor web. Como el atajo es un poco engorroso, podemos sobreescribirlo siguiendo los siguientes pasos:
  1. Pulsamos ctrl + shift + p
  2. Live Server: Open With Live Server
  3. Pulsamos en el engranaje que aparece
  4. Podemos asociar el atajo del teclado alt + b
• Material Icon Theme by Philipp Kief → Redefine los iconos visuales del menú ficheros
• Color HighLighting by Sergii N → Muestra un previo del color seleccionado
• ESLint by Microsoft → Te hace recomendaciones, en los proyectos donde ha sido configurado (como los creados con create-react-app) para mejorar tu código y evitar errores.
• Indent Rainbow by oderwat→ Te resalta con diferentes colores las tabulaciones del código.
• Copy With Imports by stringham→ Al pegar un código, si este utiliza imports, estos son añadidos también.
• Prettier by Prettier → Mejora el formateo de código del Visual Studio code.
• Sublime Text 4 Theme → El tema que me gusta a mí. Si no te gusta, no le instales :).
• YAML → Formateo específico para ficheros con extensión yml.
• Quokka.js by Wallaby.js → Nos permite ejecutar nuestro código Javascript directamente en la consola y ver un previo de los resultados de nuestros logs mientras los estamos ejecutando. Para lanzarlo podemos pulsar ctrl + j, q. Será muy útil en los primeros pasos del curso de programación con Javascript. Como el atajo es un poco engorroso, podemos sobreescribirlo siguiendo los siguientes pasos:
  1. Pulsamos ctrl + shift + p
  2. Buscamos: Quokka.js: Start on Current File
  3. Pulsamos en el engranaje que aparece
     .
  4. Podemos usar el atajo alt + q, que seguro que no está cogido.
• Github Copilot by GitHub → Utiliza inteligencia artificial para autocompletar el código y dar soluciones a problemas. Tiene un modo gratuito bastante completo. Sería útil vincular el chat rápido de copilot (Chat: Open Quick Chat (Github Copilot)) a un atajo del teclado (alt + c en mi caso), para ejecutarlo más cómodamente.
• Live Share. Lo utilizo en clase para dar acceso a mis alumnos a mi código fuente. Permite escribir y visualizar código en tiempo real entre varias personas.

• Específicas de React:
  • vscode-styled-components by Julien Poissonnier → permite visualizar correctamente el resaltado de sintaxis cuando usemos el módulo de React styled components.
  • VSCode React Component Generator

Configuración del Linting

Instalamos Eslint:

npm i eslint # Vite ya nos instala por defecto eslint

Instalamaos un linting específico:

npm i eslint-config-airbnb

Cambio de Atajo del teclado

Por defecto, el atajo del teclado ctrl + b sirve para ocultar el panel de ficheros para la izquierda. Me parece más interesante que lo que ocurra es que se quiten todos los paneles (se active el zen mode).

Snippets

Podemos definir

ctrl + shift + p → Snippets: Configures User Snippets →

javascript.json, typescript.json

{
	"Write Phaser scene code": {
		"prefix": "phaserscene",
		"body": [
			"class ${1:${TM_FILENAME_BASE}} extends Phaser.Scene {\n\tconstructor() {\n\t\tsuper(\"${TM_FILENAME_BASE}\");\n\t}\n\n\tcreate() {}\n\n\tupdate() {}\n}\n\nexport default $1;",
		],
		"description": "Crear una escena de Phaser"
	},
	"console.log": {
		"prefix": "clg",
		"body": [
			"console.log($1)",
		],
		"description": "Log output to console"
	},
	"document.querySelector": {
		"prefix": "doc",
		"body": [
			"document.querySelector(\"$1\")",
		],
		"description": "Write document.querySelector function"
	},
	"Axios Create": {
		"prefix": "axioscreate",
		"body": [
			"import axios from \"axios\";\nexport const i = axios.create({baseURL: \"https://rickandmortyapi.com/api\",});",
		],
		"description": "Log output to console"
	},
	"Arrow function": {
		"prefix": ".af",
		"body": [
			"const ${1:${functionName}} = (${2:params}) => {\n\t$0\n};",
		],
		"description": "Arrow function"
	},
}

javasriptreact.json, typescriptreact.json

{
	"console.log": {
		"prefix": "clg",
		"body": [
			"console.log($1)",
		],
		"description": "Log output to console"
	},
	"React router": {
		"prefix": "reactrouter",
		"body": [
			"import { BrowserRouter, Route, Routes} from 'react-router-dom';\nimport Home from '../pages/Home';\nimport Page2 from '../pages/Page2';\nconst Router = () => (\n\t<BrowserRouter>\n\t\t<Routes>\n\t\t\t<Route index element={<Home/>} />\n\t\t\t<Route path=\"/page2\" element={<Page2/>} />\n\t\t\t<Route path=\"*\" element={<div>404</div>} />\n\t\t</Routes>\n</BrowserRouter>\n);\n\nexport default Router;"
		],
		"description": "Crear un componente de React"
	},
	"React component": {
		"prefix": "reactcomponent",
		"body": [
			"const ${1:${TM_FILENAME_BASE}} = () => {\n\treturn (\n\t\t<div>\n\t\t\t$1\n\t\t</div>\n\t);\n};\n\nexport default $1;",
		],
		"description": "Crear un componente de React"
	},
	"React context API": {
		"prefix": "reactcontextapi",
		"body": [
			"import { createContext, useState, useContext } from 'react';\n\nconst AppContext = createContext();\nexport const useUserContext = () => useContext(AppContext);\n\nconst UserProvider = ({ children}) => {\n\tconst [user, setUser] = useState();\n\treturn (\n\t\t<AppContext.Provider value={{user, setUser}}>\n\t\t\t{children}\n\t\t</AppContext.Provider>\n\t);\n}\n\nexport default UserProvider;",
		],
		"description": "Crear un componente de React"
	},
}

Truco para abrir cualquier repositorio de github cómodamente en visual Studio Code Online

Añadiremos vscode.dev/ antes de la url de cualquier repositorio de github.