Cómo configurar Visual Studio Code (VS Code) para el desarrollo con PHP

Introducción

Visual Studio Code , también conocido como VS Code , es un editor de código fuente gratuito (o entorno de desarrollo integrado (IDE)) disponible para todos los principales sistemas operativos.

Con una gran colección de extensiones para muchos lenguajes de programación, VS Code se puede personalizar para satisfacer una amplia variedad de necesidades de desarrollo. En esta guía, aprenderá a configurar Visual Studio Code para trabajar en proyectos PHP.

Prerrequisitos

Para seguir esta guía, deberá descargar e instalar la versión adecuada de Visual Studio Code para su sistema operativo.

Las instrucciones de esta guía se validaron en una computadora de escritorio con Ubuntu 20.04, pero deberían funcionar sin problemas en todos los sistemas operativos compatibles con VS Code. Sin embargo, tenga en cuenta que es posible que sea necesario modificar levemente las teclas de acceso directo del teclado para que sean compatibles con los sistemas MacOS.

Paso 1: Instalación de extensiones PHP de VS Code para soporte adicional

Inmediatamente después de la instalación, VS Code ya reconoce el código PHP y ayuda con el resaltado de sintaxis, la depuración básica y la sangría de código. Estas funciones son adecuadas para ediciones rápidas o cuando se trabaja con scripts PHP individuales. Sin embargo, trabajar en proyectos más grandes puede volverse difícil sin más contexto en torno al código y cómo cada archivo interactúa y se integra dentro del proyecto más grande.

Hay varias extensiones de VS Code que pueden ayudar a acelerar su productividad al trabajar en proyectos PHP. En esta guía, instalaremos y configuraremos PHP Intelephense , una popular extensión PHP para VS Code que ofrece varias funciones avanzadas, como finalización de código mejorada, mejor navegación entre componentes, información sobre herramientas con gran cantidad de información al pasar el mouse, formato automático de código e informes de errores en tiempo real basados ​​en análisis de código estático.

Abra la pestaña de extensiones haciendo clic en el último icono de la barra de menú de la izquierda o presionando CTRL + SHIFT + X. Esto abrirá un menú lateral con un cuadro de búsqueda y una lista de extensiones populares o recomendadas. Escriba “php” o “intelephense” para localizar la extensión PHP Intelephense. Haga clic en el botón Instalar para instalar y habilitar la extensión.

Una vez completada la instalación, la documentación oficial de Intelephense recomienda que deshabilite la extensión Características del lenguaje PHP incorporada que viene con VS Code.

Para desactivar esta extensión, escriba @builtin phpen el cuadro de búsqueda Extensiones para localizar las extensiones PHP integradas. A continuación, haga clic en el icono de configuración de la extensión Características del lenguaje PHP y haga clic en la opción Desactivar del menú desplegable.

Si tiene algún archivo abierto en VS Code, deberá volver a cargar el editor para aplicar los cambios.

Puede instalar otras extensiones siguiendo el mismo proceso descrito para la extensión PHP Intelephense, pero tenga en cuenta que algunas extensiones requerirán la instalación de software adicional en su sistema. Consulte la documentación de la extensión para asegurarse de que los requisitos estén configurados correctamente.

Paso 2: Importar o crear un nuevo proyecto PHP

Para importar un proyecto PHP existente a VS Code, haz clic en el primer ícono de la barra de menú izquierda o escribe CTRL + SHIFT + Epara acceder al explorador de archivos. Haz clic en el botón Abrir carpeta y selecciona el directorio de tu proyecto. En caso de que estés creando un nuevo proyecto, puedes crear una nueva carpeta y seleccionarla como directorio de tu proyecto.

La ventana del explorador ahora mostrará el árbol de directorios del proyecto, lo que le brindará acceso rápido a los archivos y directorios de su proyecto.

Paso 3: Personalización del tema y la fuente del editor (opcional)

Aunque no es necesario, suele ser una buena idea personalizar la apariencia del editor para que sea más cómodo de usar a largo plazo. Como desarrollador, es posible que pase varias horas al día mirando un IDE como VS Code y, por ese motivo, es importante asegurarse de que la fuente del editor tenga un tamaño adecuado y que el contraste sea suficiente para facilitar la lectura sin cansar la vista demasiado rápido.

Es posible que desee experimentar con diferentes temas y fuentes para encontrar una configuración personalizada que funcione bien para usted.

Cambiar el tema de VS Code

VS Code viene con algunos temas diferentes que te permiten cambiar los colores utilizados en la interfaz del editor y en el resaltado del código. Los estilos oscuros y claros están incluidos de forma predeterminada.

Vaya a Archivo – Preferencias – Tema de color o escriba CTRL + K + Tpara seleccionar un tema diferente para VS Code.

También puedes instalar extensiones de tema para personalizar aún más la apariencia de VS Code. Si buscas themedentro de la pestaña de extensiones ( CTRL + SHIFT + X), encontrarás varias extensiones de tema en diferentes estilos y colores, incluidos esquemas de color transferidos de otros editores y plataformas populares.

Ajuste de la fuente

Aunque la configuración de fuente predeterminada de VS Code será lo suficientemente buena para muchos usuarios, es posible que desees ajustar el tamaño y el tipo de fuente del editor para aumentar la legibilidad.

Si desea modificar el tamaño de la fuente o cambiarla por otro tipo, puede ir a Archivo – Preferencias – Configuración y, a continuación, elegir Editor de texto en el menú de la izquierda. A continuación, haga clic en Fuente en el submenú que se abre. Esa sección contiene la configuración de la familia y el tamaño de la fuente que puede modificar según sus preferencias.

Los cambios se guardan inmediatamente y se aplican a todos los archivos abiertos actualmente.

Conclusión

Visual Studio Code es un editor de código ligero pero potente que se puede personalizar para satisfacer las necesidades de la mayoría de los desarrolladores. En esta guía, aprendió a instalar y configurar la extensión PHP Intelephense para obtener soporte adicional mientras trabaja en proyectos PHP, a importar y crear nuevos proyectos dentro de VS Code y a personalizar la apariencia del editor para una experiencia de codificación más cómoda.

Para obtener más tutoriales sobre Visual Studio Code, consulte nuestra página de etiquetas de VS Code . Si desea obtener más información sobre el desarrollo con PHP, puede consultar nuestra serie Cómo codificar en PHP para obtener una introducción al lenguaje y nuestra página de etiquetas de PHP para obtener más tutoriales de PHP.