Curso de Visual Studio Code

¿Qué es Visual Studio Code?

Es un editor de código fuente desarrollado por Microsoft y disponible para Windows, Linux y Mac. Es muy completo y rápido, entre las funcionalidades que tiene están: autocompletado, restaltado de sintaxis, formateado automático de código, atajos del teclado personalizables, interfaz visual personalizable, soporte para git integrado o la capacidad de aumentar sus funcionalidades mediante extensiones.

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.

Curso de Visual Studio Code 1
Curso de Visual Studio Code 2

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.

Curso de Visual Studio Code 3

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

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.

Curso de Visual Studio Code 4
while(premium == false) verCodigo = false;

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

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:

Curso de Visual Studio Code 5

ctrl + shift + p => split editor

Extensiones

Indispensables:

  • Path Intelligense by Christian Kohler → Ayuda en el autocompletado de las rutas. Mejora el autocompletado nativo de VSC cuando usamos inicializadores de aplicaciones como Vite, etc.
  • Live Server → 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
  • ES7 React/Redux snippets by dsznajder → Añade algunos snippets útiles, como:
    • clg para hacer un console.log.
    • rafce para crear el código de un componente funcional.
  • 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 → Te resalta con diferentes colores las tabulaciones del código.
  • Copy With Imports → Al pegar un código, si este utiliza imports, estos son añadidos también.
  • Prettier → Mejora el formateo de código del Visual Studio code.
  • Quokka.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
      Curso de Visual Studio Code 6.
    4. Podemos usar el atajo alt + q, que seguro que no está cogido.

Interesantes:

  • ftp-simple by humy2833 → Permite subir un proyecto a internet cómodamente. El comando ftp-simple config es para configurar la conexión. Luego podemos subir a internet pulsando con el botón derecho sobre la carpeta deseada.
  • Project Manager by Alessandro Fragnani → Permite gestionar los projectos abiertos más cómodamente.
  • Github Copilot by GitHub → Utiliza inteligencia artificial para autocompletar el código y dar soluciones a problemas. Es de pago. 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.
  • Todo Tree by Gruntfuggly → Permite tener un listado de tareas vinculado a nuestro proyecto.
  • Bookmarks by Alessandro Fragnani → Permite marcar una líneas de código para saltar entre ellas. ctrl + alt + k: crea un bookmark. ctrl + alt + j: salta entre bookmarks.
  • Git Graph → Permite ver el árbol de github de manera visual.

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

Snippets

Podemos definir

ctrl + shift + p → Snippets: Configures User Snippets

javascript.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"
	},
	"Axios Create": {
		"prefix": "axioscreate",
		"body": [
			"import axios from \"axios\";\nexport const i = axios.create({baseURL: \"https://rickandmortyapi.com/api\",});",
		],
		"description": "Log output to console"
	},
}

javasriptreact.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$2\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"
	},
}