company_banner

WebStorm 2020.1: улучшения в интерфейсе, поддержка Vuex и запуск Prettier при сохранении файлов

    Всем привет! Мы рады представить вам первое крупное обновление WebStorm в этом году. В новой версии вы найдете много новых возможностей и долгожданных улучшений, включая поддержку Vuex и новую опцию для запуска Prettier при сохранении файлов.

    webStorm-2020-1-released

    Скачать 30-дневную пробную версию WebStorm 2020.1 на сайте или с помощью Toolbox App. Полную версию могут использовать обладатели действующей подписки на WebStorm или All Products Pack, а также бесплатно студенты и разработчики опенсорсных проектов.

    А сейчас давайте рассмотрим основные улучшения подробнее.

    Новый шрифт для работы с кодом


    На протяжении всего прошлого года мы разрабатывали специальный шрифт для работы с кодом, который бы помог нашим пользователям программировать с большим комфортом и свести напряжение глаз к минимуму. Результатом наших усилий стал JetBrains Mono, новый шрифт с открытым исходным кодом. Начиная с версии 2020.1, JetBrains Mono выбран по умолчанию в WebStorm и других наших IDE. Возможность включить другой шрифт, разумеется, также осталась.

    jetbrains-mono

    Более полезная быстрая документация


    WebStorm 2020.1 поможет вам быстрее находить соответствующую информацию о символе, т. к. быстрая документация теперь отображается при наведении курсора на этот символ, а не только при нажатии F1. Если в вашем коде есть проблема и WebStorm может помочь с ее решением, он также даст вам об этом знать, отобразив доступное быстрое исправление прямо во всплывающем окне с документацией.

    docs-on-hover

    При работе с JavaScript и TypeScript кодом быстрая документация покажет подробную информацию о типе и видимости символа, а также о том, где этот символ определен.

    ts-quick-docs

    Режим Zen для сфокусированной работы


    Новый режим Zen поможет вам полностью сосредоточиться на своем коде. Сочетая в себе два режима, Distraction Free и Full Screen, он позволяет быстро включить их оба и на время изолировать то, что может отвлечь ваше внимание.

    zen-mode

    Чтобы попробовать новый режим, перейдите к View | Appearance | Enter Zen Mode из основного меню WebStorm или используйте всплывающее окно Switch (Ctrl+` | View mode | Enter Zen Mode).

    Поддержка Vuex и Vue Composition API


    Vue.js набирает популярность, поэтому мы активно работаем над тем, чтобы сделать WebStorm самой полезной IDE для работы с этим фреймворком. На этот раз мы добавили два крупных улучшения.

    Начнем с того, что при работе с библиотекой Vuex вы увидите варианты автодополнения кода для символов Vue store и модулей при редактировании Vue-компонентов. WebStorm также поможет быстро перейти к определению геттеров, мутаций и действий.

    vuex-completion

    Во-вторых, поскольку уже можно использовать Composition API, доступный в грядущем релизе Vue 3, мы решили добавить его поддержку в WebStorm 2020.1.

    vue-composition-api-support

    Запуск Prettier при сохранении файлов


    Благодаря новой опции Run on save for files, вы можете применить форматирование Prettier ко всем файлам, указанным в настройках WebStorm и отредактированным в текущем проекте, при сохранении этих файлов — больше не нужно настраивать file watcher или пользоваться сторонним плагином.

    prettier-on-save

    Помощь с выявлением грамматических и стилистических ошибок


    Начиная с версии 2020.1 WebStorm поставляется в комплекте с Grazie, нашим инструментом для проверки орфографии, грамматики и стиля текста. Это поможет вам избежать грамматических ошибок при добавлении комментариев, коммитов и различных языковых конструкций.

    grazie

    По умолчанию Grazie включен только для английского языка и проверяет не все типы файлов на возможные грамматические ошибки. Вы можете добавить больше языков и изменить предустановленные настройки в Preferences/Settings | Editor | Proofreading (перейдите в раздел Grammar, если вы хотите настроить область проверок, посмотреть существующие правила и добавить исключения).

    Новые intention-действия и инспекции


    Как всегда, мы добавили несколько новых intention-действий и быстрых исправлений, чтобы помочь вам сэкономить время при работе с JavaScript и TypeScript кодом. Например, одно из новых intention-действий, доступное при нажатии на Alt+Enter, позволит быстро преобразовать существующий код в optional chaining и/или nullish coalescing.

    convert-to-optional-chaining

    Больше информации о новых intention-действиях и быстрых исправлениях доступно в релизном блог-посте (на английском).

    Поддержка последних версий популярных технологий


    В WebStorm 2020.1 вы найдете встроенную поддержку функциональности TypeScript 3.8, в том числе type-only imports/exports, private fields, и top-level await, которая поможет вам работать с ними более эффективно. Помимо этого, мы сделали работу с Angular 9 проектами проще, полностью поддержав новый формат метаданных.

    Более удобное перебазирование коммитов


    Действие Interactively Rebase from Here, доступное на вкладке Logs окна Git, позволяет редактировать, объединять и удалять предыдущие коммиты. Это помогает сделать историю коммитов более линейной и понятной.

    rebasing-commits

    В WebStorm 2020.1 вы найдете улучшенную, более интерактивную версию диалогового окна Rebasing Commits, которое открывается при вызове действия Interactively Rebase from Here. В обновленном диалоговом окне отображаются действия, которые можно применить к каждому коммиту. Он также показывает подробную информацию о каждом коммите и позволяет вам увидеть разницу и быстро сбросить примененные изменения.

    Использование WebStorm для быстрого редактирования файлов


    Благодаря новому режиму LightEdit, вы можете открывать файлы в отдельном окне текстового редактора, при этом не создавая и не загружая целый проект. Режим сработает, если WebStorm еще не запущен. Если WebStorm запущен, файл откроется в нем, как обычно.

    Чтобы попробовать новый режим в действии, нажмите правой кнопкой мыши на файл, который вы хотите отредактировать, и выберите WebStorm из списка предложенных программ. Как вариант, вы также можете настроить command-line launcher, как описано здесь, и открыть файл, пользуясь командной строкой.

    lightedit-mode

    На этом всё на этот раз. Спасибо, что дочитали до конца! Еще больше подробностей вы найдете в релизном блог-посте (на английском). Вопросы, пожелания и просто мысли высказывайте в комментариях. Мы, как и всегда, будем рады ответить. Баг-репорты можно создать тут.

    Команда JetBrains WebStorm
    The Drive to Develop
    JetBrains
    Делаем эффективные инструменты для разработчиков

    Комментарии 52

      +1
      Сделайте поддержку pnpm, пожалуйста
        +1
        Мы над этим работаем, уже внесли несколько улучшений. Подробнее почитать про то, что было сделано, можно тут и в прикрепленных задачах: youtrack.jetbrains.com/issue/WEB-32460. Если еще этого не сделали, то за эту задачу можно проголосовать, чтобы повысить ее приоритет и в дальнейшем получать уведомления.
        +3

        Я бы еще отметил отличную переработку окна Commit и Git. Настолько удобным, что теперь отпала необходимость в сторонних клиентах для большинства операций.

          0
          По сравнению с какой версией? Я изменений не заметил, в сравнении с предыдущей
            0

            По сравнению с 2019.3. В настройках найдите Commit, и отключите старый режим модального окна. После этого операция коммита станет похожей на VSCode — в боковой панели, сверху список (можно древовидный) изменившихся файлов, внизу окошка для ввода текста коммита. А diff теперь становится гораздо больше, ведь он открывается как обычная вкладка, а не пытается втиснуться в половинку нижней панели VCS, как раньше.


            Казалось бы, изменения не столь значительные, но для меня они кардинально меняют взаимодействие.

              +1

              А я вернулся к модальному окну комита. Мгновенное отображение diff для файлов оказалось удобнее. Если бы окно не было модальным и была кнопка открыть на весь экран, то вообще прекрасно было бы.

                0

                image


                Вот на этом скриншоте синие стрелочки туда-сюда открывают дифф для выбранного файла в отдельном окне (можно на весь экран)


                Эти же стрелочки есть в окошке просмотра коммита в панели Git

                  +1

                  Вы не поняли меня. Вызов диффа в отдельном окне или вкладке не одно и тоже, что и синхронизированное со списком окно/поле/вкладка с диффом только изменения, а не всего файла. В окне коммита, просмотра истории есть такое поле, когда ты бегаешь по дереву/списку файлов коммита, а тебе рядом показывают сфокусированный дифф изменения. Не надо дважды тыкать на имя файла или переключаться между вкладками диффов — только стрелочки вверх/вниз. Красота! Такие режимы по умолчанию есть во многих клиентах (SourceTree, SmartGit). Именно такой режим коммита и шикарный мердж клиент заставляют меня всё меньше пользоваться сторонними клиентами.

          –3

          А напишите, пожалуйста, кто-нибудь плюсы-минусы (только с точки зрения реального hands-on практика!) по сравнению с VSCode.

            +11
            Я как-то пытался собрать ide из VSCode. Часть нужных плагинов не работала, часть плагинов дико грузила его, часть плагинов просто перестала развиваться. Я не понял, за что его любят. Купил себе phpstorm по подписке. Всё работает сразу из коробки, есть множество плагинов, настроек очень много.
              +3

              У меня стоит PhpStorm и VSCode. Первый использую для полноценных проектов, второй — для одиночных файлов, например что бы быстро поправить какой нибудь конфиг. IDE из VSCode нормальную точно не соберешь. Единственное что мне супер нравится в VSCode это шрифт и подсветка. Я пытался настроить также в Phpstorm, но выглядело совсем по другому, к сожалению.

                +2

                Долгое время сидел на PhpStorm поскольку уходил с бека, по сути включает в себя все из WebStorm. Последний месяц на одном проекте пробую использовать VSCode (стек React, Next.js, Redux, TypeScript, PostCSS). Базово меня устраивает базовая работа — автоимпорты, навигация по коду, но попытка воспроизвести все фичи которыми я пользуюсь в PhpStorm во-первых сделали отзывчивость практически на уровне первого, даже несмотря на более быстрое открытие проекта, этап со стартом сервиса TypeScript занимает не сильно меньше времени.
                Из того чего не хватает или что не нравится:
                1) Периодически отваливается быстрый фикс авто импорта
                2) Плохо работает с PostCSS, пробовал разные плагины
                3) При вставке больших кусков JSX часто плохо работают автоматические отступы, но решается прогоном в Prettier.
                4) Не хватает некоторых рефакторингов


                Но есть и ощутимые плюсы:
                1) Для бесплатного редактора это отличный набор функций и расширяемости
                2) Идеальный для меня внешний вид. В IDEA-based IDE у меня так и не получилось приблизиться к внешнему виду VSCode/Atom
                3) Сама концепция расширяемости с огромным набором расширений — да, чтобы собрать что-то мощное нужно потратить много времени, но много полезных расширений, которые в IDEA вряд ли можно увидеть. Особенно понравился в режиме удаленной работы режим совместного программирования с комментариями к строкам.


                В общем, я не могу сказать что кто-то лучше, кто-то хуже. VSCode однозначно отличная альтернатива сложным IDE, но плюсы и минусы, как это обычно бывает, есть у обоих.

                  –6
                  VSCode — условный «линух», практически всё можно (и нужно, это обратная сторона медали) подкручивать как надо, дополнять плагинами и так далее. Плагины, естественно, существуют далеко не любые, они могут быть outdated и просто не существовать — но, естественно, можно и самому написать, включая поддержку новых языков через LSP. Вообще очень хорошая база знаний уже наработана, по поводу того, как писать плагины к VSCode. Очень легкий и быстрый в обращении, потому что составлен из loose coupled кусков (сам собственно редактор, будучи electron app, наверное самый тормозной из всего).

                  Webstorm — условная «венда», если вам от него нужно что-то, что не задумано разработчиками — удачи, и найдите стенку помягче, чтоб головой биться не так сложно было. С плагинами всё в разы хуже, многого просто не существует (там ниже писали про плагин для коллаборации, но в VSCode есть еще много крутого, типа вот), тот же LSP вроде есть в виде плагина, но вот бывший коллега, любитель вебшторма, не так давно хотел быстренько поднять поддержку ActionScript через LSP-плагин (не спрашивайте, зачем в 2019 году кому-то нужен ActionScript, там долгая история) — и через некоторое время разборок включил VSCode, где тот же финт у него просто сразу заработал как надо.

                  Ну и на мой субъективный взгляд, хотя я и предвзят в сторону VSCode — сам основной редактор кода в VSCode тупо удобнее.
                  –3

                  Хм. А в PyCharm Vue.js завезут?

                    +1
                    Пожалуйста, требуется PyCharm Professional.
                      –3

                      Ну эт понятно

                        +1
                        так и в чём вопрос тогда?
                          –2

                          Когда новый завезут. Там пока сейчас 19.3

                            +1
                            Ну, очевидно, когда выйдет PyCharm 2020.1
                            А произойдет это в ближайшее время, думаю
                              +1
                              Необязательно ждать релиз, плагин есть для каждого билда EAP и RC.

                              image
                    +1
                    Вот бы вы ещё когда-нибудь типизацию в Angular шаблонах починили. Постоянно отваливается и превращается в any. Во вложенных конструкциях RxJS такая же проблема.
                      +1
                      Если еще это не делали, создайте, пожалуйста, новое ишью тут: youtrack.jetbrains.com/issues/WEB, подробнее расписав, в чем проблема и приведя примеры/проект, в котором бы мы могли воспроизвести эту проблему. Если уже есть какое-то конкретное ишью, то я могу обсудить их статус с командой, если вы поделитесь ссылкой на них.
                      +1

                      Поставил обновленную версию — поломался шрифт, как раз стоял Jetbrains mono, стал узким и высоким. Шрифт, кстати, очень удачный.


                      А в целом, будет ли как-то решаться проблема со шрифтами? Очень давно тянется эта история с кучей ишью, вопросов и пр...

                        0
                        К сожалению, не до конца поняла, что именно поломалось. Вы имеете в виду, что в новой версии тот же самый шрифт, JetBrains Mono, стал более узким и высоким, чем в версии 2019.3? Если так, вы уже проверяли, не сбилось ли ничего в настройках?

                        Насчет проблемы со шрифтами, уточните, пожалуйста, какую именно проблему вы имеете в виду, и я постараюсь ответить на ваш вопрос.
                          +1
                          Вы имеете в виду, что в новой версии тот же самый шрифт, JetBrains Mono, стал более узким и высоким, чем в версии 2019.3

                          Именно. Вот
                          сравнение с предыдущей версией
                          image

                          Насчет проблемы со шрифтами, уточните, пожалуйста, какую именно проблему вы имеете в виду

                          Очень немногие шрифты отображаются корректно, особенно на двухмониторной системе.
                          На изображении Cascadia Code

                            0
                            Спасибо за подробности! Если я не ошибаюсь, то в первом случае проблема кроется в различных комбинациях тема/шрифт. По скриншотам кажется, что в версии 2020.1 у вас выбрана тема macOS Light в Preferences | Appearance & Behavior |Appearance и стоит дефолтный шрифт JetBrains Mono в Editor | Font, тогда как в версии 2019.3 выбрана тема Light и дефолтный шрифт — Menlo. Чтобы тема выглядела так же, как и в 2019.3, можно поменять шрифт с JetBrains Mono на Menlo.

                            Насчет второй проблемы, установила Cascadia Code у себя на компьютере, к сожалению, воспроизвести не получилось, на внешнем мониторе в том числе. Посмотрите, пожалуйста, на вот этот комментарий в нашем ишью трекере и попробуйте сделать, как там написано. Если это не поможет/дело не в этом, можете создать новое ишью там же, мы постараемся разобраться, с чем это связано.
                        +1
                        Это отличное место чтобы спросить: есть ли возможность создать на панели задач кнопку, которая запустит баш-скрипт или набор команд?
                          0

                          В правом верхнем углу есть кнопка "play" по которой можно запустить в том числе bash скрипт. Слева от нее можно добавить ваш скрипт не только.

                            0
                            Да, можно. Из File — Settings — Tools — External Tools добавьте утилиту, а затем в Menus and Toolbars добавьте кнопку.
                            0

                            Что подсказывает эта подсказка?


                            WebStorm useless tip

                            (Картинка взята из этой статьи и гласит "Более полезная быстрая документация")


                            В чем полезность повторения повторения?

                              –1
                              Да, возможно, пример, не самый удачный, вот тут мы брали другой, можете посмотреть: youtu.be/-9eDVcZTHR4?t=154, ну, или уже попробовать в самом продукте.

                              Полезность, в первую очередь, заключается в том, что раньше быструю документацию было достаточно нелегко найти, и если пользователь не знал, как ее вызвать, то он мог вообще не узнать о том, что есть такая функциональность. Теперь же она отображается при наведении мыши, в том числе с быстрым исправлением, если оно есть в текущем контексте, и с дополнительными деталями о символе, если таковые имеются. В некоторых случаях документация может заменить всплывающее окно quick definition, для тех, кто им пользуется.

                              Если вам кажется, что эти детали вас отвлекают или не приносят особой пользы, вы можете отключить быструю документацию при наведении мыши в настройках (Preferences/Settings | Editor | General > Show quick documentation on mouse move).
                              +3
                              Спасибо, очень ждём релиза PhpStorm, не откладывайте надолго пожалуйста ;)
                                +1

                                Ожидается ли в 20 году (понятно что не в этом релизе) поддержка WSL2? Какой вообще приоритет у remote wsl функционала?

                                  0
                                  Здравствуйте, мы работаем над этим. Вот в этом комментарии и комментариях под ним можно подробнее узнать о том, что было сделано в последнее время. А в целом про наши планы и приоритеты на 2020 год можно почитать тут .
                                    0
                                    Проверьте, пожалуйста, производительность. Только что установил предыдущую версию вместо новой, в ней все летает. В новой же уходит до нескольких секунд при открытии новых вкладок с файлами.

                                    Моя машина:
                                    MacBook Pro
                                    OC: MacOS Catalina 10.15.3
                                    Имя процессора: Quad-Core Intel Core i7
                                    Скорость процессора: 2,5 GHz
                                    Количество процессоров: 1
                                    Общее количество ядер: 4
                                    RAM: 16 ГБ
                                    Память: 512 ГБ
                                      0
                                      Мы уже смотрим на несколько проблем с производительностью. Если несложно, создайте, пожалуйста, новое ишью тут, прикрепив логи ( Help | Collect Logs...) и CPU снэпшот (тут можно посмотреть, как его сделать и загрузить). Это бы помогло нам понять, с чем связаны проблемы.
                                    0
                                    Что-то сломалось с JSDoc typedef документацией. Во-первых на нее теперь не переходит по клику в доке, на нее ссылающемся (хотя он подсвечена как линк и курсор ручкой). Во-вторых, когда стоишь внутри описания, то по Ctrl-Q ничего не всплывает (а раньше всплывало текущее описание)
                                      0
                                      Создайте новое ишью в нашем ишью трекере, пожалуйста, с примерами, где именно это сломалось, чтобы мы смогли понять, в чем причина и попробовать решить проблему.
                                      0
                                      В одной из прошлых версий сломали Switcher (ctrl tab), в этой доломали. Теперь вообще не понятно по какой логике в нём отображаются последние открытые файлы. Периодически переключение вещает всю IDE не несколько секунд.
                                        0

                                        А есть где-то более подробная инфа про поддержку vuex сторов?
                                        Что-то так вот с ходу не увидел никаких описанных плюшек в проекте с модулями-сторами vuex.

                                        0
                                        Спасибо за обновление. Пользуюсь PhpStorm с 2017года. Из того что б хотелось увидеть это — автоматическая компрессия CSS файла (или выделенных строк css) по горячим клавишам. Довольно много приходиться работать с CSS и постоянно приходиться пользоваться сторонними сервисами по типу csscompressor или gulp плагинами если необходимо сжать .css было бы очень круто, если бы можно было производить компрессию хоткеями. (Ни у кого из редакторов конкурентов, правда, я такой фичи не встречал, но это очень облегчило бы мою жизнь).
                                          +2
                                          Настройте External Tools и повесьте хоткей
                                          0

                                          Спасибо за обновление!
                                          Наткнулся на багу в нативном JS: WEB-41429.
                                          У меня так и не получилось добиться нормального автокомплита при использовании es6-модулей.
                                          Из-за этой баги WebStorm получается совсем неюзабельным.
                                          Исправьте, пожалуйста! Уже больше чем пол года прошло :(

                                            0
                                            Поговорила с ответственным разработчиком насчет статуса этой баги, к сожалению, ее не так просто и быстро починить. Т.к. в ишью не набралось дополнительных голосов и комментариев, мы пока за него не беремся и занимаемся более приоритетными задачами. Если кого-то из ваших друзей/коллег тоже беспокоит эта бага, то, пожалуйста, попросите их проголосовать за ишью/оставить там комментарии, это поможет нам повысить его приоритет.
                                            0
                                            ekaterinaryabukha спасибо за обновление!
                                            А есть ли шанс, что фича-реквест youtrack.jetbrains.com/issue/WEB-14931 будет когда-нибудь реализован? :) Было бы очень здорово иметь такую фичу, сейчас это однотипные действия, которые к тому же часто сопровождаются ошибками: то переменную из текущего контекста забудешь, то не перенесешь import/require.
                                              0
                                              Здравствуйте! Обсудила статус этого фича реквеста с командой: к сожалению, в ближайшем будущем не планируем за него браться, но, т.к. у него постепенно набираются голоса, можем за него взяться позднее.
                                              0

                                              Только у меня так или у всех: проверка орфографии стало не только для обычного текста, но теперь у меня ругается и на функции — то они очень длинный, то нельзя ставить кавычки, то еще на какие то правила которые относятся к коду, а не тексту. Отключать тоже не хочет — наименования функций, комментарии и т.п. — очень сильно облегчает.

                                                0

                                                ekaterinaryabukha, здравствуйте!
                                                Имею PHPStorm 2020.1.1. Но автокомплишена vuex, разбитого на модули, не имею. Пока в мою IDE не завезли или надо что-то где-то включить?

                                                  0
                                                  Добрый день! В PhpStorm 2020.1.1 должно все работать так же, как и в последней версии WebStorm. Напишите, пожалуйста, в поддержку, с примером проекта/кода, в котором у вас не работает автодополнение, мы посмотрим, с чем это связано: intellij-support.jetbrains.com/hc/en-us/requests/new?ticket_form_id=66731.
                                                    0

                                                    Спасибо большое за быструю реакцию! Вы — лучшие:))
                                                    В поддержку обязательно напишу

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

                                                Самое читаемое