Visual Studio Code on kenji.bloghttp://kenji.blog/zh-cn/tags/visual-studio-code/Recent content in Visual Studio Code on kenji.blogHugo -- gohugo.iozh-cnkenjinoteFri, 13 Sep 2024 00:53:53 +0900尝试在 Visual Studio Code 中安装 Qt Extension Packhttp://kenji.blog/zh-cn/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/Fri, 13 Sep 2024 00:53:53 +0900http://kenji.blog/zh-cn/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 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 尝试在 Visual Studio Code 中安装 Qt Extension Pack" /><h1 id="在-vscode-中开始-qt-开发如何安装-qt-extension-pack">在 VSCode 中开始 Qt 开发：如何安装 Qt Extension Pack </h1><p>大家好，我是 Kenji。 这次将介绍“如何在 Visual Studio Code（以下简称 VSCode）中配置 Qt 开发环境”的方法。</p> <p>最近，除了官方的 Qt Creator 之外，越来越多的人希望使用轻量级且高扩展性的 VSCode 来开发 Qt 应用程序。 对于这样的人，我推荐“<strong>Qt Extension Pack</strong>”。 只需安装此扩展包，即可一次性备齐主要的 Qt 相关扩展功能。</p> <hr> <h2 id="目标读者">目标读者 </h2><ul> <li>想要开始使用 Qt 开发 GUI 应用程序的人</li> <li>想要在 VSCode 而不是 Qt Creator 中进行开发的人</li> <li>觉得逐个寻找扩展功能很麻烦的人</li> </ul> <hr> <h2 id="前提条件">前提条件 </h2><ul> <li>已安装 VSCode （<a class="link" href="https://code.visualstudio.com/" target="_blank" rel="noopener" >可以从官网免费下载</a>）</li> <li>已安装 Qt 核心库（<a class="link" href="https://www.qt.io/" target="_blank" rel="noopener" >Qt 官网</a>）</li> </ul> <hr> <h2 id="什么是-qt-extension-pack">什么是 Qt Extension Pack？ </h2><p>Qt Extension Pack 是用于 VSCode 的扩展功能包。 安装后，将自动添加以下功能：</p> <ul> <li>支持 <code>.ui</code> 文件（Qt Designer）</li> <li><code>.pro</code> 文件和 <code>.qrc</code> 文件的语法高亮</li> <li>Qt 的 C++ 代码补全、构建和调试支持</li> <li>Qt Resource Browser（资源浏览）</li> </ul> <hr> <h2 id="安装步骤">安装步骤 </h2><h3 id="1-打开-vscode">1. 打开 VSCode </h3><p>首先，请启动 VSCode。</p> <h3 id="2-打开扩展视图">2. 打开扩展视图 </h3><p>点击左侧活动栏（方形块图标）以显示“扩展”。</p> <p>或者使用快捷键 按下 <code>Ctrl + Shift + X</code> 也可以。</p> <h3 id="3-搜索qt-extension-pack">3. 搜索“Qt Extension Pack” </h3><p>在搜索栏中输入以下关键字：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-fallback" data-lang="fallback"><span class="line"><span class="cl">Qt Extension Pack </span></span></code></pre></td></tr></table> </div> </div><p><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" ></p> <h3 id="4-点击安装按钮">4. 点击安装按钮 </h3><p>显示目标包后，点击“安装”按钮。 这样就会一次性安装以下多个扩展功能：</p> <ul> <li>Qt Language Support</li> <li>QML Support</li> <li>Qt Designer Integration</li> <li>CMake Tools（在使用 CMake 的 Qt 开发中必不可少）</li> </ul> <hr> <h2 id="项目设置补充以-cmake--qt-为例">项目设置补充（以 CMake + Qt 为例） </h2><p>如果你使用基于 CMake 的 Qt，建议与以下扩展功能组合使用：</p> <ul> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools" target="_blank" rel="noopener" >CMake Tools</a></li> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=twxs.cmake" target="_blank" rel="noopener" >CMake Language Support</a></li> </ul> <p>此外，在 CMakeLists.txt 中加入类似以下的描述，可以与 Qt 顺利协作：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-cmake" data-lang="cmake"><span class="line"><span class="cl"><span class="nb">find_package</span><span class="p">(</span><span class="s">Qt6</span> <span class="s">REQUIRED</span> <span class="s">COMPONENTS</span> <span class="s">Widgets</span><span class="p">)</span><span class="err"> </span></span></span><span class="line"><span class="cl"><span class="err"></span><span class="nb">target_link_libraries</span><span class="p">(</span><span class="s">MyApp</span> <span class="s">PRIVATE</span> <span class="s">Qt6::Widgets</span><span class="p">)</span><span class="err"> </span></span></span></code></pre></td></tr></table> </div> </div><hr> <h2 id="附加如何打开-ui-文件">附加：如何打开 .ui 文件？ </h2><p><code>.ui</code> 文件可以使用 Qt Designer 进行编辑。 在 VSCode 中右键单击 <code>.ui</code> 文件 → 可以选择 <code>Open with Qt Designer</code>（需要将 Qt Designer 包含在环境变量 <code>PATH</code> 中）。</p> <hr> <h2 id="总结">总结 </h2><table> <thead> <tr> <th>步骤</th> <th>内容</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>启动 VSCode</td> </tr> <tr> <td>2</td> <td>打开扩展面板</td> </tr> <tr> <td>3</td> <td>搜索“Qt Extension Pack”</td> </tr> <tr> <td>4</td> <td>点击安装按钮</td> </tr> </tbody> </table> <p>现在在 VSCode 中构建 Qt 环境比以前简单多了。 作为 Qt Creator 的替代品，它具有足够的功能，推荐给想要轻快工作的人。</p> <hr> <h2 id="推荐链接集">推荐链接集 </h2><ul> <li><a class="link" href="https://www.qt.io/" target="_blank" rel="noopener" >Qt 官方</a></li> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=TheQtCompany.qt" target="_blank" rel="noopener" >Qt Extension Pack - Visual Studio Marketplace</a></li> <li><a class="link" href="https://code.visualstudio.com/" target="_blank" rel="noopener" >VSCode 官方</a></li> <li><a class="link" href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.cmake-tools" target="_blank" rel="noopener" >CMake Tools 扩展</a></li> </ul> <hr> <h2 id="最后">最后 </h2><p>今后，我打算在这个环境中推进使用 Qt UI 工具和 QML 的开发。 下次，我计划讲解 <strong>如何从 VSCode 构建和运行 Qt 的 Hello World 应用程序</strong>。</p> <p>再见！</p>Visual Studio Code推荐扩展http://kenji.blog/zh-cn/p/visual-studio-code%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD/Wed, 29 May 2024 17:20:19 +0900http://kenji.blog/zh-cn/p/visual-studio-code%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD/<img src="http://kenji.blog/p/visual-studio-code%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD/img.png" alt="Featured image of post Visual Studio Code推荐扩展" /><h1 id="visual-studio-code-推荐扩展一览">Visual Studio Code 推荐扩展一览 </h1><table> <thead> <tr> <th>分类</th> <th>名称</th> <th>提供者</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>虚拟·容器管理</td> <td>Remote Devlopment</td> <td>Microsoft</td> <td>通过SSH连接到虚拟容器/WSL，支持远程开发</td> </tr> <tr> <td>虚拟·容器管理</td> <td>Docker</td> <td>Microsoft</td> <td>支持Docker容器管理</td> </tr> <tr> <td>代码管理</td> <td>GitHub Pull Requests</td> <td>GitHub</td> <td>在VSCode上管理GitHub的Pull Request</td> </tr> <tr> <td>代码管理</td> <td>GitHub Copilot</td> <td>GitHub</td> <td>支持AI代码补全</td> </tr> <tr> <td>代码管理</td> <td>Git Graph</td> <td>mhutchie</td> <td>图形化显示Git分支和提交</td> </tr> <tr> <td>代码管理</td> <td>Git History</td> <td>Don Jayamanne</td> <td>显示Git历史记录</td> </tr> <tr> <td>浏览器·Web开发</td> <td>Debugger for Firefox</td> <td>Firefox DevTools</td> <td>在VSCode上使用Firefox调试器</td> </tr> <tr> <td>浏览器·Web开发</td> <td>Microsoft Edge Tool For VScode</td> <td>Microsoft</td> <td>在VSCode上使用Edge开发者工具</td> </tr> <tr> <td>浏览器·Web开发</td> <td>Vue Language Features(Volar)</td> <td>Vue</td> <td>支持Vue的语言功能</td> </tr> <tr> <td>浏览器·Web开发</td> <td>JavaScript (ES6) code snippets</td> <td>charalampos karypidis</td> <td>提供JavaScript代码片段</td> </tr> <tr> <td>浏览器·Web开发</td> <td>Tailwind CSS IntelliSense</td> <td>Tailwind Labs</td> <td>提供Tailwind CSS智能提示及代码片段</td> </tr> <tr> <td>云开发</td> <td>AWS Toolkit</td> <td>Amazon Web Services</td> <td>支持AWS开发</td> </tr> <tr> <td>云开发</td> <td>Azure Tools</td> <td>Microsoft</td> <td>支持Azure开发</td> </tr> <tr> <td>云开发</td> <td>Google Cloud Tools</td> <td>Google Cloud</td> <td>支持Google Cloud开发</td> </tr> <tr> <td>数据库</td> <td>MySQL</td> <td>Jun Han</td> <td>支持MySQL开发</td> </tr> <tr> <td>数据库</td> <td>SQL Server(mssql)</td> <td>Microsoft</td> <td>支持SQL Server开发</td> </tr> <tr> <td>数据库</td> <td>PostgreSQL</td> <td>Chris Kolkman</td> <td>支持PostgreSQL开发</td> </tr> <tr> <td>嵌入式</td> <td>PlatformIO</td> <td>PlatformIO</td> <td>支持PlatformIO开发</td> </tr> <tr> <td>嵌入式</td> <td>Arduino</td> <td>Microsoft</td> <td>支持Arduino开发</td> </tr> <tr> <td>嵌入式</td> <td>WorkBench</td> <td>Particle</td> <td>支持Particle提供的开发环境，从固件、库、云连接等全面支持物联网开发</td> </tr> <tr> <td>C/C++</td> <td>C/C++ Extension Pack</td> <td>Microsoft</td> <td>支持C/C++开发</td> </tr> <tr> <td>C/C++</td> <td>C/C++ Runner</td> <td>franneck94</td> <td>运行C/C++代码（支持gcc、msvc、cuda nvccc编译器）</td> </tr> <tr> <td>C/C++</td> <td>Cortex-Debug</td> <td>marus25</td> <td>支持Cortex-A/R/M微控制器的调试</td> </tr> <tr> <td>Python</td> <td>Python Extension Pack</td> <td>Microsoft</td> <td>支持Python开发</td> </tr> <tr> <td>Python</td> <td>jupyter</td> <td>Microsoft</td> <td>支持Jupyter Notebook开发</td> </tr> <tr> <td>实用工具·UI扩展</td> <td>Markdown All in One</td> <td>Yu Zhang</td> <td>支持Markdown编写</td> </tr> <tr> <td>实用工具·UI扩展</td> <td>Hex Editor</td> <td>Microsoft</td> <td>编辑二进制文件</td> </tr> <tr> <td>实用工具·UI扩展</td> <td>vscode-pdf</td> <td>tomoki1207</td> <td>显示PDF文件</td> </tr> <tr> <td>实用工具·UI扩展</td> <td>Rainbow CSV</td> <td>mechatroner</td> <td>彩色显示CSV文件</td> </tr> <tr> <td>实用工具·UI扩展</td> <td>Draw.io Integration</td> <td>Henning Dieterichs</td> <td>在VSCode上使用Draw.io</td> </tr> <tr> <td>实用工具·UI扩展</td> <td>Japanese Language Pack for Visual Studio Code</td> <td>Microsoft</td> <td>日语化语言包</td> </tr> <tr> <td>实用工具·UI扩展</td> <td>Live Share</td> <td>Microsoft</td> <td>支持实时协作</td> </tr> </tbody> </table>