16. Instalar Visual Studio code

 

Instalación y Configuración de Visual Studio Code

📋 Introducción

Antes de comenzar, asumimos que ya tienes tu aplicación corriendo en Docker. Si verificas con docker ps, deberías ver tres contenedores: Mieze, Qohelet, Ginetes y tu aplicación principal corriendo exitosamente.

Tu aplicación ya debería ser accesible desde el dominio que configuraste en el archivo hosts. Ahora, vamos a instalar y configurar nuestro editor de código: Visual Studio Code.

Nota: Si ya tienes Visual Studio Code instalado, puedes saltar a la sección de configuraciones y extensiones.

🚀 Paso 1: Descargar e Instalar Visual Studio Code

  1. Descarga:

    • Visita el sitio oficial de Visual Studio Code

    • Haz clic en el botón "Descargar"

    • Selecciona tu sistema operativo (Windows, macOS, Linux)

  2. Instalación (Windows):

    • Abre el archivo descargado (ej. VSCodeSetup-x64-x.xx.x.exe)

    • Acepta los términos de licencia

    • Sigue las instrucciones del asistente:

      • Ruta de instalación: Deja la predeterminada

      • Crear icono en el escritorio (recomendado)

      • Agregar al PATH (útil para abrir desde terminal)

    • Haz clic en "Instalar"

  3. Finalizar:

    • Marca la opción "Iniciar Visual Studio Code"

    • Haz clic en "Finalizar"

⚙️ Paso 2: Instalar Extensiones Esenciales

Una vez abierto VS Code, instala estas extensiones desde el panel de extensiones (Ctrl+Shift+X):

🔧 Extensiones para PHP (si trabajas con Laravel):

  1. PHP Intelephense

    • Busca: PHP Intelephense

    • Proporciona autocompletado inteligente para PHP

    • Mejor opción que las alternativas básicas

  2. PHP Extension Pack

    • Busca: PHP Extension Pack

    • Incluye varias herramientas útiles para desarrollo PHP

  3. PHP Namespace Resolver

    • Busca: PHP Namespace Resolver

    • Permite importar clases automáticamente con Ctrl+Enter

🎨 Extensiones para Vue.js (si tu proyecto lo utiliza):

  1. Vue Language Features (Volar)

    • Busca: Vue - Official

    • Soporte oficial para Vue 3 (mejor rating y más descargas)

  2. Vue VSCode Snippets

    • Busca: Vue VSCode Snippets

    • Fragmentos de código útiles para Vue

  3. Vue Documentation

    • Busca documentación de Vue

    • Útil para consultas rápidas

🛠️ Extensión Adicional Recomendada:

  1. Prettier

    • Busca: Prettier - Code formatter

    • Formatea automáticamente tu código

    • Mantiene consistencia en el estilo

📂 Paso 3: Configurar Acceso al Proyecto

Tu proyecto Laravel está en una carpeta dentro de tu máquina virtual (Docker/WSL). Para acceder desde VS Code:

  1. Ubica tu proyecto:

    • Normalmente en una ruta como ~/laravel-app/ o similar

    • Esta carpeta está dentro del entorno de Docker

  2. Acceso por SSH (próximo paso):

    • En el siguiente tutorial conectaremos VS Code a la máquina virtual vía SSH

    • Esto permitirá editar archivos directamente desde tu editor

✅ Verificación Final

  1. Abre VS Code

  2. Ve a Extensiones (Ctrl+Shift+X)

  3. Verifica que tengas instaladas:

    • PHP Intelephense

    • PHP Extension Pack

    • PHP Namespace Resolver

    • Vue - Official

    • Vue VSCode Snippets

    • Prettier

🎯 Resumen

Has instalado exitosamente:

  • ✅ Visual Studio Code

  • ✅ Extensiones esenciales para PHP/Laravel

  • ✅ Extensiones para Vue.js

  • ✅ Herramientas de formateo (Prettier)

Próximo paso: Conectar VS Code a tu máquina virtual vía SSH para trabajar directamente con los archivos de tu proyecto Laravel.

Tip: Configura Prettier para formatear al guardar en File > Preferences > Settings buscando "Format on Save".

Comentarios

Publicar un comentario

Entradas más populares de este blog

ejercicios-Crear Carpeta y Archivo de Texto en Ubuntu

https://copy.sh/v86/?profile=linux26 Ejercicios para Practicar en Terminales Online Ejercicio Básico 1 - Práctica Inicial bash # En la terminal online, escribe estos comandos: whoami pwd ls mkdir practica cd practica touch archivo1.txt ls -l Ejercicio Básico 2 - Crear y Copiar bash # Continuación del ejercicio anterior echo "Hola mundo desde terminal online" > archivo1.txt cat archivo1.txt mkdir copias cp archivo1.txt copias/ ls copias/ cat copias/archivo1.txt Ejercicio Básico 3 - Exploración bash # Explorar el sistema cd / ls cd home ls cd ~ pwd Te voy a guiar paso a paso en un ejercicio muy básico y fácil para principiantes. ¡Vamos a hacerlo juntos! Paso a Paso del Ejercicio Paso 1: Abrir la Terminal Presiona  Ctrl + Alt + T  para abrir la terminal en Ubuntu. Paso 2: Crear una Carpeta Principal bash mkdir mi_primer_ejercicio Paso 3: Entrar a la Carpeta bash cd mi_primer_ejercicio Paso 4: Crear un Archivo de Texto bash touch mi_archivo.txt Paso 5...
Leer más

Tutorial de Carpetas y Directorios en Ubuntu Linux

En Linux, todo es un archivo. A medida que te adentres en Linux, lo comprenderás, pero por ahora, tenlo en cuenta. Cada archivo está organizado en un árbol de directorios jerárquico. El primer directorio del sistema de archivos se denomina, acertadamente, directorio raíz. El directorio raíz contiene muchas carpetas y archivos, que pueden almacenar más carpetas y archivos, etc   Introducción a los Directorios en Linux En Linux (incluyendo Ubuntu), los directorios (carpetas) siguen una estructura jerárquica que comienza desde el directorio raíz ( / ). Este sistema organiza todos los archivos y programas del sistema. Estructura Básica del Sistema de Archivos text / ├── bin -> Comandos esenciales del sistema ├── etc -> Archivos de configuración ├── home -> Directorios de usuarios ├── var -> Archivos variables (logs, etc.) ├── tmp -> Archivos temporales ├── usr -> Programas y aplicaciones └── ... Comandos Básicos para Trabajar con Directorios 1. Navegación e...
Leer más

Instalar Docker en Ubuntu Server usando docker.io

  Tutorial: Instalar Docker en Ubuntu Server usando  docker.io Tutorial completo con  docker.io Paso 1: Actualizar el sistema bash sudo apt update sudo apt upgrade -y Paso 2: Instalar Docker desde los repositorios de Ubuntu bash sudo apt install docker.io Paso 3: Habilitar e iniciar el servicio Docker bash # Habilitar Docker para que inicie automáticamente sudo systemctl enable docker # Iniciar el servicio Docker sudo systemctl start docker # Verificar que el servicio está corriendo sudo systemctl status docker Paso 4: Configurar permisos de usuario Verificar si el grupo docker existe bash sudo grep docker /etc/group Agregar tu usuario al grupo docker bash sudo usermod -aG docker $USER Aplicar los cambios de grupo inmediatamente bash newgrp docker Paso 5: Verificar la instalación bash # Verificar versión de Docker docker --version # Probar Docker con un contenedor de prueba docker run hello-world Comprobación final Verificar que todo funcion...
Leer más