Что нового в WebStorm 2021.2

Вы просили нас доработать функцию Live Edit, и мы это сделали! Теперь WebStorm может автоматически обновлять страницы в браузере, когда вы изменяете и сохраняете файлы HTML, CSS и JavaScript. Чтобы использовать эту функцию, откройте в редакторе файл HTML, наведите на него курсор и нажмите на значок нужного браузера (поддерживаются любые браузеры).

Вы хотите, чтобы при сохранении изменений выполнялись определенные операции? Теперь в WebStorm 2021.2 обеспечена полная поддержка этого процесса. Мы переработали все существующие функции, объединили их в одном месте и добавили ряд новых возможностей, в том числе форматирование кода и оптимизацию импортов при сохранении изменений.

Знаете ли вы, что WebStorm умеет добавлять отсутствующие операторы импорта при вводе ES6-символов? Теперь то же самое возможно для модулей CommonJS: при автодополнении кода будет вставлен оператор require.

Теперь WebStorm полностью поддерживает использование синтаксиса TypeScript для комментариев JSDoc в файлах .js. Мы переработали и расширили существующую поддержку и устранили множество известных ошибок.

Нужно быстро добавить в код стрелочную функцию? Теперь вы можете заключить фрагмент кода в стрелочную функцию с помощью сочетания клавиш Ctrl+Alt+J. Также можно набрать arf и нажать Tab, чтобы развернуть шаблон и добавить пустую стрелочную функцию.

Вкладка предварительного просмотра, которую раньше можно было использовать только в окне Project, теперь доступна и во время отладки приложения. Чтобы включить эту функцию, перейдите в Preferences / Settings | Editor | General | Editor Tabs и поставьте флажок Enable preview tab. Благодаря этому вам не придется открывать в редакторе множество файлов: WebStorm откроет файлы один за другим в одной вкладке.

Вам больше не нужно тратить время на рефакторинг отдельных значений и функций useState — WebStorm переименует их самостоятельно. Установите курсор на значение состояния и нажмите Shift+F6 или выберите Refactor | Rename в контекстном меню.

Добавлять новые зависимости проекта в package.json теперь еще проще благодаря автодополнению кода для частных npm-пакетов. WebStorm позволяет посмотреть информацию о свежих версиях пакета точно так же, как для публичных пакетов.

Хотите запустить тесты, чтобы проверить код перед коммитом? Теперь у вас есть для этого новая функция. Нажмите на значок шестеренки в окне Commit, выберите Run Tests, а затем задайте нужные параметры запуска. WebStorm проверит файлы и предупредит о любых проблемах.

Начиная с этой версии, пользовательский интерфейс WebStorm полностью локализован на китайский, корейский и японский языки. Локализованный интерфейс можно скачать в виде плагинов с отдельными языковыми пакетами, которые легко установить в WebStorm через меню Preferences / Settings | Plugins.

Теперь упорядочить окна стало проще. Наведите курсор на заголовок окна, которое нужно переместить, и перетащите его в нужное место. Более того, точно так же можно вытащить окно за пределы основного окна IDE WebStorm.

А вы знаете, что проектам можно назначить пользовательские значки? Теперь мы упростили этот процесс. Щелкните правой кнопкой мыши на проекте WebStorm в окне Welcome, выберите Change Project Icon… и загрузите файл SVG для этого проекта.

Вы больше не пропустите критически важные обновления продуктов в Toolbox App. WebStorm сообщит, что можно скачать новую версию, и предложит установить ее. Функция работает с Toolbox App 1.20.8804 или более поздних версий.

В диалоговом окне Preferences / Settings появился узел с расширенными настройками. Мы добавили несколько новых параметров, включая возможность установки левого поля в режиме Distraction-free. Кроме того, теперь можно быстрее переключаться между открытыми узлами с помощью стрелок в правом верхнем углу диалогового окна.