Saya Mencoba Menginstal Qt Extension Pack di Visual Studio Code

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

Memulai Pengembangan Qt di VSCode: Cara Menginstal Qt Extension Pack

Halo, saya Kenji. Kali ini saya akan memperkenalkan “Cara mengatur lingkungan pengembangan Qt di Visual Studio Code (selanjutnya disebut VSCode)”.

Akhir-akhir ini, selain Qt Creator resmi, semakin banyak orang yang ingin mengembangkan aplikasi Qt menggunakan VSCode yang ringan dan sangat dapat diperluas. Bagi Anda yang merasa demikian, saya merekomendasikan ** “Qt Extension Pack” **. Hanya dengan menginstal paket ekstensi ini, Anda akan mendapatkan semua ekstensi utama terkait Qt sekaligus.

Target Pembaca

Mereka yang ingin mulai mengembangkan aplikasi GUI menggunakan Qt
Mereka yang ingin mengembangkan menggunakan VSCode daripada Qt Creator
Mereka yang merasa repot mencari ekstensi satu per satu

Prasyarat

VSCode sudah terinstal (Anda dapat mengunduhnya secara gratis dari situs web resmi)
Pustaka inti Qt sudah terinstal (Situs web resmi Qt)

Apa itu Qt Extension Pack?

Qt Extension Pack adalah paket ekstensi untuk VSCode. Dengan menginstalnya, fitur-fitur berikut akan ditambahkan secara otomatis:

Dukungan file .ui (Qt Designer)
Sorotan sintaks untuk file .pro dan file .qrc
Penyelesaian kode C++ untuk Qt, pembuatan, dan dukungan debugging
Qt Resource Browser (referensi sumber daya)

Langkah-langkah Instalasi

1. Buka VSCode

Pertama, jalankan VSCode.

2. Buka Tampilan Ekstensi

Klik bilah aktivitas di sebelah kiri (ikon blok persegi) untuk menampilkan “Ekstensi”.

Atau Anda dapat menekan pintasan Ctrl + Shift + X.

3. Cari “Qt Extension Pack”

Masukkan kata kunci berikut di bilah pencarian:

1

Qt Extension Pack

4. Klik Tombol Instal

Setelah paket yang dituju muncul, klik tombol “Instal”. Ini akan menginstal beberapa ekstensi berikut sekaligus:

Qt Language Support
QML Support
Qt Designer Integration
CMake Tools (wajib untuk pengembangan Qt berbasis CMake)

Tambahan Pengaturan Proyek (Contoh CMake + Qt)

Jika Anda menggunakan Qt berbasis CMake, kami merekomendasikan kombinasi dengan ekstensi berikut:

Selain itu, jika Anda menambahkan deskripsi berikut ke CMakeLists.txt, integrasi dengan Qt akan menjadi lancar:

1
2


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

Bonus: Bagaimana cara membuka file .ui?

File .ui dapat diedit di Qt Designer. Di VSCode, Anda dapat mengklik kanan file .ui → pilih Open with Qt Designer (Qt Designer harus disertakan dalam variabel lingkungan PATH).

Kesimpulan

Langkah	Deskripsi
1	Jalankan VSCode
2	Buka panel Ekstensi
3	Cari “Qt Extension Pack”
4	Klik tombol Instal

Membangun lingkungan Qt di VSCode kini jauh lebih mudah dari sebelumnya. Ia memiliki fitur yang cukup untuk menjadi alternatif bagi Qt Creator, dan disarankan bagi mereka yang ingin bekerja dengan ringan.

Kumpulan Tautan yang Disarankan

Akhir Kata

Ke depannya, saya berencana untuk terus mengembangkan menggunakan alat UI Qt dan QML di lingkungan ini. Lain kali, saya berencana untuk menjelaskan ** cara membangun & menjalankan aplikasi Hello World di Qt dari VSCode **.

Sampai jumpa!

Ekstensi Visual Studio Code yang Direkomendasikan

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

Daftar Ekstensi Visual Studio Code yang Direkomendasikan

Kategori	Nama	Penyedia	Deskripsi
Manajemen Virtual & Kontainer	Remote Devlopment	Microsoft	Mendukung pengembangan jarak jauh dengan menghubungkan ke kontainer virtual/WSL melalui SSH
Manajemen Virtual & Kontainer	Docker	Microsoft	Mendukung manajemen kontainer Docker
Manajemen Kode	GitHub Pull Requests	GitHub	Mengelola Pull Request GitHub di VSCode
Manajemen Kode	GitHub Copilot	GitHub	Mendukung penyelesaian kode menggunakan AI
Manajemen Kode	Git Graph	mhutchie	Menampilkan cabang dan komit Git secara grafis
Manajemen Kode	Git History	Don Jayamanne	Menampilkan riwayat Git
Browser & Pengembangan Web	Debugger for Firefox	Firefox DevTools	Menggunakan debugger Firefox di VSCode
Browser & Pengembangan Web	Microsoft Edge Tool For VScode	Microsoft	Menggunakan alat pengembang Edge di VSCode
Browser & Pengembangan Web	Vue Language Features(Volar)	Vue	Mendukung fitur bahasa Vue
Browser & Pengembangan Web	JavaScript (ES6) code snippets	charalampos karypidis	Menyediakan potongan kode (snippet) JavaScript
Browser & Pengembangan Web	Tailwind CSS IntelliSense	Tailwind Labs	Menyediakan potongan kode (snippet) Tailwind CSS
Pengembangan Cloud	AWS Toolkit	Amazon Web Services	Mendukung pengembangan AWS
Pengembangan Cloud	Azure Tools	Microsoft	Mendukung pengembangan Azure
Pengembangan Cloud	Google Cloud Tools	Google Cloud	Mendukung pengembangan Google Cloud
Database	MySQL	Jun Han	Mendukung pengembangan MySQL
Database	SQL Server(mssql)	Microsoft	Mendukung pengembangan SQL Server
Database	PostgreSQL	Chris Kolkman	Mendukung pengembangan PostgreSQL
Embedded Systems	PlatformIO	PlatformIO	Mendukung pengembangan PlatformIO
Embedded Systems	Arduino	Microsoft	Mendukung pengembangan Arduino
Embedded Systems	WorkBench	Particle	Lingkungan pengembangan dari Particle yang mendukung pengembangan IoT termasuk firmware, pustaka, dan integrasi cloud
C/C++	C/C++ Extension Pack	Microsoft	Mendukung pengembangan C/C++
C/C++	C/C++ Runner	franneck94	Menjalankan kode C/C++ (mendukung kompiler gcc, msvc, cuda nvccc)
C/C++	Cortex-Debug	marus25	Mendukung debugging mikrokontroler Cortex-A/R/M
Python	Python Extension Pack	Microsoft	Mendukung pengembangan Python
Python	jupyter	Microsoft	Mendukung pengembangan Jupyter Notebook
Utilitas & Ekstensi UI	Makrdown All in One	Yu Zhang	Mendukung penulisan Markdown
Utilitas & Ekstensi UI	Hex Editor	Microsoft	Mengedit file biner
Utilitas & Ekstensi UI	vscode-pdf	tomoki1207	Menampilkan file PDF
Utilitas & Ekstensi UI	Rainbow CSV	mechatroner	Menampilkan file CSV dengan warna-warni
Utilitas & Ekstensi UI	Draw.io Integration	Henning Dieterichs	Menggunakan Draw.io di VSCode
Utilitas & Ekstensi UI	Japanese Language Pack for Visual Studio Code	Microsoft	Paket pelokalan bahasa
Utilitas & Ekstensi UI	Live Share	Microsoft	Mendukung kolaborasi waktu nyata

Visual Studio Code on kenji.blog