WebStorm 2019.2 EAP #6: simplify conditions, improved support for Vue.js and EditorConfig
WebStorm 2019.2 Early Preview build #6 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 the previous EAP blog posts.
The Toolbox App is the easiest way to get the EAP builds and keep both your stable WebStorm version and any EAP versions up to date. Or you can download the EAP builds from our website. You can also get notified right from the IDE when a new EAP build is available: go to Preferences | Appearance & Behavior | System Settings | Updates and select “Automatically check updates for Early Access Program”.
Important! WebStorm EAP builds are not fully tested and might be unstable.
Here are some of the highlights of WebStorm 2019.2 EAP #6 (build 192.5587.21). For the full list of issues fixed in this update, see the Release Notes.
Simplify boolean expressions
To help you keep things simple, WebStorm now warns you if you have a boolean expression in your code that has any extra bits that are not actually required (e.g. condition in the if statement), and offers you a quick-fix (Alt-Enter) to simplify it without changing the logic.
Here’s a real-life example:
if (scope) {
let scopeChain;
if (typeof scope === 'string' || (!Array.isArray(scope) && typeof scope === 'object' && scope !== null)) {
scopeChain = [scope];
} else {
scopeChain = scope;
}
}
The last part of the long condition && scope !== null can be removed because with the first check we have already confirmed that scope is not null.
This inspection is on by default. Or, if you want to check your whole project, you can use the Run inspection by name action from the menu Code and run the Pointless statement or boolean expression inspection.
Improvements in the Vue.js support
The popularity of Vue.js is continuing to grow worldwide. There are also more and more UI libraries are being written for Vue.js all the time. One of the biggest benefits Vue.js offers developers is flexibility in the way they can write components – you can define them using a single .vue file or split them between different files, different combinations of languages can be used, and there are different ways to register components, etc. But all this also makes it quite challenging for the IDE to support all the different UI libraries that can each be written using very different styles.
For the past several weeks, we’ve been working on redesigning our support for Vue.js to make it easier for us to add new smart features and support for new UI libraries.
To improve code completion for different Vue.js component libraries, we have created and supported in WebStorm a special format of metadata called web-types. web-types describe the library’s directives and components (including their props, events, and slots). WebStorm now uses the information about components and their props in code completion and will use more of it in the future.
We have already generated web-types descriptions for the most popular Vue.js component libraries: BootstrapVue, Vuetify, and Quasar. They are available on npm under the @web-types scope. WebStorm downloads them automatically and uses them under the hood when you open a project that uses one of these libraries.
If you’re maintaining a Vue.js component library, you can add a description of the components in the web-types format to your module. To help the IDE to locate this file, a link to it should be added to the web-types field in package.json.
On github.com/JetBrains/web-types you can find the JSON schema, scripts that you can use to generate the metadata in the required format, as well as the latest version of descriptions for BootstrapVue, Vuetify, and Quasar. Feel free to contribute and ask any questions.
We’ve also made it easier to create new Vue.js projects in WebStorm: you no longer need to install @vue/cli first to use it in the New project wizard. WebStorm will run it using npx instead. You can select if you want to use the default project template the Vue CLI provides, or answer additional questions about the new project.
We’ll keep working on the Vue.js support and you’ll see more improvements later this year.
Install Node.js when creating a new project
If for whatever reason, you haven’t yet installed Node.js on your computer but you want to create a new Node.js, Angular, React, or Vue.js project, WebStorm will download and install Node.js for you – this option is available in the IDE in the New project wizard.
Configure code style per directory using EditorConfig
You can find an .editorconfig file in almost every open source JavaScript project nowadays. In this file, you can describe the basic code style rules that should be applied to the different file types in your project. Many IDEs and editors support EditorConfig out of the box, including WebStorm, and will follow the options selected in it for things like indent size and style.
We’ve decided to go one step further with our support for EditorConfig and create a set of our own properties for the .editorconfig file that will describe all the IDE code style and editor options. The options found in the .editorconfig file in your project will override the code style set in preferences.
Another cool thing is that you can now configure different code styles in different project directories using EditorConfig.
You can create a new .editorconfig file using the New… action and then select what properties it should add to the file for you – default EditorConfig options or IDE-specific properties that match your current IDE code style settings. Of course, you can then edit the file adding more properties.
Please report any issues on our issue tracker. And stay tuned for the next week’s update!
WebStorm Team
Subscribe to WebStorm Blog updates
