<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Qt Extension Pack on kenji.blog</title><link>http://kenji.blog/id/tags/qt-extension-pack/</link><description>Recent content in Qt Extension Pack on kenji.blog</description><generator>Hugo -- gohugo.io</generator><language>id</language><copyright>kenjinote</copyright><lastBuildDate>Fri, 13 Sep 2024 00:53:53 +0900</lastBuildDate><atom:link href="http://kenji.blog/id/tags/qt-extension-pack/index.xml" rel="self" type="application/rss+xml"/><item><title>Saya Mencoba Menginstal Qt Extension Pack di Visual Studio Code</title><link>http://kenji.blog/id/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/</link><pubDate>Fri, 13 Sep 2024 00:53:53 +0900</pubDate><guid>http://kenji.blog/id/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/</guid><description>&lt;img src="http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img_1.png" alt="Featured image of post Saya Mencoba Menginstal Qt Extension Pack di Visual Studio Code" />&lt;h1 id="memulai-pengembangan-qt-di-vscode-cara-menginstal-qt-extension-pack">Memulai Pengembangan Qt di VSCode: Cara Menginstal Qt Extension Pack
&lt;/h1>&lt;p>Halo, saya Kenji.
Kali ini saya akan memperkenalkan &amp;ldquo;Cara mengatur lingkungan pengembangan Qt di Visual Studio Code (selanjutnya disebut VSCode)&amp;rdquo;.&lt;/p>
&lt;p>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 ** &amp;ldquo;Qt Extension Pack&amp;rdquo; **.
Hanya dengan menginstal paket ekstensi ini, Anda akan mendapatkan semua ekstensi utama terkait Qt sekaligus.&lt;/p>
&lt;hr>
&lt;h2 id="target-pembaca">Target Pembaca
&lt;/h2>&lt;ul>
&lt;li>Mereka yang ingin mulai mengembangkan aplikasi GUI menggunakan Qt&lt;/li>
&lt;li>Mereka yang ingin mengembangkan menggunakan VSCode daripada Qt Creator&lt;/li>
&lt;li>Mereka yang merasa repot mencari ekstensi satu per satu&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="prasyarat">Prasyarat
&lt;/h2>&lt;ul>
&lt;li>VSCode sudah terinstal
(&lt;a class="link" href="https://code.visualstudio.com/" target="_blank" rel="noopener"
>Anda dapat mengunduhnya secara gratis dari situs web resmi&lt;/a>)&lt;/li>
&lt;li>Pustaka inti Qt sudah terinstal (&lt;a class="link" href="https://www.qt.io/" target="_blank" rel="noopener"
>Situs web resmi Qt&lt;/a>)&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="apa-itu-qt-extension-pack">Apa itu Qt Extension Pack?
&lt;/h2>&lt;p>Qt Extension Pack adalah paket ekstensi untuk VSCode.
Dengan menginstalnya, fitur-fitur berikut akan ditambahkan secara otomatis:&lt;/p>
&lt;ul>
&lt;li>Dukungan file &lt;code>.ui&lt;/code> (Qt Designer)&lt;/li>
&lt;li>Sorotan sintaks untuk file &lt;code>.pro&lt;/code> dan file &lt;code>.qrc&lt;/code>&lt;/li>
&lt;li>Penyelesaian kode C++ untuk Qt, pembuatan, dan dukungan debugging&lt;/li>
&lt;li>Qt Resource Browser (referensi sumber daya)&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="langkah-langkah-instalasi">Langkah-langkah Instalasi
&lt;/h2>&lt;h3 id="1-buka-vscode">1. Buka VSCode
&lt;/h3>&lt;p>Pertama, jalankan VSCode.&lt;/p>
&lt;h3 id="2-buka-tampilan-ekstensi">2. Buka Tampilan Ekstensi
&lt;/h3>&lt;p>Klik bilah aktivitas di sebelah kiri (ikon blok persegi) untuk menampilkan &amp;ldquo;Ekstensi&amp;rdquo;.&lt;/p>
&lt;p>Atau Anda dapat menekan pintasan
&lt;code>Ctrl + Shift + X&lt;/code>.&lt;/p>
&lt;h3 id="3-cari-qt-extension-pack">3. Cari &amp;ldquo;Qt Extension Pack&amp;rdquo;
&lt;/h3>&lt;p>Masukkan kata kunci berikut di bilah pencarian:&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">Qt Extension Pack
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>
&lt;/div>
&lt;/div>&lt;p>&lt;img src="http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img.png"
width="867"
height="228"
srcset="http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img_hua3a606fe260b4f1c55a0f37b6ed054ec_30325_480x0_resize_box_3.png 480w, http://kenji.blog/p/visual-studio-code-%E3%81%AB-qt-extension-pack-%E3%82%92%E5%85%A5%E3%82%8C%E3%81%A6%E3%81%BF%E3%81%9F/img_hua3a606fe260b4f1c55a0f37b6ed054ec_30325_1024x0_resize_box_3.png 1024w"
loading="lazy"
alt="img.png"
class="gallery-image"
data-flex-grow="380"
data-flex-basis="912px"
>&lt;/p>
&lt;h3 id="4-klik-tombol-instal">4. Klik Tombol Instal
&lt;/h3>&lt;p>Setelah paket yang dituju muncul, klik tombol &amp;ldquo;Instal&amp;rdquo;.
Ini akan menginstal beberapa ekstensi berikut sekaligus:&lt;/p>
&lt;ul>
&lt;li>Qt Language Support&lt;/li>
&lt;li>QML Support&lt;/li>
&lt;li>Qt Designer Integration&lt;/li>
&lt;li>CMake Tools (wajib untuk pengembangan Qt berbasis CMake)&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="tambahan-pengaturan-proyek-contoh-cmake--qt">Tambahan Pengaturan Proyek (Contoh CMake + Qt)
&lt;/h2>&lt;p>Jika Anda menggunakan Qt berbasis CMake, kami merekomendasikan kombinasi dengan ekstensi berikut:&lt;/p>
&lt;ul>
&lt;li>&lt;a class="link" href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools" target="_blank" rel="noopener"
>CMake Tools&lt;/a>&lt;/li>
&lt;li>&lt;a class="link" href="https://marketplace.visualstudio.com/items?itemName=twxs.cmake" target="_blank" rel="noopener"
>CMake Language Support&lt;/a>&lt;/li>
&lt;/ul>
&lt;p>Selain itu, jika Anda menambahkan deskripsi berikut ke CMakeLists.txt, integrasi dengan Qt akan menjadi lancar:&lt;/p>
&lt;div class="highlight">&lt;div class="chroma">
&lt;table class="lntable">&lt;tr>&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code>&lt;span class="lnt">1
&lt;/span>&lt;span class="lnt">2
&lt;/span>&lt;/code>&lt;/pre>&lt;/td>
&lt;td class="lntd">
&lt;pre tabindex="0" class="chroma">&lt;code class="language-cmake" data-lang="cmake">&lt;span class="line">&lt;span class="cl">&lt;span class="nb">find_package&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">Qt6&lt;/span> &lt;span class="s">REQUIRED&lt;/span> &lt;span class="s">COMPONENTS&lt;/span> &lt;span class="s">Widgets&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="err">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="err">&lt;/span>&lt;span class="nb">target_link_libraries&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s">MyApp&lt;/span> &lt;span class="s">PRIVATE&lt;/span> &lt;span class="s">Qt6::Widgets&lt;/span>&lt;span class="p">)&lt;/span>&lt;span class="err">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/td>&lt;/tr>&lt;/table>
&lt;/div>
&lt;/div>&lt;hr>
&lt;h2 id="bonus-bagaimana-cara-membuka-file-ui">Bonus: Bagaimana cara membuka file .ui?
&lt;/h2>&lt;p>File &lt;code>.ui&lt;/code> dapat diedit di Qt Designer.
Di VSCode, Anda dapat mengklik kanan file &lt;code>.ui&lt;/code> → pilih &lt;code>Open with Qt Designer&lt;/code> (Qt Designer harus disertakan dalam variabel lingkungan &lt;code>PATH&lt;/code>).&lt;/p>
&lt;hr>
&lt;h2 id="kesimpulan">Kesimpulan
&lt;/h2>&lt;table>
&lt;thead>
&lt;tr>
&lt;th>Langkah&lt;/th>
&lt;th>Deskripsi&lt;/th>
&lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td>1&lt;/td>
&lt;td>Jalankan VSCode&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>2&lt;/td>
&lt;td>Buka panel Ekstensi&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>3&lt;/td>
&lt;td>Cari &amp;ldquo;Qt Extension Pack&amp;rdquo;&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td>4&lt;/td>
&lt;td>Klik tombol Instal&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;/table>
&lt;p>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.&lt;/p>
&lt;hr>
&lt;h2 id="kumpulan-tautan-yang-disarankan">Kumpulan Tautan yang Disarankan
&lt;/h2>&lt;ul>
&lt;li>&lt;a class="link" href="https://www.qt.io/" target="_blank" rel="noopener"
>Situs resmi Qt&lt;/a>&lt;/li>
&lt;li>&lt;a class="link" href="https://marketplace.visualstudio.com/items?itemName=TheQtCompany.qt" target="_blank" rel="noopener"
>Qt Extension Pack - Visual Studio Marketplace&lt;/a>&lt;/li>
&lt;li>&lt;a class="link" href="https://code.visualstudio.com/" target="_blank" rel="noopener"
>Situs resmi VSCode&lt;/a>&lt;/li>
&lt;li>&lt;a class="link" href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools" target="_blank" rel="noopener"
>Ekstensi CMake Tools&lt;/a>&lt;/li>
&lt;/ul>
&lt;hr>
&lt;h2 id="akhir-kata">Akhir Kata
&lt;/h2>&lt;p>Ke depannya, saya berencana untuk terus mengembangkan menggunakan alat UI Qt dan QML di lingkungan ini.
Lain kali, saya berencana untuk menjelaskan ** cara membangun &amp;amp; menjalankan aplikasi Hello World di Qt dari VSCode **.&lt;/p>
&lt;p>Sampai jumpa!&lt;/p></description></item></channel></rss>