IT-инфраструктура для бизнеса и творчества
Разработка
Nazigul Jusupova

Microsoft выпустила веб-версию редактора кода VS Code Статьи редакции

Сервис работает без установки приложения или расширений для браузеров.

  • В веб-версии можно просматривать и редактировать локальные файлы, создавать заметки в Markdown.
  • На vscode.dev можно создавать клиентские приложения на HTML, JavaScript и CSS вместе с инструментами браузера для отладки.
  • Редактировать код через браузер можно и c тех компьютеров, которые не позволяют установить приложение VS Code, например, в Chromebook.
  • Также редактор можно использовать в iPad: загружать и скачивать файлы, а также удалённо открывать репозитории с помощью встроенного расширения GitHub Repositories.
  • В VS Code для браузера встроены расширения GitHub Repositories , Codespaces и Pull Request.
(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ { name: 'camera', url: `${cdnUrl}CameraCat`, text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', link: 'https://vc.ru/selectel/306690', num: 3 }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', num: 1 }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', num: 2 } ] let buttonCycle = document.querySelector('.button--cycle') let buttonChoose = document.querySelector('.button--choose') let buttonMobile = document.querySelector('.button--mobile') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) buttonChoose.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) buttonMobile.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { sendEvent(`Promo ${articles[currentArticleNumber].num} Right`, 'Click') if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?3' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } const sendEvent = (label, action = 'Click') => { const value = `SelectelDIY — loc: Footer — ${label} — ${action}`; if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите научим?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg?3`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
54 комментария
Популярные
По порядку
Написать комментарий...
Удивленный звук

Кстати, в гитхабе уже больше месяца точно работает. Жмешь точку на клаве, находясь в репозитории, открывается вс-код для редактирования.

17

Объясните мне кто шарит - чем это лучше полноценной IDE на компе? Чето я сомневаюсь что много разрабов юзает хромбуки

8

Также редактор можно использовать в iPad

Тут преимущество и все. Прошки производительные, а работать на них никак, видимо смотрят на решения в этом сегменте.

8

Ну, это решение тоже не даёт полноценно работать на айпадах, потому что оно страшно ограниченное: редактор кода есть, но нет ни терминала, ни отладчика, ни ещё некоторых штук десктопной VS Code.

Скорее это такой онлайн-блокнот для кода, чтобы глянуть/поправить пару файлов с айпада или чужого компа, когда основное рабочее устройство не под рукой. ред.

11

Отлаживать можно ремонт, например при комитете в репу запускать сборку, но да это гораздо дольше чем в локальном окружении, хотя мне кажется скоро подтянуться сервисы позволяющие иметь полноценное и быстрое (в плане отладки) окружение в вебе.

1

Вроде бы такой «полноценный» сервис уже есть у того же самого MS в виде GitHub Codespaces — вот там окружение гораздо функциональнее, но за деньги (потому что там за ним стоит виртуалка, а не просто в браузере у пользователя всё выполняется)

3

Виртуалки так нужны для разработки! Без них ничего не запустишь, а npm/node нужны, не говоря уже об остальном.

Могли бы интегрировать все инициативы на базе GitHub

0

https://www.gitpod.io/
https://github.com/features/codespaces

Codespaces давно использую (дали доступ к бете).

0

или для интервью :)

0
Удивленный звук

Вот, кстати, да. А то есть айпад, а кодить на нем никак(

1

Иногда своего кампуктера под рукой нет
+ удобно для обучения как на стационарных классовых компах, так и как встройка в какие-либо учебные материалы

5

VSCode - не IDE.

0

Для js из коробки вполне себе ide

7

плагинами приблизится вполне. Контейнерами окружение, набор нужных плагинов (вплоть до деплоя) и вуаля - IDE

4

Чем же она не дотягивает для js?

2

Хз как для полноценной работы, не думею, что хорошая идея.
Но github.dev использую, чтоб посмотреть какой-либо репозиторий, который не хочется клонировать, потому что он и не нужен локально.
Раньше github1s.com использовал для этого.

А до этого вообще sourcegraph.com ред.

1

Зашёл на гитхаб быстро что-то поправил и проверил, не нужно ничего устанавливать. Для простых или учебных проектов. Либо для обучения онлайн или собеседований - совместный доступ к коду. Вариантов куча - это только начало.

1

Немного возможно не привычно. В плане как сама IDE голый vs code это и так электрон с парой очень неплохих js библиотек.

0

По моему его вообще никто не юзает

0

А кто говорит, что лучше. Это для другого паттерна использования.

0

Комментарий удален по просьбе пользователя

0
Удивленный звук

У меня на корпоративном ноуте заблочены частично сетевые соединения и синхронизировать с гитхабом не получается.
А тут такой подарок!

Нужно как правило для редактирования скриптов, для просмотра логов.

0

Без установки с чужого компа порой нужно что-то отладить. Плюс почему бы это раньше нельзя было сделать)) VS Code по большей части написан на JS и упакован в Electron. По факту он и раньше был сайтом

0

Так как работает в браузере, то и наследует все "болячки" браузера, нативный вариант будет быстрей.

Хромбуки как и все остальное от гугла не продаётся в большинстве стран мира.

0

Ушел домой, пришла срочная задача пофиксить на проде что-то. Открыл веб редактор, пофиксиксил кое как, сделал коммит, а дальше ci уносит на прод. Применение узкое, но есть

0

Удивительно что только сейчас, ведь сам вскод это web-приложение обернутое в электрон. Большая часть кода уже есть

11

Ну всё же оно диск использует и процессы запускает, а браузеры это не умеют из за безопасности.

0

Ну Монако давно есть, просто как библиотека, а не как продукт

https://microsoft.github.io/monaco-editor/

0

JetBrains навсегда!

8

Да ну нее, шляпа тормозная на джаве ред.

3

640 GB должно хватить всем. В т. ч. и этой шляпе.
И да, JS прям быстрый по сравнению с Java (sarcasm).

7

Сарказм неуместный, почитайте что-нибудь про оптимизации V8 и свежие сравнения производительности вместе с php/go/java, там все отлично. Вероятней всего вы имеете в виду прожорливый рендер – это другой вопрос (но UI VSCode у меня за 5 лет не подвисал, в отличии от вебшторма, с которым на большом проекте можно было физически ощущать как шевелятся шестерёнки под капотом). Ну и джетбрейнс нужно ежегодно заносить, что при отсутствии киллерфич странно. ред.

2

Там же беспл версия тоже есть

0

JS сейчас вполне быстрый. В некоторых бенчмарках вполне себе обходит Java:
https://benchmarksgame-team.pages.debian.net/benchmarksgame/performance/mandelbrot.html

1

А Электрон какой шустрый, зашибись

1

Повторюсь, на практике VSCode ощутимо быстрее. Будучи обвешанный всеми необходимыми плагинами и ничем функционально не уступающий бесплатной версии шторма (годы провёл и там и там, вполне могу сравнить).

2

"ничем функционально не уступающий бесплатной версии шторма"

А вы на каком языке программируете? Действительно не видели разницу между тем насколько глубоко и точно Идея лезет в дерево кода и как умеет рефакторить? В VCS рефактор это всегда русская рулетка, часто либо не срабатывает совсем, либо портит код.

0

JS/TS, C, Dart. Последние несколько лет чего только не рефакторили в команде (у всех vscode), проблем не было. Когда-то, помню, было юношеской болезнью редактора, сейчас всё шикарно. ред.

0

Так VCS не тормозной потому что тупо не делает то что делает Idea.

1

В целом это офигенский шаг. Там даже плагины все есть.
Динамика использования IDE (да да, знаю что он "не") показывает рост VSC, а тут они охватят весь сегмент аля хромобуков и т.п.

6

Ещё бы npm install научили это все делать, было бы уже намного интереснее

0

Браузер крякнет, когда в него полгига node_modules начнут запихивать.

15

Для этого есть GitHub Codespaces https://www.youtube.com/watch?v=T4oSGgcmhNI

6

Огонь

0

Комментарий удален

Комментарий удален

Если браузерная версия смогла бы открывать удаленную сессию по ssh или wsl, то у нас и терминал был бы, и исполнение. Но это, наверное, слишком уже было бы хорошо.

0

Да оно как бы не браузерная через ssh скомпилить не всегда может, то все собралось, то фиг вам какието файлы упорно не хотят обновляться, то опции из файла когфигурации пернстает видеть. Это вообще большая проблема у всех. Казалось бы элементарная задача, но все покладают болт.

0

Не встречал такого. Наверняка, очень раздражают такие проблемы.

0
Удивленный звук

Отличная новость! А расширения туда можно устанавливать?

0

Для кого как и дело тут в удобстве. Для меня, конечно, это будет дикостью на первое время

0

Только редактирование кода)

0
Читать все 54 комментария
Глава СберМаркета Асан Курмангужин запустил подкаст Asan Talks в YouTube

В выпусках Асан берет интервью у топ-менеджеров крупных компаний и обсуждает вопросы саморазвития и лидерства

Российская сеть магазинов одежды Gloria Jeans запланировала выйти на рынки Европы и США — «Ведомости» Статьи редакции

Компания планировала выйти на зарубежные рынки ещё в 2018 году, но тогда она отставала в развитии онлайн-бизнеса, считает эксперт.

Как столярная мастерская из Рязани начала продавать товары по всему миру

И прошла путь от мебели ручной работы к деревянным игрушкам.

OPS-инструкция для стартапа по доставке: как выжить и наладить операционку

В преддверии первой годовщины запуска сервиса гиперлокальной доставки Прямиком, который развивает наша компания, вспомнили с ребятами из операционного отдела, как всё начиналось. Андрей Резник, региональный менеджер Master Delivery, и Анатолий Голованец, старший менеджер по франчайзингу, собрали ТОП-5 советов для тех, кто сейчас в самом начале.

АФК «Система» запустит в космос около 100 спутников в течение двух лет Статьи редакции

Компания планирует развивать сервис спутникового интернета.

Продвижение торгового центра в социальных сетях: стратегия, примеры, медиаплан

Студия Чижова рассказывает, как продвигать торговые центры в социальных сетях + даёт медиаплан для бизнеса, который поможет рассчитать окупаемость.

Выделяем основные черты, с которыми должен ассоциироваться бренд
«Циан» запретил сдавать квартиры «только славянам»: теперь на сайте нельзя указывать расовые предпочтения Статьи редакции

Отредактировать объявления необходимо до 1 февраля 2022 года.

А у вашего бренда есть Tone of voice?

Четкий посыл и схожие с клиентом ценности. Это поможет выделиться, а значит — заинтересовать аудиторию. Разбираемся в понятии Tone of voice и в том, как его сформировать.

TikTok-блогер Yan Dilan снимет клип на песню «Детство»

Блогер, рэпер, продюсер, актер, сценарист, участник Высшей лиги КВН и сторителлер Артур Диланян, ставший популярным в социальных сетях под псевдонимом Yan Dilan, привлекает инвестиции на съемки видеоклипа на новую песню «Детство» с помощью инструмента краудлендинга.

Точка добавила вебхуки в API

Клиенты смогут получать моментальные уведомления о своём бизнесе.

Как мы потеряли 500 000 рублей на медиаканале в Telegram

А потом сделали бота с одной функцией, которым пользуется 10 тысяч человек.

null