Configurar un entorno de desarrollo frontend

Frontend Development Environment — Photo by Ilya Pavlov on Unsplash

El desarrollo frontend requiere tres herramientas: un editor, un runtime y control de versiones.

Instalar VSCode

Descarga desde code.visualstudio.com.

Después de instalar, añade extensiones útiles:

Prettier - Formateo de código
ESLint - Calidad del código
Live Server - Servidor de desarrollo local

Abre la pestaña de extensiones con Cmd+Shift+X (Mac) o Ctrl+Shift+X (Windows) y busca para instalar.

Instalar Node.js

Descarga la versión LTS desde nodejs.org.

Verifica la instalación:

node --version
npm --version

Si aparecen los números de versión, fue exitoso.

Instalar Git

Descarga desde git-scm.com.

Después de instalar, configura tu información de usuario:

git config --global user.name "Tu Nombre"
git config --global user.email "email@example.com"

Verifica la configuración:

git config --list

Crear tu primer proyecto

Crea un proyecto en la terminal:

mkdir my-project
cd my-project
npm init -y
git init

Abre la carpeta en VSCode:

code .

Crea un archivo index.html:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Project</title>
</head>
<body>
  <h1>Hello, World!</h1>
</body>
</html>

Haz clic derecho y selecciona “Open with Live Server” para ver en el navegador.

Configurar .gitignore

No incluyas node_modules en Git:

echo "node_modules" > .gitignore

Primer commit

git add .
git commit -m "Initial commit"

Tu entorno de desarrollo está listo.