WebStorm 2020.3

Look & Feel

• New Welcome screen - Updated the Welcome screen so you can not only open and create projects from it, but you can also tweak the most commonly used settings, like IDE themes and fonts.
• IDE theme synced with OS settings - You can now sync your WebStorm theme with your Apple macOS and Microsoft Windows settings.
• Improved work with tabs - You can now split the editor by dragging and dropping tabs or using the new Open in Right Split action. Additionally, pinned tabs are now marked with a special icon and shown at the beginning of the tab bar so you can find them faster.
• Reader mode - WebStorm has a new mode that makes your library and read-only files more readable. Enter it to render comments, enable font ligatures, and more.
• Multi-file templates - Added the ability to build custom file templates that create several files at once.
• Files opened with WebStorm - Added the ability to open specific file types by default.

Frameworks & Technologies

• Support for Tailwind CSS - You can now work with Tailwind CSS more productively. It will autocomplete your Tailwind classes, show you a preview of the resulting CSS on mouseover, and support the customizations you make using tailwind.config.js files.
• Create React components from usages - Place the caret at your unresolved React code, press Alt+Enter, and select Create class/function component from the list – WebStorm will create the relevant code construct for you.
• Markdown editing and preview improvements - Added Mermaid.js support, the ability to reformat your .md files and automatic scrolling of the preview pane along with the editor.
• Basic support for complex webpack setup - Added support for multiple webpack configs.
• Enhancements for Vue.js - Fixed a number of issues related to Vue 3. For example, WebStorm now supports the script setup syntax. The IDE now correctly applies ESLint code style rules in Vue projects and the integration with the TypeScript language service has been improved.
• Full support for pnpm - WebStorm now fully supports the pnpm package manager, along with npm and yarn.

JavaScript & TypeScript

• Integrated TypeScript and Problems tool windows - Integrated the TypeScript language service into the Problems tool window and removed the TypeScript tool window. The actions previously available within the TypeScript tool window have been moved to a dedicated widget on the status bar.
• Better formatting for template literals with CSS and HTML - Added code formatting support for multiline CSS and HTML blocks that contain JavaScript. The IDE will indent correctly when you add these more complex template literals or reformat your code.
• Improved debugging experience - You can now click on a hint to see all the fields that belong to a variable. Additionally, you can change variable values and add watch expressions right from the hint.

Tools

• Support for our collaborative development tool - Added support for Code With Me (EAP), the new tool for collaborative development and pair programming. This tool lets you share projects with others so you can work on them together in real-time.
• Built-in training course on WebStorm basics - Added a built-in training course to help you get used to WebStorm’s key features.
• cURL conversion in the HTTP client - Added the ability to export an HTTP request to cURL.
• Better spelling and grammar checking - You can now address grammar and spelling issues faster – hover over a problem and you’ll get a popup with an explanation and a suggested fix. Support has also been added for more languages and the quality of grammar checks has been improved.

Version Control

• Support for Git staging area - You can now stage your files right from WebStorm. You’ll be able to stage changes from the Commit tool window, as well as from the gutter and using the Show Diff feature.
• Rearranged VCS menu - The VCS group under the main menu is now named after the version control system you are using. The items under Git in the main menu have been rearranged to make the most common operations easier to access.
• Improved work with branches - WebStorm now automatically corrects unaccepted symbols in the names of new branches. It also shows you all the actions available for the currently selected branch, just like it would for other branches.

Navigation

• More helpful Navigation bar - With the Navigation bar, which offers a quick alternative to the Project view, you can easily go through the structure of your project and open specific files. The ability to jump to specific code elements in your JavaScript and TypeScript files has been also been added.
• Quick file preview - You can now preview files in the editor by selecting them in the Project view.
• More powerful Search Everywhere - The Shift+Shift popup now allows you to do more. You can use it to do basic math – the results will appear right in the popup and it will also let you look for Git data, including the details about branches and commits. All the findings are now grouped based on their relevance to the search query instead of their type.