<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.csdn.net/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">于 2020-10-04 19:47:05 发布</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="{"mod":"popu_823","spm":"1001.2101.3001.4232","ab":"new"}">
<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.csdn.net/weixin_43669941/category_9679730.html" target="_blank" rel="noopener">Qt</a>
<span class="label">文章标签:</span>
<a data-report-click="{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"c++","ab":"new","extra":"{\"searchword\":\"c++\"}"}" class="tag-link" href="https://so.csdn.net/so/search/s.do?q=c%2B%2B&t=all&o=vip&s=&l=&f=&viparticle=" target="_blank" rel="noopener">c++</a>
<a data-report-click="{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"qt","ab":"new","extra":"{\"searchword\":\"qt\"}"}" class="tag-link" href="https://so.csdn.net/so/search/s.do?q=qt&t=all&o=vip&s=&l=&f=&viparticle=" target="_blank" rel="noopener">qt</a>
<a data-report-click="{"mod":"popu_626","spm":"1001.2101.3001.4223","strategy":"cmake","ab":"new","extra":"{\"searchword\":\"cmake\"}"}" class="tag-link" href="https://so.csdn.net/so/search/s.do?q=cmake&t=all&o=vip&s=&l=&f=&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.csdn.net/weixin_43669941/article/details/108921714" target="_blank">https://blog.csdn.net/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.csdn.net/weixin_43669941/category_9679730.html" target="_blank" title="Qt" data-report-click="{"spm":"1001.2101.3001.6332"}">
<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>
Qt in VSCode
于 2023-03-03 17:56:06 首次发布