WebStorm 2021.3: новинки в JavaScript, автодополнении HTML-кода, удаленная разработка

21 Января 2022

Разработчик JetBrains выпустил новую версию программы WebStorm. Релиз 2021.3 получил масштабные улучшения, ожидаемые пользователями. Обновилась специфика работы в дистанционной разработке, усовершенствовалось автодополнение кода HTML, изменилось взаимодействие с программной платформой Deno, много других нововведений.

Обзор главных новинок в обновленной IDE:

Как оптимизировались языки программирования JavaScript, TypeScript

В монорепозиториях теперь работать проще, уменьшилось время индексации файлов JS. Появилась опция быстрой корректировки при загрузке узлов ES6, приватные поля ES2022.

Какие новинки появились в фреймфорках

Управляйте зависимостями проекта без трудностей, усовершенствованная платформа Deno, поддерживается 13 релиз Angular, улучшилось автоматическое дополнение кода HTML.

Усовершенствования в дистанционной разработке

Модернизирована технология удаленной разработки посредством встроенной платформы JetBrains Gateway. Обновился компилятор Node.js, определенные качественные изменения произошли в работе прокси-серверов, подключений через SSH.

Изменения во взаимодействии приложений WebStorm - Docker

Улучшилась система соединения приложений, обновились некоторые действия, произошло объединение с инструментом Minikube, поддерживается Compose V2.

Улучшения в интерфейсе

Панель Run теперь разделяется, появились новые панели, а для поиска используется машинное обучение.

Механизм управления версиями

В программе изменилось регулирование версий, улучшилось отправление коммитов, появилась новая панель и прочие изменения.

Теперь детально опишем каждое из обновлений WebStorm 2021.3.

Основные изменения в языках программирования JavaScript и TypeScript

Монорепозитории, оптимизированная индексация файлов в JS

Импорты, которые в автоматическом режиме добавлены, в свежем варианте программы согласуются со структурой проекта. Таким образом, обработка в папках происходит совместно с package.json обособленным комплектом. Файлы в JS теперь индексируются на 20% быстрее. При наличии в проекте TypeScript улучшения могут быть менее заметны.

Рефакторинг и быстрая корректировка частных полей ES2022

Загрузка сегмента ES6 посредством URL в import откроет функцию быстрого исправления. ES6 и зависимости загрузятся и обеспечат связь с итоговой работой в виде хранилища. Для загрузки достаточно кликнуть на import, Alt+Enter, далее выбрать Download module. Функция работы с приватными полями появилась 3 года назад. Но в ее основе был прежний принцип TC39, поэтому нарушалось соответствие нормам. В новой версии WebStorm поддерживаются приватные поля типа ES2022. При использовании приватных наименований, которые начинаются с #, рабочий процесс будет правильным.

Как работает рефакторинг (см.рис.ниже)

Две команды-intention в создании кода

Объекты, которые разделены запятой, распределите в пределах строк. Команда intention применима к литералам массивов, перечням элементов, XML, HTML и JSX и пр. Чтобы активировать эти команды на определенных объектах кликните / Alt+Enter, затем вызовите команду Put comma-separated elements on one line или Put comma-separated elements on multiple lines.
Названия действий зависят от формата XML, HTML и JSX - Put attributes on separate lines или Put attributes on one line. Еще одно действие-intention запустили для комментирования генератора JSDoc. В программе Вы теперь сможете посредством одного клика поменять однострочные комментарии или примечания на нескольких строках на формат JSDoc.

Улучшения при работе с типами js и .d.ts

В частности, теперь проще искать аналогии между JavaScript и TypeScript, появились иконки в редакторе, что повышает удобство при навигации.

Новое в фреймворках и методиках

Этот релиз предполагает упрощенные возможности в работе с зависимостями. Обновление npm-комплектов до свежего варианта происходит в редакторе. Для этого необходимо запустить package.json, выбрать версию пакета, затем кликнуть / Alt+Enter Update ‘имя пакета’ to the latest version. При выборе можете воспользоваться быстрым исправлением. Блок Node.js and NPM разработчики изменили, теперь он называется Node.js.

Улучшенное взаимодействие программы с платформой Deno

В силу неэффективности предыдущего релиза в плане объединения с плагином Deno внесли определенные обновления. Функционал переделан, теперь взаимодействие с плагином Deno подразумевает использование службы Deno LSP. И поэтому в программе теперь поддерживается import_map.json

WebStorm поддерживает 13 версию вебфреймворка Angular

Это важное изменение в версии 2021.3, поскольку функция поддержки Angular 13 ранее была не активна из-за изменений в политиках Angular. Теперь обновленный вебфреймворк доступен для работы.

Как улучшилась функция autocomplete HTML

Во время активации автодополнения кода HTML, когда Вы прописываете тег/аббревиатуру, программа предлагает лучшие вариации. К тому же улучшилась работа функции autocomplete для пользователей системы мнемоника.

Типы TScript в JS-фреймворках и обновленные опции HTTP-клиента

В этом релизе WebStorm проверяйте типы React, Vue. Среда разработки оповестит при использовании неправильного типа.
Кроме того, усовершенствован вмонтированный HTTP-клиент. Среди новых обновлений: двоичный код, поддерживающий ответы, передача итога в определенный файл/директорию, текст, поток JSON, контроллер запросов HTTP.

Важные новинки в дистанционной разработке

Пользователи WebStorm больше всего ждали обновлений в удаленной разработке. Работа с проектом на удаленном устройстве с включенным бэкендом IDE ничем не отличается от работы на системном ПК. Дистанционная разработка происходит в этом плагине через JetBrains Gateway. Через него запускаются дистанционные бэкенды, при этом среду разработки на локальное устройство можно не устанавливать.
Примечание: функциональные возможности дистанционной разработки сейчас представлены в бета-версии. Компания JetBrains продолжает трудится над дальнейшими качественными улучшениями.

Дистанционный контроллер Node.js

Node.js настроен в Docker применяется через объединение программы WebStorm с атрибутами JS. IDE в новом варианте подразумевает взаимодействие контроллера с pnpm, Jest, ESLint, yarn, npm.

Прокси для закрепления с сетевым SSH протоколом

Прокси-сервер HTTP/ SOCKS подойдет для системы SSH. Вы можете подобрать вид прокси, обозначить название хоста, наименование порта, запустить вход по логину и паролю.

Новые обновления в интеграции Webstorm-Docker

Быстрое и удобное соединение с программой Docker

Для подключения два раза кликните на нужный блок, затем нажмите в macOS или Ctrl+Enter в Windows и Linux. Такая же комбинация клавиш подходит для активизации Start container.

Удаление с помощью Clean up

Новая опция Clean up позволит IDE удалить ненужные элементы, которые не используются. Это можно сделать нажатием правой кнопкой мыши на блоке Networks, Volumes, Containers либо Images, затем выбрать Clean up. С помощью этого действия, используя корневой блок Docker можно очистить все ненужные элементы.

Доступ к Docker из Minikube и взаимодействие с Compose V2

Подключайтесь к платформе Docker прямо из Minikube. Это просто сделать – достаточно выбрать в Preferences/Settings | Build, Execution, Deployment кнопку Minikube. Рядом в текстовой ячейке отобразятся доступные подключения docker-daemon. В программе WebStorm используйте инструмент для управления контейнерами Compose V2. Это позволит ввести Docker Compose в тип docker compose (без дефиса). Для активации функции выберите Preferences/Settings | Build, Execution, Deployment | Docker | Tools с установлением подтверждения Use Compose V2.

Что изменилось в слоях, хранилищах образа

Применяя слои сможете контролировать действия, которые применяются к образам. Для перехода необходимо выбрать образ, открыть панель Layers. На панели имеется детальная информация о состоянии слоев. Контейнеры при необходимости сохраните в виде образов.

Podman, как альтернатива при работе с подами, контейнерами, образами

Перед использованием Podman в среде разработки нужно настроить соединение. Как только в операционной системе установится утилита, Вы сможете с ней работать, перейдя Preferences/Settings | Build, Execution, Deployment | Docker.

Особенности рабочего процесса в среде разработки (IDE)

При запуске нескольких схем есть возможность разделить панели Run. Это можно сделать путем перетаскивания панели в пространство, которое Вы выделили. Для возврата в исходное положение перетяните панель назад или кликните Unsplit.

Что нового в окне Bookmarks

В программе ранее Вы могли заметить термины Favorites и Bookmarks с похожим функционалом. Сейчас для удобства осталось окно Bookmarks. Оно видоизменилось, появилась отдельно вкладка для закладок.
Это окно предназначено для важных папок, файлов, классов, их «важность» можно пометить нажатием клавиш F3 в macOS или F11 в Windows и Linux.
Закладки перемещаются в определенный раздел с именем, которое совпадает с проектом. Этот раздел среда разработки автоматически формирует, все элементы сохраняются там. Последние закладки находятся вверху в списке, при желании сортировку можете изменить на свое усмотрение.

Предварительный просмотр в Show Usages

При вызове команд F7/Ctrl+Alt+F7 или /Ctrl для просмотра определенного символа есть возможность запустить предварительный просмотр исходного кода посредством клика на квадратный значок.

Машинное обучение в Search Everywhere

Технология машинного обучения применяется в случае активации поискового действия в Search Everywhere. Эта методика подразумевает хронику применения действий отдельных пользователей, частоту их применения, продолжительность поисковых действий, его наименование и пр.

Усовершенствованный терминал

В свежей версии программы терминал обладает новым API ConPTY для Windows. Также поддерживается палитра из 24-разрядных цветов. Опция упреждающего ввода предполагает модификации в текстовых блоках, они выделяются серым цветом. Ввод кода происходит в одинаковом темпе на локальном и удаленном устройстве.

Расчёт Evaluate Expression в отладчике

Упростился поиск функции, предусматривающей оценку и расчет выражений. Это поле появилось непосредственно во вкладке Debug, что повысило удобство вычислений.

Встроенный блок для работы с ошибками

JetBrains разработал новый инструмент, который позволит определять и решать недочеты, сбои, мешающие работе среде разработки. При появлении ошибок достаточно запустить Repair IDE (меню Файл), и следовать предложенной инструкции.

Как обновился блок специальных возможностей

В версии 2021.3 выключено появляющееся окно с инструментами, всплывающая вкладка, с помощью которой можно быстро просмотреть документацию. Панель Go to Declaration or Usages работает уже без ошибок.
Улучшения специальных возможностей появились и на macOS. В частности, устранены проблемы с VoiceOver. И пользователи теперь смогут генерировать проекты, используя опцию чтения с экрана.

Возможность трансформации шрифта

Теперь в приложении можете менять размер шрифта посредством колеса мыши. И эта функция работает для всех активных файлов.

Улучшения в администрировании версиями

Конфигурация установок стала простой и понятной. Перечень настроек находится в разделе Version Control, доступ к нему можете получить, кликнув на необходимый объект. Качественно модифицирован экран Git. Установочные действия сгруппированы по разделам соответственно действиям: Commit, Push и Update. В дополнение появился раздел Directory mappings. Сопутствующие команды активированы изначально. Раздел Background из программы удалили.

Push All up to Here для отправки в репозиторий всех коммитов

Теперь в программе появилась возможность отправлять в репозиторий коммиты, даже те, которые выбранные на панели Log в Git.

Панель Changes для отображения различия среди коммитов

Для открытия окна необходимо перейти в окно Log, далее нажатием правой кнопки мыши выберите Compare with Local.

Возможность выровнять строку в сопоставлении

В систему настроек интерфейса Diff был добавлен новый элемент Align Changes Highlighting. С помощью настройки проще читать содержимое экрана, можно выровнять строки, не изменяя их, чтобы они находились рядом. Так будет видна информация о добавлении кода.