Instalación de Qt Extension Pack en Visual Studio Code

Fri, 13 Sep 2024 00:53:53 +0900

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 .pro y .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:

1

Qt Extension Pack

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:

1
2


find_package(Qt6 REQUIRED COMPONENTS Widgets)
target_link_libraries(MyApp PRIVATE Qt6::Widgets)

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

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!

'Extensiones Recomendadas para Visual Studio Code'

Wed, 29 May 2024 17:20:19 +0900

Lista de Extensiones Recomendadas para Visual Studio Code

Categoría	Nombre	Proveedor	Descripción
Gestión Virtual/Contenedores	Remote Development	Microsoft	Soporta el desarrollo remoto conectándose a contenedores virtuales/WSL a través de SSH
Gestión Virtual/Contenedores	Docker	Microsoft	Soporta la gestión de contenedores Docker
Gestión de Código	GitHub Pull Requests	GitHub	Gestiona GitHub Pull Requests en VSCode
Gestión de Código	GitHub Copilot	GitHub	Soporta la finalización de código impulsada por IA
Gestión de Código	Git Graph	mhutchie	Muestra gráficamente las ramas y commits de Git
Gestión de Código	Git History	Don Jayamanne	Muestra el historial de Git
Navegador/Desarrollo Web	Debugger for Firefox	Firefox DevTools	Utiliza el depurador de Firefox en VSCode
Navegador/Desarrollo Web	Microsoft Edge Tool For VScode	Microsoft	Utiliza las herramientas de desarrollo de Edge en VSCode
Navegador/Desarrollo Web	Vue Language Features(Volar)	Vue	Soporta las características del lenguaje de Vue
Navegador/Desarrollo Web	JavaScript (ES6) code snippets	charalampos karypidis	Proporciona fragmentos de código de JavaScript
Navegador/Desarrollo Web	Tailwind CSS IntelliSense	Tailwind Labs	Proporciona fragmentos de código de Tailwind CSS
Desarrollo en la Nube	AWS Toolkit	Amazon Web Services	Soporta el desarrollo en AWS
Desarrollo en la Nube	Azure Tools	Microsoft	Soporta el desarrollo en Azure
Desarrollo en la Nube	Google Cloud Tools	Google Cloud	Soporta el desarrollo en Google Cloud
Bases de Datos	MySQL	Jun Han	Soporta el desarrollo en MySQL
Bases de Datos	SQL Server(mssql)	Microsoft	Soporta el desarrollo en SQL Server
Bases de Datos	PostgreSQL	Chris Kolkman	Soporta el desarrollo en PostgreSQL
Sistemas Integrados	PlatformIO	PlatformIO	Soporta el desarrollo en PlatformIO
Sistemas Integrados	Arduino	Microsoft	Soporta el desarrollo en Arduino
Sistemas Integrados	WorkBench	Particle	Entorno de desarrollo de Particle, soportando firmware, bibliotecas e integración con la nube para el desarrollo de IoT
C/C++	C/C++ Extension Pack	Microsoft	Soporta el desarrollo en C/C++
C/C++	C/C++ Runner	franneck94	Ejecuta código C/C++ (soporta compiladores gcc, msvc, cuda nvcc)
C/C++	Cortex-Debug	marus25	Soporta la depuración de microcontroladores Cortex-A/R/M
Python	Python Extension Pack	Microsoft	Soporta el desarrollo en Python
Python	jupyter	Microsoft	Soporta el desarrollo en Jupyter Notebook
Utilidades/Extensión de IU	Markdown All in One	Yu Zhang	Soporta la escritura en Markdown
Utilidades/Extensión de IU	Hex Editor	Microsoft	Edita archivos binarios
Utilidades/Extensión de IU	vscode-pdf	tomoki1207	Muestra archivos PDF
Utilidades/Extensión de IU	Rainbow CSV	mechatroner	Muestra archivos CSV con resaltado de colores
Utilidades/Extensión de IU	Draw.io Integration	Henning Dieterichs	Utiliza Draw.io en VSCode
Utilidades/Extensión de IU	Japanese Language Pack for Visual Studio Code	Microsoft	Paquete de idioma japonés
Utilidades/Extensión de IU	Live Share	Microsoft	Soporta la colaboración en tiempo real

Visual Studio Code on kenji.blog