Qt in VSCode

jackie_05
已于 2023-03-03 17:57:19 修改
阅读量273
点赞数
CC 4.0 BY-SA版权
文章标签： qt
于 2023-03-03 17:56:06 首次发布
原文链接：https://blog.youkuaiyun.com/weixin_43669941/article/details/108921714
<div class="blog-content-box">
        <div class="article-header-box">
        <div class="article-header">
            <div class="article-title-box">
                <h1 class="title-article" id="articleContentId">使用VS Code进行Qt开发</h1>
            </div>
            <div class="article-info-box">
                <div class="article-bar-top">
                    <img class="article-type-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/original.png" alt="">
                    <div class="bar-content">
                    <a class="follow-nickName " href="https://blog.youkuaiyun.com/weixin_43669941" target="_blank" rel="noopener" title="海将河推走">海将河推走</a>
                    <img class="article-time-img article-heard-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCurrentTime2.png" alt="">
                    <span class="time">于&nbsp;2020-10-04 19:47:05&nbsp;发布</span>
                    <img class="article-read-img article-heard-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/articleReadEyes2.png" alt="">
                    <span class="read-count">52144</span>
                    <a id="blog_detail_zk_collection" class="un-collection" data-report-click="{&quot;mod&quot;:&quot;popu_823&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4232&quot;,&quot;ab&quot;:&quot;new&quot;}">
                        <img class="article-collect-img article-heard-img un-collect-status isdefault" style="display:inline-block" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollect2.png" alt="">
                        <img class="article-collect-img article-heard-img collect-status isactive" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/tobarCollectionActive2.png" alt="">
                        <span class="name">收藏</span>
                        <span class="get-collection">
                            396
                        </span>
                    </a>
                    </div>
                </div>
                <div class="blog-tags-box">
                    <div class="tags-box artic-tag-box">
                            <span class="label">分类专栏：</span>
                                <a class="tag-link" href="https://blog.youkuaiyun.com/weixin_43669941/category_9679730.html" target="_blank" rel="noopener">Qt</a>
                            <span class="label">文章标签：</span>
                                <a data-report-click="{&quot;mod&quot;:&quot;popu_626&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4223&quot;,&quot;strategy&quot;:&quot;c++&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;extra&quot;:&quot;{\&quot;searchword\&quot;:\&quot;c++\&quot;}&quot;}" class="tag-link" href="https://so.youkuaiyun.com/so/search/s.do?q=c%2B%2B&amp;t=all&amp;o=vip&amp;s=&amp;l=&amp;f=&amp;viparticle=" target="_blank" rel="noopener">c++</a>
                                <a data-report-click="{&quot;mod&quot;:&quot;popu_626&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4223&quot;,&quot;strategy&quot;:&quot;qt&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;extra&quot;:&quot;{\&quot;searchword\&quot;:\&quot;qt\&quot;}&quot;}" class="tag-link" href="https://so.youkuaiyun.com/so/search/s.do?q=qt&amp;t=all&amp;o=vip&amp;s=&amp;l=&amp;f=&amp;viparticle=" target="_blank" rel="noopener">qt</a>
                                <a data-report-click="{&quot;mod&quot;:&quot;popu_626&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4223&quot;,&quot;strategy&quot;:&quot;cmake&quot;,&quot;ab&quot;:&quot;new&quot;,&quot;extra&quot;:&quot;{\&quot;searchword\&quot;:\&quot;cmake\&quot;}&quot;}" class="tag-link" href="https://so.youkuaiyun.com/so/search/s.do?q=cmake&amp;t=all&amp;o=vip&amp;s=&amp;l=&amp;f=&amp;viparticle=" target="_blank" rel="noopener">cmake</a>
                    </div>
                </div>
                <div class="slide-content-box">
                    <div class="article-copyright">
                        <div class="creativecommons">
                            版权声明：本文为博主原创文章，遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议，转载请附上原文出处链接和本声明。
                        </div>
                        <div class="article-source-link">
                            本文链接：<a href="https://blog.youkuaiyun.com/weixin_43669941/article/details/108921714" target="_blank">https://blog.youkuaiyun.com/weixin_43669941/article/details/108921714</a>
                        </div>
                    </div>
                </div>
                
                <div class="operating">
                    <a class="href-article-edit slide-toggle">版权</a>
                </div>
            </div>
        </div>
    </div>
    
        <div id="blogColumnPayAdvert">
            <div class="column-group">
                <div class="column-group-item column-group0 column-group-item-one">
                    <div class="item-l">
                        <a class="item-target" href="https://blog.youkuaiyun.com/weixin_43669941/category_9679730.html" target="_blank" title="Qt" data-report-click="{&quot;spm&quot;:&quot;1001.2101.3001.6332&quot;}">
                            <img class="item-target" src="https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64" alt="">
                            <span class="title item-target">
                                <span>
                                <span class="tit">Qt</span>
                                    <span class="dec">专栏收录该内容</span>
                                </span>
                            </span>
                        </a>
                    </div>
                    <div class="item-m">
                        <span>3 篇文章</span>
                        <span>2 订阅</span>
                    </div>
                    <div class="item-r">
                            <a class="item-target article-column-bt" data-id="9679730">已订阅</a>
                    </div>
                </div>
            </div>
        </div>
    <article class="baidu_pl">
        <div id="article_content" class="article_content clearfix">
        <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
        <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
                <div id="content_views" class="markdown_views prism-atom-one-light">
                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
                        <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
                    </svg>
                    <h1><a name="t0"></a><a id="VS_CodeQt_0"></a>使用VS Code进行Qt开发</h1> 
<p></p>
<div class="toc">
 <h3><a name="t1"></a>文章目录</h3>
 <ul><li><a href="#VS_CodeQt_0" target="_self">使用VS Code进行Qt开发</a></li><li><ul><li><a href="#_7" target="_self">测试环境</a></li><li><a href="#_14" target="_self">步骤</a></li><li><ul><li><a href="#1_Qtbin_16" target="_self">1. 将Qt的bin目录添加到环境变量</a></li><li><a href="#2_VS_Code_20" target="_self">2. 安装VS Code扩展</a></li><li><a href="#3_Qt_CreatorCMake_30" target="_self">3. 使用Qt Creator创建CMake项目</a></li><li><a href="#4_VS_Code_36" target="_self">4. 在VS Code中打开项目</a></li><li><a href="#5__46" target="_self">5. 构建并运行项目</a></li><li><a href="#7__56" target="_self">7. 调试项目</a></li></ul>
   </li><li><a href="#_62" target="_self">一些小问题</a></li></ul>
 </li></ul>
</div>
<p></p> 
<p>Qt Creator界面不美观，而VS Code更漂亮一些。</p> 
<p>因为Qt5支持使用CMake进行构建，而VS Code也可以支持CMake构建系统，因此是完全可以的。</p> 
<h2><a name="t2"></a><a id="_7"></a>测试环境</h2> 
<ul><li>Qt 5.15.0</li><li>CMake 3.17.5</li><li>Visual Studio 2019 16.7.5（使用C++的桌面开发）</li><li>Visual Studio Code 1.49.3</li></ul> 
<h2><a name="t3"></a><a id="_14"></a>步骤</h2> 
<h3><a name="t4"></a><a id="1_Qtbin_16"></a>1. 将Qt的bin目录添加到环境变量</h3> 
<p>假设Qt安装在<code>C:\Qt</code>，那么将<code>C:\Qt\5.15.0\msvc2019_64\bin</code>添加到环境变量。</p> 
<h3><a name="t5"></a><a id="2_VS_Code_20"></a>2. 安装VS Code扩展</h3> 
<p>在扩展商店搜索<code>c++</code>，安装微软发行的C/C++扩展。</p> 
<p><img src="https://img-blog.csdnimg.cn/20201004194104305.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2OTk0MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="c++"></p> 
<p>在扩展商店搜索<code>cmake</code>，安装前两个扩展，分别为CMake、CMake Tools。</p> 
<p><img src="https://img-blog.csdnimg.cn/20201004194132859.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2OTk0MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="cmake"></p> 
<h3><a name="t6"></a><a id="3_Qt_CreatorCMake_30"></a>3. 使用Qt Creator创建CMake项目</h3> 
<p>使用Qt Creator创建一个测试项目，如图所示：</p> 
<p><img src="https://img-blog.csdnimg.cn/20201004194149980.gif#pic_center" alt="creator"></p> 
<h3><a name="t7"></a><a id="4_VS_Code_36"></a>4. 在VS Code中打开项目</h3> 
<p>用VS Code打开<code>CMakeLists.txt</code>文件所在目录，如图所示：</p> 
<p><img src="https://img-blog.csdnimg.cn/20201004194212282.gif#pic_center" alt="vscode"></p> 
<p>需要选择一个<code>kit</code>，我是用的是VS 2019的工具包，也可以使用<code>MinGW</code>，具体请参考CMake扩展的官方文档。</p> 
<p>提示是否配置<code>智能感知</code>，选择是。</p> 
<h3><a name="t8"></a><a id="5__46"></a>5. 构建并运行项目</h3> 
<p>按<code>F7</code>进行构建：</p> 
<p><img src="https://img-blog.csdnimg.cn/2020100419422932.gif#pic_center" alt="buildqt"></p> 
<p>按<code>Shift + F5</code>运行：</p> 
<p><img src="https://img-blog.csdnimg.cn/2020100419424273.gif#pic_center" alt="run"></p> 
<h3><a name="t9"></a><a id="7__56"></a>7. 调试项目</h3> 
<p>添加断点，按下<code>Ctrl + F5</code>进行调试：</p> 
<p><img src="https://img-blog.csdnimg.cn/20201004194254908.gif#pic_center" alt="debug"></p> 
<h2><a name="t10"></a><a id="_62"></a>一些小问题</h2> 
<p><strong>测试后发现如果使用MinGW构建则不会出现下面的问题</strong>，而使用Visual C++构建则会出现。</p> 
<p>上述所有步骤完成后，已经可以正常编码和运行，但<code>智能感知有一点问题</code>，如图：</p> 
<p><img src="https://img-blog.csdnimg.cn/20201004194311356.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2OTk0MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="problem"></p> 
<p>原因在于Qt生成的ui文件没有被包含到智能感知的include目录中。</p> 
<p>查询了CMake文档后发现ui文件所在目录会被添加到目标属性的include目录属性中：</p> 
<p><img src="https://img-blog.csdnimg.cn/20201004194355400.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2OTk0MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="check"></p> 
<p>但实际验证发现并没有，所以我们还需要手动添加这个属性。</p> 
<p>假设生成的目标为<code>Test</code>，在<code>CMakeLists.txt</code>文件的最后一行添加：</p> 
<pre data-index="0" class="prettyprint"><code class="prism language-cmake has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;">target_include_directories(Test PRIVATE "${CMAKE_BINARY_DIR}/Test_autogen/include_Debug")
<div class="hljs-button {2}" data-title="复制"></div></code><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li></ul></pre> 
<p>最终的<code>CMakeLists.txt</code>文件内容为：</p> 
<pre data-index="1" class="set-code-hide prettyprint"><code class="prism language-cmake has-numbering" onclick="mdcp.copyCode(event)" style="position: unset;">cmake_minimum_required(VERSION 3.5)

project(Test LANGUAGES CXX)

set(CMAKE_INCLUDE_CURRENT_DIR ON)

set(CMAKE_AUTOUIC ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)

set(CMAKE_CXX_STANDARD 11)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

# QtCreator supports the following variables for Android, which are identical to qmake Android variables.
# Check http://doc.qt.io/qt-5/deployment-android.html for more information.
# They need to be set before the find_package(Qt5 ...) call.

#if(ANDROID)
#    set(ANDROID_PACKAGE_SOURCE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/android")
#    if (ANDROID_ABI STREQUAL "armeabi-v7a")
#        set(ANDROID_EXTRA_LIBS
#            ${CMAKE_CURRENT_SOURCE_DIR}/path/to/libcrypto.so
#            ${CMAKE_CURRENT_SOURCE_DIR}/path/to/libssl.so)
#    endif()
#endif()

find_package(QT NAMES Qt6 Qt5 COMPONENTS Widgets REQUIRED)
find_package(Qt${QT_VERSION_MAJOR} COMPONENTS Widgets REQUIRED)

if(ANDROID)
  add_library(Test SHARED
    main.cpp
    mainwindow.cpp
    mainwindow.h
    mainwindow.ui
  )
else()
  add_executable(Test
    main.cpp
    mainwindow.cpp
    mainwindow.h
    mainwindow.ui
  )
endif()

target_link_libraries(Test PRIVATE Qt${QT_VERSION_MAJOR}::Widgets)

target_include_directories(Test PRIVATE "${CMAKE_BINARY_DIR}/Test_autogen/include_Debug")
<div class="hljs-button {2}" data-title="复制"></div></code><div class="hide-preCode-box"><span class="hide-preCode-bt"><img class="look-more-preCode contentImg-no-view" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png" alt="" title=""></span></div><ul class="pre-numbering" style=""><li style="color: rgb(153, 153, 153);">1</li><li style="color: rgb(153, 153, 153);">2</li><li style="color: rgb(153, 153, 153);">3</li><li style="color: rgb(153, 153, 153);">4</li><li style="color: rgb(153, 153, 153);">5</li><li style="color: rgb(153, 153, 153);">6</li><li style="color: rgb(153, 153, 153);">7</li><li style="color: rgb(153, 153, 153);">8</li><li style="color: rgb(153, 153, 153);">9</li><li style="color: rgb(153, 153, 153);">10</li><li style="color: rgb(153, 153, 153);">11</li><li style="color: rgb(153, 153, 153);">12</li><li style="color: rgb(153, 153, 153);">13</li><li style="color: rgb(153, 153, 153);">14</li><li style="color: rgb(153, 153, 153);">15</li><li style="color: rgb(153, 153, 153);">16</li><li style="color: rgb(153, 153, 153);">17</li><li style="color: rgb(153, 153, 153);">18</li><li style="color: rgb(153, 153, 153);">19</li><li style="color: rgb(153, 153, 153);">20</li><li style="color: rgb(153, 153, 153);">21</li><li style="color: rgb(153, 153, 153);">22</li><li style="color: rgb(153, 153, 153);">23</li><li style="color: rgb(153, 153, 153);">24</li><li style="color: rgb(153, 153, 153);">25</li><li style="color: rgb(153, 153, 153);">26</li><li style="color: rgb(153, 153, 153);">27</li><li style="color: rgb(153, 153, 153);">28</li><li style="color: rgb(153, 153, 153);">29</li><li style="color: rgb(153, 153, 153);">30</li><li style="color: rgb(153, 153, 153);">31</li><li style="color: rgb(153, 153, 153);">32</li><li style="color: rgb(153, 153, 153);">33</li><li style="color: rgb(153, 153, 153);">34</li><li style="color: rgb(153, 153, 153);">35</li><li style="color: rgb(153, 153, 153);">36</li><li style="color: rgb(153, 153, 153);">37</li><li style="color: rgb(153, 153, 153);">38</li><li style="color: rgb(153, 153, 153);">39</li><li style="color: rgb(153, 153, 153);">40</li><li style="color: rgb(153, 153, 153);">41</li><li style="color: rgb(153, 153, 153);">42</li><li style="color: rgb(153, 153, 153);">43</li><li style="color: rgb(153, 153, 153);">44</li><li style="color: rgb(153, 153, 153);">45</li><li style="color: rgb(153, 153, 153);">46</li><li style="color: rgb(153, 153, 153);">47</li><li style="color: rgb(153, 153, 153);">48</li></ul></pre> 
<p>智能感知正常工作：</p> 
<p><img src="https://img-blog.csdnimg.cn/20201004194444991.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY2OTk0MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="resolve"></p>
                </div><div><div></div></div>
                <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-0407448025.css" rel="stylesheet">
                <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-bb308a51ed.css" rel="stylesheet">
        </div>
        
    </article>
  <script>
  $(function() {
    setTimeout(function () {
      var mathcodeList = document.querySelectorAll('.htmledit_views img.mathcode');
      if (mathcodeList.length > 0) {
        var testImg = new Image();
        testImg.onerror = function () {
          mathcodeList.forEach(function (item) {
            $(item).before('<span class="img-codecogs">\\(' + item.alt + '\\)</span>');
            $(item).remove();
          })
          MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
        }
        testImg.src = mathcodeList[0].src;
      }
    }, 1000)
  })
  </script>
</div>