WebStorm 2020.2 EAP #4: WebP Support, Smart Command Handling, and More

Ekaterina Ryabukha

WebStorm 2020.2 EAP build #4 is now available!

If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out our previous EAP blog posts.

The Toolbox App is the easiest way to get the EAP builds and keep your stable WebStorm version, as well as any EAP versions up to date. Or you can download the EAP builds from our website. You can also choose to be notified right from the IDE when a new EAP build is available: go to Preferences/Settings | Appearance & Behavior | System Settings | Updates and select Automatically check updates for Early Access Program.

DOWNLOAD WEBSTORM 2020.2 EAP

Important! WebStorm EAP builds are not fully tested and might be unstable.

Here are some of the highlights of WebStorm 2020.2 EAP #4 (build 202.5792.46). For the full list of issues fixed in this update, see the release notes.

Support for WebP image format

Starting with v2020.2, you can preview .webp images right in WebStorm, the same way you’d preview .jpeg or .png images. Previously, WebStorm wouldn’t recognize the .webp image format, forcing you to switch to another software whenever you needed to have a quick look at such images.

There are several ways to preview an image in WebStorm. For example, you can press Shift and hover over an image link in the code. You can also double-click on an image in the Project tool window to preview it in the editor, or use the Quick Definition feature (Alt+Space/Ctrl+Shift+I).

preview-webp-image

Smart handling of terminal commands

WebStorm has a lot of features that can help you do specific jobs faster. Starting with v2020.1.2, we’ve made some of those features easier to discover for those who have been using terminal commands. If you run some commands from the built-in terminal, the IDE will now suggest ways to do it more smoothly by using the existing features instead.

Let’s say you want to check commit logs. If you type git log in the built-in terminal, the IDE will highlight commands that it can handle in a smart way in a different color. Press Ctrl+Enter to try the new functionality out. Once it’s done, the IDE will open the Git tool window on the Log tab so you can explore commit logs with less effort.

smart-handling-of-commands

Although this is still a work in progress, WebStorm can already handle quite a few commands in a smart way. Apart from some VCS-specific commands, the new functionality will work for npm ... and node ... commands. With the current behavior, if you decide to run a command like npm start in a smart way, the IDE will start a debug session. We’ve implemented it this way on purpose. While running code can be done from the terminal quite comfortably, the debugging process is more complex, and using a dedicated UI can make that process a lot easier.

We understand that not everyone will find this smart handling of commands helpful. If you’re one of the people who don’t, you can turn it off by unchecking Smart command handling in Preferences/Settings | Tools | Terminal.

New action for adding carets at the end of each selected line

We’ve added a new action for working with multiple carets. It lets you quickly place carets at the end of each selected line and removes the selection as soon as all carets are added. The new action is called Add Caret Per Selected Line. To try it, select some code and press Alt+Shift+G.

That’s it in terms of the biggest highlights. This build also comes with some smaller, but still important changes, such as:

  • WebStorm can now automatically detect if you’re using a screen reader. If so, the IDE will turn its accessibility features on.
  • Support for such technologies as Yeoman, JSCS, Closure Linter, and JSLint is no longer available out of the box. If needed, you can still get support for these technologies by installing the corresponding plugins from Preferences/Settings | Plugins.
  • We’ve extended Vue-specific code style settings by adding a few more options to them. From now on, you can also configure interpolation formatting under Preferences/Settings | Editor | Code Style | Vue.

Please report any issues you find to our issue tracker. And stay tuned for next week’s update!

The WebStorm team

Comments below can no longer be edited.

8 Responses to WebStorm 2020.2 EAP #4: WebP Support, Smart Command Handling, and More

  1. Aleksey says:

    June 19, 2020

    What is the goal of adding a separate action for moving carets to the end of the line if the same result can be obtained by just pressing “end” button?

    • Ekaterina Ryabukha says:

      June 19, 2020

      Hello Aleksey,

      You can find more details about why we added this action here: https://youtrack.jetbrains.com/issue/IDEA-122181. A lot of users requested it, and we try to listen to our users, so we added it. I hope this answers you question.

      • Jason says:

        June 20, 2020

        I’m so happy that Jetbrains is actively listening to their users for feature improvements. This actually made my day and inspired me to create an issue for a feature I’ve been waiting to happen for a very long time: https://youtrack.jetbrains.com/issue/IDEA-244103 I hope this also gets implemented! Keep up the great work, I use the IDEA product professionally and for my own personal projects!

        • Ekaterina Ryabukha says:

          June 23, 2020

          Hello Jason,

          Thanks for sharing your thoughts with us and creating a new feature request! Unfortunately, we cannot promise anything at the moment, but we’ll see if your feature request gets popular and if it does, we’ll consider implementing it. Please monitor the issue you created for updates.

  2. ICanSeeR says:

    June 19, 2020

    Aleksey, have you even tried to understand that feature? If you read closely, it allows you to create a caret for each line that is selected unlike the “end” button, that will move just the caret at the end of its line.. It’s like a combination of shift+alt+drag cursor + press “end” button but with just one step..
    Thanks Jetbrains-Team for your great job on your IDE(s).

    • Ekaterina Ryabukha says:

      June 19, 2020

      Thanks, we’re happy to hear that you like the latest improvements!

  3. Yaroslav says:

    June 22, 2020

    Add Caret Per Selected Line – great job on adding this! Finally can work productively on the colleagues’ computers who don’t have a custom extension to add this.

    • Ekaterina Prigara says:

      June 22, 2020

      Thank you! Glad that you enjoy using this feature!