http://kenji.blog/ru/tags/visual-studio-code/Recent content in Visual Studio Code on kenji.blogHugo -- gohugo.iorukenjinoteFri, 13 Sep 2024 00:53:53 +0900http://kenji.blog/ru/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/ru/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 Я попробовал установить Qt Extension Pack в Visual Studio Code" /><h1 id="начинаем-разработку-на-qt-в-vscode-как-установить-qt-extension-pack">Начинаем разработку на Qt в VSCode: Как установить Qt Extension Pack </h1><p>Привет, я Kenji. В этот раз я расскажу «Как настроить среду разработки Qt в Visual Studio Code (далее VSCode)».</p> <p>В последнее время, в дополнение к официальному Qt Creator, всё больше людей хотят разрабатывать приложения Qt с использованием легковесного и расширяемого VSCode. Тем, кто ищет такую возможность, я рекомендую ** «Qt Extension Pack» **. Просто установив этот пакет расширений, вы получите все основные расширения, связанные с Qt, одновременно.</p> <hr> <h2 id="целевая-аудитория">Целевая аудитория </h2><ul> <li>Те, кто хочет начать разработку GUI-приложений с использованием Qt</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>Автодополнение кода C++ для Qt, поддержка сборки и отладки</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 (необходимо для разработки Qt с поддержкой CMake)</li> </ul> <hr> <h2 id="дополнение-к-настройкам-проекта-пример-cmake--qt">Дополнение к настройкам проекта (пример CMake + Qt) </h2><p>Если вы используете Qt на базе CMake, рекомендуется комбинация со следующими расширениями:</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>Создание среды Qt в VSCode стало намного проще, чем раньше. Она имеет достаточно функций, чтобы служить альтернативой 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>В будущем я планирую продолжить разработку, используя UI-инструменты Qt и QML в этой среде. В следующий раз я планирую объяснить, ** как собрать и запустить приложение Hello World на Qt из VSCode **.</p> <p>До скорого!</p>http://kenji.blog/ru/p/%D1%80%D0%B5%D0%BA%D0%BE%D0%BC%D0%B5%D0%BD%D0%B4%D1%83%D0%B5%D0%BC%D1%8B%D0%B5-%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D1%8F-visual-studio-code/Wed, 29 May 2024 17:20:19 +0900http://kenji.blog/ru/p/%D1%80%D0%B5%D0%BA%D0%BE%D0%BC%D0%B5%D0%BD%D0%B4%D1%83%D0%B5%D0%BC%D1%8B%D0%B5-%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D1%8F-visual-studio-code/<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>Поддерживает удаленную разработку путем подключения к виртуальным контейнерам/WSL через SSH</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>Управляет Pull Requests из GitHub в VSCode</td> </tr> <tr> <td>Управление кодом</td> <td>GitHub Copilot</td> <td>GitHub</td> <td>Поддерживает автодополнение кода с помощью ИИ</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>Веб-разработка и браузер</td> <td>Debugger for Firefox</td> <td>Firefox DevTools</td> <td>Позволяет использовать отладчик Firefox в VSCode</td> </tr> <tr> <td>Веб-разработка и браузер</td> <td>Microsoft Edge Tool For VScode</td> <td>Microsoft</td> <td>Позволяет использовать инструменты разработчика Edge в VSCode</td> </tr> <tr> <td>Веб-разработка и браузер</td> <td>Vue Language Features(Volar)</td> <td>Vue</td> <td>Поддерживает языковые функции Vue</td> </tr> <tr> <td>Веб-разработка и браузер</td> <td>JavaScript (ES6) code snippets</td> <td>charalampos karypidis</td> <td>Предоставляет сниппеты для JavaScript</td> </tr> <tr> <td>Веб-разработка и браузер</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, поддерживающая разработку для IoT, включая прошивки, библиотеки и интеграцию с облаком</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>Makrdown 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>Позволяет использовать Draw.io в VSCode</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>