What’s new in WebStorm
WebStorm 2019.3 comes with 20% faster startup, major enhancements in Vue.js support, even smarter code completion for JavaScript and TypeScript, and a lot of lingering bugs fixed.
WebStorm 2019.3 comes with 20% faster startup, major enhancements in Vue.js support, even smarter code completion for JavaScript and TypeScript, and a lot of lingering bugs fixed.
So far, one of the most common performance problems faced by WebStorm users has been the sluggish startup of the IDE. In the last two release cycles, we have devoted a lot of effort to reducing the time that users have had to wait for the welcome screen to show and for the IDE to open projects that are already indexed. As a result, you can now expect WebStorm to handle this 20% faster than previous versions.
To help you increase the speed of your coding, WebStorm can now autocomplete slot names for you. This works for the slot names defined in the project components and component libraries such as Vuetify, Quasar, and BootstrapVue.
Plus, WebStorm now understands the link between parts of the component located in separate files and delivers accurate completion suggestions for props, data, and methods not defined in a single .vue file.
With WebStorm 2019.3, you can now check out documentation for components and directives defined in Vue.js and some popular component libraries. For this, simply press F1 on the name of a component or directive in your code.
WebStorm 2019.3 comes with support for schematics with Angular 9 and the Plug’n’Play feature from Yarn 2. Plus, it can help you work with key TypeScript 3.7 features: optional chaining, nullish coalescing, and assertion signatures.
For components without propTypes, WebStorm will no longer report an unresolved property for
props.something in the component definition if it sees that props are passed in the component
usage.
Need to work with a code fragment in a language different from the main language of the file? You can now inject such code fragments into your files, including Pug, Handlebars, and EJS, by pressing Alt-Enter.
As you add new variable and parameter names in JavaScript or TypeScript files, you’ll now get name suggestions based on the names of classes, interfaces, and type aliases defined in the project, standard libraries, and dependencies you’re using.
For new variables, functions, classes, and interfaces, you’ll also get suggestions for names that were already used in the same scope but haven’t yet been defined and are marked as unresolved.
If you’re using Bootstrap or another CSS library in your project and you have it linked from a CDN in your HTML file, you can now get completion for the class names from that library, without adding its sources to the project. To enable this, simply press Alt-Enter on the link in the HTML file and select Download library.
When you clone a project from a version control system, you’ll now see an updated Get from Version Control dialog shown on the welcome screen and the VCS menu.
With this redesign, we mainly wanted to improve the experience of getting projects from GitHub: you can now log in to your GitHub account right from the updated dialog. Once you’ve logged in, you can explore the list of repositories in your account and the organizations you belong to and clone projects to WebStorm right from there.
Need to push changes from one branch while working with the other? With the latest update, you no longer need to switch to the branch you want to push changes from – simply select it from the Branches popup and hit Push.
Now you can make commits right from the Version Control tool window – a separate dialog won’t block the rest of the IDE. For this, tick Commit from the Local Changes without showing a dialog in Preferences/Settings | Version Control | Commit Dialog.
To resolve a number of usability issues, we replaced a single Checkout as... action with two new ones: a unified Checkout action for remote branches and the New Branch from Selected... action for both remote and local branches.
Need to launch tools like npm and Yarn, open recent projects, or start a run/debug configuration? You can now do it all from one place using the Run Anything action (Ctrl-Ctrl).
With the new In Selection filter (Cmd/Ctrl-F twice), you can find specific pieces of information faster by narrowing down your searches to the selected parts of code in a file.
Starting with WebStorm 2019.3, the Dart plugin will no longer be bundled. This was done to shorten the release cycles for it – bundled plugins can only be updated together with an update of the entire IDE. So, if you use Dart, you’ll now need to install the same Dart plugin from Preferences/Settings | Plugins.
If you’re using a third-party tool like Prettier for a project and have it configured via a file watcher, it’s likely you may want this configuration to be automatically applied to all the new projects you create. Now you can achieve this by enabling global file watchers by default.
The completion popup got a new, more polished look.
The presentation of completion suggestions in JavaScript and TypeScript became clearer and more consistent. It’s now easier to spot where the symbol is defined and whether it’s part of a standard language API. There’s also a new icon for symbols with multiple definitions.
With the new Propagate to destructuring intention (Alt-Enter), you can replace an extra variable if it’s possible with another destructuring. To remove a destructuring completely, use the intention action called Replace destructuring with property or index access.
The IDE will now warn you if a boolean expression in a condition has some unnecessary parts and will suggest simplifying it.
When you rename a symbol in a JavaScript or TypeScript file, the IDE now groups together dynamic usages and, by default, excludes them from the refactoring. This makes the refactoring more accurate and gives you more control over what exactly should be renamed in the Refactoring Preview tool window.
Using Vuetify, BootstrapVue, or Quasar in your Vue.js application? Code completion for components and their props from these and some other Vue component libraries is now more precise. This was made possible by a new approach we’ve adopted to work with these libraries in the IDE.
Need to occasionally look through some PHP or Python files in WebStorm? Syntax highlighting is now available for these and many other languages – with no additional configuration required, thanks to the collection of TextMate grammar files that ships with the IDE.
Ever typed funtcion or fnction instead of function by mistake?
Now, code completion can understand this kind of errors and will still suggest the most relevant option for you.
This works in all supported languages and for all symbols – keywords, classes, functions, components, and so on.
WebStorm can now help you work with shell scripts.
Code completion works in .sh and .bash files, a new run configuration is available, and the IDE integrates with ShellCheck for linting and shfmt for formatting the code.
With the new Duplicate code fragment inspection, you can now find code duplicates in your project. It checks your code on the fly and immediately highlights potential duplicates in the editor. It works for JavaScript, TypeScript, CSS, Sass, SCSS, and Less.
You can now maintain different code styles in different parts of your projects by adding multiple .editorconfig files.
In addition to the standard EditorConfig options, which have been supported for a long time, you can now use IDE-specific properties that cover all available IDE code style options.
When you have a project opened in WebStorm and want to open another one, you can now attach this second project to the opened one, so that you can see both of them in the same IDE window. If you want to close the attached project, right-click its root in the Project view and select Remove from Project View.
With the updated Plugin page in the IDE preferences, it is now easier to find the plugin you need – the plugin description is now shown right next to the list of available plugins. We’ve removed the Updates tab but added a new Update button next to the plugin in the Installed section.
To disable or re-enable all the downloaded plugins, click the gear icon and choose the appropriate option.
In .gitignore files, the IDE offers code completion suggestions for file and folder names.
Cmd/Ctrl-click on the name to jump to this file or folder in the Project view.
You can now quickly add a file to .gitignore from the Local Changes tab – right-click it in the Unversioned files group and select Add to .gitignore.
With destructuring, you can unpack values from arrays and objects into variables using a very concise syntax. WebStorm’s new refactorings and intentions (Alt-Enter) can help you easily introduce destructuring to your JavaScript or TypeScript code.
You can automatically change a function that returns a Promise with .then() and
.catch() calls to an async function that uses the async/await syntax. Simply
press Alt-Enter on the name of the function and select Convert to async function.
This is possible not only in TypeScript files, but also in JavaScript and Flow.
For Angular applications, WebStorm adds 17 new inspections that will help you detect Angular-specific errors in your app as you type, and will suggest quick-fixes. These inspections work both in the TypeScript and template files and check the use of bindings, directives, components, and many other things.
In Angular apps, you can now use the Related Symbol… popup (Ctrl-Cmd-Up / Ctrl+Alt+Home) to quickly jump between the different component files such as TypeScript, template, style, and test files. In the TypeScript file, the popup will also list all the symbols that were imported into this file.
WebStorm now uses the TypeScript language service together with its own TypeScript support for any TypeScript code in .vue files. This means that you’ll now get more accurate type checking and type info, you will be able to use the quick-fixes provided by the service, and see all the TypeScript errors in the current file in the TypeScript tool window.
The Extract Method refactoring now works with local functions and uses destructuring for the return values, making it perfect for extracting custom React hooks.
WebStorm now provides better code completion for React props merged using with the spread operator.
The documentation (F1) for CSS properties and HTML tags and attributes now shows up-to-date descriptions and information about the browser support from MDN as well as links to the full MDN articles.
To check that all the CSS properties you use are supported in the target browser version, you can enable a new Browser compatibility inspection in preferences.
If you use CSS Modules in your project, code completion for classes in the JavaScript file will now suggest camel-cased versions of class names with dashes.
With the new Extract CSS variable refactoring, you can replace all the usages of a value in a current
.css file with a variable by using the var(--var-name) syntax.
When you run tests with Jest, Karma, Mocha, or Protractor and some tests fail, you can now see right in the editor where the problem happened. The IDE will use the information from the stack trace and highlight the failed code. On hover, you’ll see the error message from the test runner and you can immediately start debugging the test.
Using Cucumber and TypeScript? You can now jump from the steps in the .feature file to their definitions in the .ts file, and generate missing definitions using a quick-fix (Alt-Enter).
Meet the new, improved interactive debugger console in the JavaScript and
Node.js debug tool windows! It now displays objects using a tree view, and it supports
styling of log messages with CSS and grouping them using console.group() and
console.groupEnd(). You can also filter out
any type of log messages.
When adding new scripts to the package.json file, WebStorm now provides suggestions
for available commands provided by the installed packages. After typing
node, the IDE will suggest folder and file names. And after typing npm
run, you’ll see a list of tasks defined in the current file.
WebStorm can now run multiple processes for ESLint and TSLint in one project to make sure that they work correctly in monorepo-projects and in projects with several linter configurations.
If you use Docker for testing your Node.js application, you can now use the configuration described in the Docker Compose file to easily run and debug the app from the IDE.
In package.json, press Cmd/Ctrl and hover over the version on a dependency to see what
range of versions can be installed when running
npm install or yarn install.
You can now use the new colorful UI themes in WebStorm that are available as plugins. Choose between the Dark Purple, Gray, and Cyan Light themes, or create your own.
The Recent Locations popup (Cmd-Shift-E / Ctrl+Shift+E) is a new way to navigate around the project. It shows a list of all the files and lines of code in them that you have recently opened in the editor. You can start typing to filter the results and jump to the code you need.
With the new action Save as a Template in the Tools menu, you can now use a project as a base for creating new projects on the IDE Welcome Screen.
You can now enable soft-wraps in the editor for specific file types. To do that, open Preferences/Settings | Editor | General and specify the file types in the Soft-wrap files field.