Comenzando el desarrollo de Qt en VSCode: Cómo instalar el Qt Extension Pack
Hola, soy Kenji. Esta vez presentaré “Cómo configurar el entorno de desarrollo de Qt en Visual Studio Code (en adelante VSCode)”.
Recientemente, además del Qt Creator oficial, ha aumentado el número de personas que desean desarrollar aplicaciones de Qt utilizando el ligero y altamente extensible VSCode. Para estas personas, recomiendo el “Qt Extension Pack”. Con solo instalar este paquete de extensiones, tendrás a tu disposición las principales extensiones relacionadas con Qt.
Audiencia Objetivo
- Personas que desean comenzar a desarrollar aplicaciones GUI usando Qt
- Personas que prefieren desarrollar en VSCode en lugar de Qt Creator
- Personas a las que les resulta tedioso buscar las extensiones una por una
Requisitos Previos
- VSCode debe estar instalado (Puedes descargarlo gratis desde el sitio web oficial)
- La biblioteca base de Qt debe estar instalada (Sitio web oficial de Qt)
¿Qué es el Qt Extension Pack?
Qt Extension Pack es un paquete de extensiones para VSCode. Al instalarlo, las siguientes características se agregan automáticamente:
- Soporte para archivos
.ui(Qt Designer) - Resaltado de sintaxis para archivos
.proy.qrc - Soporte para autocompletado de código C++, compilación y depuración para Qt
- Qt Resource Browser (referencia de recursos)
Pasos de Instalación
1. Abre VSCode
Primero, inicia VSCode.
2. Abre la vista de Extensiones
Haz clic en el panel de Actividad a la izquierda (el icono de bloques cuadrados) para mostrar “Extensiones”.
Opcionalmente, puedes presionar el atajo
Ctrl + Shift + X.
3. Busca “Qt Extension Pack”
Ingresa las siguientes palabras clave en la barra de búsqueda:
| |
4. Haz clic en el botón Instalar
Una vez que se muestre el paquete correspondiente, haz clic en el botón “Instalar”. Esto instalará múltiples extensiones a la vez, como:
- Qt Language Support
- QML Support
- Qt Designer Integration
- CMake Tools (esencial para el desarrollo de Qt basado en CMake)
Notas sobre la configuración del proyecto (Ejemplo CMake + Qt)
Si utilizas Qt con CMake, se recomienda la siguiente combinación de extensiones:
Además, agregar las siguientes líneas en tu CMakeLists.txt facilita la integración con Qt:
| |
Extra: ¿Cómo abrir los archivos .ui?
Los archivos .ui se pueden editar en Qt Designer.
En VSCode, puedes hacer clic derecho en el archivo .ui → seleccionar Open with Qt Designer (requiere que Qt Designer esté incluido en la variable de entorno PATH).
Resumen
| Paso | Contenido |
|---|---|
| 1 | Iniciar VSCode |
| 2 | Abrir panel de Extensiones |
| 3 | Buscar “Qt Extension Pack” |
| 4 | Clic en botón Instalar |
Configurar el entorno de Qt en VSCode se ha vuelto mucho más fácil que antes. Ofrece suficientes funciones para ser una alternativa a Qt Creator, y es recomendable para quienes desean trabajar de forma ágil.
Colección de Enlaces Recomendados
- Sitio Oficial de Qt
- Qt Extension Pack - Visual Studio Marketplace
- Sitio Oficial de VSCode
- Extensión CMake Tools
Finalmente
De ahora en adelante, planeo avanzar en el desarrollo utilizando las herramientas de interfaz de usuario de Qt y QML en este entorno. La próxima vez, explicaré cómo compilar y ejecutar una aplicación de Hello World en Qt desde VSCode.
¡Hasta luego!