[{"data":1,"prerenderedAt":151},["ShallowReactive",2],{"$fBBQ5ulyG5jVWbIBJe3r8F-kTKQKf1scMJiu0B6qzX5k":3,"$f7AVZHmPutZ23_8XKkLbDtEszKCuiY3yPjIDp9eRXGag":5,"$fTq1_qSgl3ea5Cnd-stwus18kfz65LfyD-nm5W2Jv2PY":7,"$fr16gXxpSJZmOxld70o77Nf_xG5__42Ox_Q1Y9dmM_3g":127},{"data":4},[],{"data":6},[],{"data":8,"meta":123},[9],{"id":10,"documentId":11,"title":12,"seo_title":13,"summary":14,"seo_description":15,"slug":16,"published_date":17,"body":18,"content":19,"createdAt":44,"updatedAt":45,"publishedAt":46,"blogauthor":47,"cover":69,"categories":112},400,"dskd9jsck2vjm1d0ztoz91uo","JavaScript и TypeScript в OpenIDE: Node.js, React, Angular, Git и работа с API","JavaScript и TypeScript в OpenIDE: React, Angular, Node.js","Альтернатива VS Code и WebStorm на платформе IntelliJ: как в OpenIDE работать с Node.js, React, Angular и Vue, проверять API и отлаживать JS и TS.","OpenIDE для JavaScript и TypeScript: Node.js и менеджеры пакетов, линтеры, React, Angular и Vue, HTTP-клиент для API, Git-клиент и отладчик в одной IDE.","javascript-i-typescript-v-openide","2026-09-01","Если вы пишете на JavaScript или TypeScript, выбор инструмента обычно начинается с двух знакомых вариантов.\n\n1. VS Code хорош именно своей модульностью: из него можно собрать среду почти под любой проект и точно под себя. Обратная сторона в том, что эту среду сначала придётся собрать. Нужно подобрать расширения для фреймворка, линтеров и форматтера, настроить запуск проекта и остальные инструменты. Тут важно учесть, что многие плагины разрабатывали энтузиасты, и давно забросили, так что фикса бага можно не ждать. И даже, например, Microsoft уже давно не обновляла список автодополнений для CSS.\n2. WebStorm решает эту задачу проще: установил IDE и получил готовую среду для JavaScript и TypeScript. Проблема в том, что скачать и нормально использовать IDE от JetBrains сегодня стало отдельным квестом.\n\nСегодня расскажу вам про третий вариант: [OpenIDE](https:\u002F\u002Fopenide.ru\u002F). Это готовая IDE на базе той же платформы, которую использует WebStorm.\n\nФилософия также схожа: вам не нужно собирать рабочий инструмент из десятка расширений. В одном дистрибутиве комфортно и легко настроить и менять версии Node.js, npm, yarn и pnpm, TypeScript, React и Angular, линтеров, Git и HTTP-клиенты. Можно открыть проект и сразу заниматься делом.\n\nНачнём с общих возможностей для любого JS\u002FTS-проекта, а React, Angular и всё что рядом с языков и фреймворками (Git-клиент, HTTP-клиент, [Database-клиент](\u002Fblog\u002Fdb-klient-openide-ot-podklyucheniya-k-baze-do-explain-i-eksporta\u002F)) разберём чуть позже.\n\n\u003Ch3 id=\"start-proekta-node-menedzhery-paketov-i-lintery\">Старт проекта: Node, менеджеры пакетов и линтеры\u003C\u002Fh3>\n\nПервый запуск новой IDE обычно начинается с базовым настроек, раскладки клавиш и выбора темы. OpenIDE предлагает импортировать настройки из установленной на вашем компе WebStorm (или любой другой JetBrains IDE), а также из VS Code: кеймап, тему и плагины.\n\n\u003Cvideo src=\"https:\u002F\u002Fstorage.yandexcloud.net\u002Famplicode-site\u002Farticles\u002Fopenide-js-ts-support\u002Fimport-from-vscode-start-screen.mp4\" controls muted loop playsinline width=\"100%\" poster=\"{{strapiUrl}}\u002Fuploads\u002Fcover_javascript_i_typescript_v_openide_8b917dda86.webp\" preload=\"none\">\u003C\u002Fvideo>\n\nПосле открытия IDE нам надо перейти в проект. Если вдруг вы разрабатываете приложение с нуля, то для проектов на Vue, Vite, NextJS, React и Angular есть возможность генерации проектов прямо из визуального окна IDE.\n\n\u003Cvideo src=\"https:\u002F\u002Fstorage.yandexcloud.net\u002Famplicode-site\u002Farticles\u002Fopenide-js-ts-support\u002Fnew-project.mp4\" controls muted loop playsinline width=\"100%\" poster=\"{{strapiUrl}}\u002Fuploads\u002Fcover_javascript_i_typescript_v_openide_8b917dda86.webp\" preload=\"none\">\u003C\u002Fvideo>\n\nДалее, после открытия нового или уже существующего проекта OpenIDE ищет установленный в системе Node, в том числе версии из nvm и fnm. Если подходящего рантайма нет, его можно скачать прямо из IDE. Менеджер пакетов также можно легко выбрать в настройках проекта.\n\n![]({{strapiUrl}}\u002Fuploads\u002F745e98c7ac8edfbcde86e6af98044e02_56dfc2af9f.webp)\n\nС TypeScript похожая история. Можно оставить встроенную версию или взять ту, которая указана в проекте.\n\nКонфигурации ESLint, Stylelint и форматтера OpenIDE подхватывает из проекта. Дублировать те же настройки внутри IDE не нужно: если конфиг найден, редактор использует его для проверок и форматирования.\n\n![]({{strapiUrl}}\u002Fuploads\u002Fd8bdc55e9f5fd0ae2bdfc1521c6da64f_1b1c672f41.webp)\n\nnpm-скрипты тоже появляются автоматически. IDE создаёт для них run-конфигурации, поэтому dev-сервер или сборку можно запустить прямо из редактора.\n\n![]({{strapiUrl}}\u002Fuploads\u002F73b3e86602c1c6bbf9cfc22adff2c41f_750cdaaba8.webp)\n\n\u003Ch3 id=\"navigacziya-avtodopolnenie-i-bystrye-ispravleniya\">Навигация, автодополнение и быстрые исправления\u003C\u002Fh3>\n\nПроект настроен и запущен, можно переходить к коду. OpenIDE понимает связи между файлами, символами и элементами фреймворков: от использования можно перейти к объявлению, а настроенные в проекте алиасы учитываются при навигации и импортах.\n\nВо фронтенд-проекте та же навигация продолжается за пределами `.js` и `.ts`. Из компонента можно перейти к шаблону и стилям, а из имени класса в разметке к соответствующему правилу в CSS. Если значение вынесено в переменную, переход к определению покажет, где она объявлена и чему равна.\n\nТо же самое работает при выборе CSS-переменных. Достаточно начать вводить имя, например `radius`, и редактор покажет подходящие радиусы, цвета и отступы из проекта. Так проще использовать уже заведённую переменную, чем вспоминать её точное название или ещё раз писать значение руками.\n\n\u003Cvideo src=\"https:\u002F\u002Fstorage.yandexcloud.net\u002Famplicode-site\u002Farticles\u002Fopenide-js-ts-support\u002Fgo-to-css.mp4\" controls muted loop playsinline width=\"100%\" poster=\"{{strapiUrl}}\u002Fuploads\u002Fcover_javascript_i_typescript_v_openide_8b917dda86.webp\" preload=\"none\">\u003C\u002Fvideo>\n\nАвтодополнение понимает и сами стили. При вводе `animation` редактор подсказывает свойства и имена keyframes из проекта, включая только что созданные. После подключения файла его миксины появляются в подсказках для `include`.\n\nПроверки Stylelint работают в том же редакторе. Ошибка подсвечивается сразу, рядом доступны быстрые действия: исправить код, отключить правило или открыть документацию. Ради простой правки не нужно отдельно запускать линтер и искать нужную строку в его выводе.\n\n![]({{strapiUrl}}\u002Fuploads\u002F0ee104a097e539a60dce51270fdd6536_d122a01ecd.webp)\n\n\u003Ch3 id=\"podderzhka-react-angular-vue\">Поддержка React, Angular, Vue\u003C\u002Fh3>\n\nПомимо базовой поддержки языка (которая включается через отдельную тему Frontend\u002FWeb Dark\u002FLight), IDE также должна понимать ещё и структуру фреймворков. В OpenIDE поддержаны React и Angular: компоненты, шаблоны, стили, навигация между ними и автодополнение.\n\nВ Angular новый компонент можно создать через schematic из контекстного меню. Достаточно выбрать тип, задать имя, и IDE создаст нужные файлы. В импортах при этом можно использовать настроенные в проекте алиасы вместо длинных относительных путей.\n\n\u003Ch3 id=\"http-klient-proveryaem-rabotu-s-api\">HTTP-клиент: проверяем работу с API\u003C\u002Fh3>\n\nПосле запуска проекта часто нужно проверить API. Для Node.js-бэкенда это может быть только что написанный эндпоинт, для фронтенда ответ сервера или контракт новой ручки. В OpenIDE для этого встроен [HTTP-клиент Connekt](https:\u002F\u002Famplicode.ru\u002Fhttp-client\u002F).\n\nЗапросы в Connekt хранятся в репозитории как обычные скрипты. Для них можно завести несколько окружений, например local и stage, и запускать один сценарий на разных стендах. Запрос попадает в код-ревью вместе с остальными изменениями и после коммита становится доступен всей команде. Его не приходится переносить вручную из личной коллекции запросов.\n\n![]({{strapiUrl}}\u002Fuploads\u002F6db8f490d737dd770c3bbaeef5a088bb_a4d5bdf1e6.webp)\n\nВсе возможности встроенного HTTP-клиента можно изучить на лендинге, а также в обучающем видео \"[Тестирование API простыми словами + практика | Postman, Connekt](https:\u002F\u002Ft.me\u002Fopenide_official\u002F99)\".\n\n\u003Cdiv class=\"video-player\" data-youtube=\"TXUyoVP9CpA\" data-vk=\"-230816739_456239021\" data-rutube=\"ec3354160046501e9a970648d73caefd\" data-rutube-key=\"5y_t1rK0be5q_2gFu0g6Vg\">\u003Ciframe src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FTXUyoVP9CpA\" width=\"100%\" height=\"400\" frameborder=\"0\" allowfullscreen loading=\"lazy\">\u003C\u002Fiframe>\u003C\u002Fdiv>\n\n\u003Ch3 id=\"git-klient\">Git-клиент\u003C\u002Fh3>\n\nКогда запросы проверены, изменения остаётся посмотреть в диффе и закоммитить. Для этого тоже не обязательно открывать отдельный инструмент. В [OpenIDE](https:\u002F\u002Fopenide.ru\u002F) есть дифф, blame, история, работа с ветками и интерактивный rebase.\n\n![]({{strapiUrl}}\u002Fuploads\u002Fb00432f426ba57804d97ac45017ba135_9b4eaef5d2.webp)\n\nКонфликты разбираются в отдельной панели слияния, где видны обе версии и итоговый файл. Там же можно создать ветку, сделать коммит или выполнить merge. В результате весь путь от изменения кода до готового коммита остаётся внутри IDE.\n\n![]({{strapiUrl}}\u002Fuploads\u002Fe5a15faa3b45d88831c62915e20c687a_b285988d18.webp)\n\n\u003Ch3 id=\"debagger-javascript-i-typescript\">Дебаггер JavaScript и TypeScript\u003C\u002Fh3>\n\nУже готовы обычные, условные и логирующие брейкпоинты, пошаговое выполнение, просмотр стека и переменных. Можно отлаживать JS\u002FTS-файлы и тесты, запускать отладку в Chrome или подключаться к уже запущенному процессу в режиме attach.\n\nТакже добавили интерактивную консоль внутри отладочной сессии, REPL для отладки в Chrome и автодополнение при настройке условных брейкпоинтов.\n\nИз ближайших задач в бэклоге: добавить паузу выполнения и несколько брейкпоинтов в одной строке. Дальше планируем расширять инструменты отладки в Chrome, добавлять работу с загруженными ресурсами, DOM, CSS и профилированием.\n\n\u003Cvideo src=\"https:\u002F\u002Fstorage.yandexcloud.net\u002Famplicode-site\u002Farticles\u002Fopenide-js-ts-support\u002Fdebugging-js-video.mp4\" controls muted loop playsinline width=\"100%\" poster=\"{{strapiUrl}}\u002Fuploads\u002Fcover_javascript_i_typescript_v_openide_8b917dda86.webp\" preload=\"none\">\u003C\u002Fvideo>\n\n\u003Ch3 id=\"kak-poprobovat\">Как попробовать?\u003C\u002Fh3>\n\n![]({{strapiUrl}}\u002Fuploads\u002F06f1959f95ad771dc943f05d8f1e155c_a3c797f2d2.webp)\n\n[OpenIDE](https:\u002F\u002Fopenide.ru\u002F) бесплатна навсегда, а Pro версию [можно попробовать](https:\u002F\u002Fopenide.ru\u002Fdownload\u002F) в течение 60 дней без регистрации. Часть описанных возможностей доступна и в обычной версии, все возможности без исключения в OpenIDE Pro.\n\nЕсли вам не хватает конкретного сценария или что-то работает не так, [напишите нам на почту](https:\u002F\u002Fopenide.ru\u002Fcontacts), в [чат](https:\u002F\u002Ft.me\u002Fopenide_chat) или в комментарии тут. Сообщения с фидбеком напрямую влияют на приоритеты разработки.\n\n---\n\n_Впервые опубликовано на [Хабре](https:\u002F\u002Fhabr.com\u002Fru\u002Fcompanies\u002Fhaulmont\u002Farticles\u002F1077114\u002F)._\n",[20],{"title":21,"links":22},"Содержание",[23,26,29,32,35,38,41],{"label":24,"href":25},"Старт проекта: Node, менеджеры пакетов и линтеры","#start-proekta-node-menedzhery-paketov-i-lintery",{"label":27,"href":28},"Навигация, автодополнение и быстрые исправления","#navigacziya-avtodopolnenie-i-bystrye-ispravleniya",{"label":30,"href":31},"Поддержка React, Angular, Vue","#podderzhka-react-angular-vue",{"label":33,"href":34},"HTTP-клиент: проверяем работу с API","#http-klient-proveryaem-rabotu-s-api",{"label":36,"href":37},"Git-клиент","#git-klient",{"label":39,"href":40},"Дебаггер JavaScript и TypeScript","#debagger-javascript-i-typescript",{"label":42,"href":43},"Как попробовать?","#kak-poprobovat","2026-11-12T11:29:32.774Z","2026-11-13T12:20:59.394Z","2026-11-13T12:20:59.488Z",{"id":48,"documentId":49,"firstname":50,"lastname":51,"createdAt":52,"updatedAt":53,"publishedAt":54,"slug":55,"photo":56},40,"yuewij1jc3qoxmkvsh2mpeny","Георгий","Власов","2026-02-17T11:40:25.168Z","2026-11-13T11:49:25.324Z","2026-11-13T11:49:25.371Z","georgij-vlasov",{"id":57,"documentId":58,"name":59,"alternativeText":60,"caption":60,"width":61,"height":61,"formats":60,"hash":62,"ext":63,"mime":64,"size":65,"url":66,"previewUrl":60,"provider":67,"provider_metadata":60,"createdAt":68,"updatedAt":68,"publishedAt":68,"focalPoint":60},1359,"jt1gpp4kqcyzwuwfhzj1c1vc","Gosha_ab88bd0ec5.webp",null,96,"Gosha_ab88bd0ec5_972867885d",".webp","image\u002Fwebp",2.14,"\u002Fuploads\u002FGosha_ab88bd0ec5_972867885d.webp","local","2026-11-13T11:47:15.450Z",{"id":70,"documentId":71,"name":72,"alternativeText":60,"caption":60,"width":73,"height":74,"formats":75,"hash":108,"ext":63,"mime":64,"size":109,"url":110,"previewUrl":60,"provider":67,"provider_metadata":60,"createdAt":111,"updatedAt":111,"publishedAt":111,"focalPoint":60},1212,"jib426ullskhvrtvh1sl0rdx","cover-javascript-i-typescript-v-openide.webp",1672,941,{"thumbnail":76,"large":84,"medium":92,"small":100},{"name":77,"hash":78,"ext":63,"mime":64,"path":60,"width":79,"height":80,"size":81,"sizeInBytes":82,"url":83},"thumbnail_cover-javascript-i-typescript-v-openide.webp","thumbnail_cover_javascript_i_typescript_v_openide_8b917dda86",245,138,4.02,4018,"\u002Fuploads\u002Fthumbnail_cover_javascript_i_typescript_v_openide_8b917dda86.webp",{"name":85,"hash":86,"ext":63,"mime":64,"path":60,"width":87,"height":88,"size":89,"sizeInBytes":90,"url":91},"large_cover-javascript-i-typescript-v-openide.webp","large_cover_javascript_i_typescript_v_openide_8b917dda86",1000,563,26.33,26328,"\u002Fuploads\u002Flarge_cover_javascript_i_typescript_v_openide_8b917dda86.webp",{"name":93,"hash":94,"ext":63,"mime":64,"path":60,"width":95,"height":96,"size":97,"sizeInBytes":98,"url":99},"medium_cover-javascript-i-typescript-v-openide.webp","medium_cover_javascript_i_typescript_v_openide_8b917dda86",750,422,18.34,18336,"\u002Fuploads\u002Fmedium_cover_javascript_i_typescript_v_openide_8b917dda86.webp",{"name":101,"hash":102,"ext":63,"mime":64,"path":60,"width":103,"height":104,"size":105,"sizeInBytes":106,"url":107},"small_cover-javascript-i-typescript-v-openide.webp","small_cover_javascript_i_typescript_v_openide_8b917dda86",500,281,10.74,10740,"\u002Fuploads\u002Fsmall_cover_javascript_i_typescript_v_openide_8b917dda86.webp","cover_javascript_i_typescript_v_openide_8b917dda86",59.41,"\u002Fuploads\u002Fcover_javascript_i_typescript_v_openide_8b917dda86.webp","2026-11-13T11:43:52.452Z",[113],{"id":114,"documentId":115,"title":116,"published":117,"weight":118,"slug":119,"createdAt":120,"updatedAt":121,"publishedAt":122,"color":60},4,"ap54riuwcv7sj63auhmb4i6d","Гайды",true,3,"guides","2026-11-12T11:20:31.298Z","2026-11-12T11:22:44.141Z","2026-11-12T11:22:44.122Z",{"pagination":124},{"page":125,"pageSize":126,"pageCount":125,"total":125},1,25,{"data":128,"meta":147},[129,135,141],{"published_date":130,"id":131,"documentId":132,"title":133,"slug":134},"2026-09-28",327,"lruxexelyn19uak89r6dney5","Что такое OpenSpec? Полный гайд по Spec-Driven Development","chto-takoe-openspec-polnyj-gajd-po-spec-driven-development",{"published_date":136,"id":137,"documentId":138,"title":139,"slug":140},"2026-09-10",326,"ymtfa6pslevvkrwnohdfbi1u","Как не потерять интеграцию с Docker в IDE после блокировки JetBrains","kak-ne-poteryat-integracziyu-s-docker-v-ide-posle-blokirovki-jetbrains",{"published_date":142,"id":143,"documentId":144,"title":145,"slug":146},"2026-08-06",363,"x62phzooqpahmwnv33cijbmm","DB-клиент OpenIDE: от подключения к базе до EXPLAIN и экспорта данных","db-klient-openide-ot-podklyucheniya-k-baze-do-explain-i-eksporta",{"pagination":148},{"page":125,"pageSize":118,"pageCount":149,"total":150},6,16,1794584598483]