Today we’re announcing WebStorm 2017.2 🎉
This big summer update adds powerful Move symbol refactoring, supports new code style options for JavaScript and TypeScript, improves testing with Karma and Mocha, and much more!
Here’s what you can do with the top new features in WebStorm 2017.2:
- Import code style from an ESLint configuration.
- Run single Karma tests and generate code coverage reports for Mocha.
- Take advantage of code completion in JavaScript that respects the project configuration stored in your webpack.config.js file.
- Order code inside classes with the Rearrange code action.
- See Parameter hints and inferred type info in TypeScript.
- Build interfaces with support for Angular Material.
- Enjoy better code completion and navigation for Sass selectors.
- Scope styles for single components with support for CSS Modules.
Explore all the new features of WebStorm 2017.2 on our website.
JetBrains WebStorm Team
The issue with tabs limit is still present even in the new release.
Do you have an ETA? It is logged at https://youtrack.jetbrains.com/issue/IDEA-173369
It is a really disruptive bug that ruins the workflow for people who keep a single tab open and there were hopes it would be fixed with the next release.
Thank you in advance for you help.
It’s going to be fixed in WebStorm 2017.2.1. The Early Preview build will probably be available next week. Sorry for the inconvenience.
I know there is Vue.Js support, and I know there is Post CSS support. However, I stumbled on combining the two. How do I make WebStorm understand that the tag in the .vue file, should be treated as post css, so nesting is legal and etc.
Have you tried that in WebStorm 2017.2? To enable PostCSS support you can either set PostCSS as a dialect for stylesheets in Preferences | Languages & Frameworks | Stylesheets or add
lang="postcss"attribute to the style tag. Make sure PostCSS plugin is installed and updated.Thanks, works now. I didn’t see that lang part documented, but I actually did guess to try it, it didn’t work so I assumed this feature doesn’t exist.
However, it turns out, my problem was I had ‘type=”text/css” ‘ on the style tag, which for some reason stops this feature from working.
With this newest update, the entire WebStorm window is MASSIVE!! All of my files, menu items, project trees, search boxes, etc – EVERYTHING – is sooooo annoyingly huge!
What happened with this update? This is impossible to work with – everything on my screen is monumentally large, and changing font size or other settings relating to size does nothing.
Is this a bug that will be fixed? Like immediately?
Can you please try to set the font to default in Settings | Appearance & Behavior | Appearance – Override default font and restart the IDE. Thanks!
If it doesn’t help, in the menu Help select Edit Custom VM Options and add -Dsun.java2d.uiScale.enabled=false
Then restart the IDE.
Adding to the VM Options fixed it! Thank you very much!!
I left a comment, and it looks like it was deleted by mods – don’t understand why, but I am leaving it again…
With this newest update, the entire WebStorm window is MASSIVE!! All of my files, menu items, project trees, search boxes, etc – EVERYTHING – is sooooo annoyingly huge!
What happened with this update? This is impossible to work with – everything on my screen is monumentally large, and changing font size or other settings relating to size does nothing.
All new comments are approved by the moderators before they become visible. Both your comments are now live. I’ve left a reply for the first comment.
I had to rollback to https://download.jetbrains.com/webstorm/WebStorm-2017.1.4.dmg due to a bug in searching for css classes.
When I select a class in an HTML file (i.e. class=”empty-list-here” with the selection being the text inside “, the Edit -> Find -> Find in path dialog does not come up.
Sorry, we can’t reproduce it. Can you please share your IDE logs (menu Help – Show logs) with us. You can post a link here or report a new issue on our issue tracker: https://youtrack.jetbrains.com/issues/WEB
Thanks!
Thank you Ekaterina. I created WEB-27873 and attached my log file there.
Hope it helps.
Hey great work on the update!
Does the Import auf ESLint Settings only work with .eslintrc files?
ESLint allows it’s configuration file to be normal javascript and .eslintrc.js and I don’t get a prompt to import my ESLint settings.
Thanks!
Thanks!
Sorry, it works only with .eslintrc in the JSON format. We can’t statically analyse a JavaScript configuration.
@Ekaterina Prigara
Is there any reason why you can’t use:
eslint -c .eslintrc.js –print-config
This command returns an eslint config parsed with eslint as JSON – which can by statically analysed.
Thanks for the tip and for reporting an issue. Didn’t know about that.
Is there any place to discuss or vote for webstorm next function?
You can vote for the features on our issue tracker: https://youtrack.jetbrains.com/issues/WEB
If you’re particularly interested in the issue about eslintrc.js, here it is: https://youtrack.jetbrains.com/issue/WEB-27908
@Martin
Yes. Only .eslintrc files are supported. And only rules present in the .eslintrc file. Extends are not supported.
You can write eslintrc.js in project and use
eslint --print-file ./eslintrc.jsto print whole static config and write to file .eslintrc.Here convenient gist code：
https://gist.github.com/zhenyong/6303b2ccfb365c50ef16c0e48a86877e
The “Go to file” menu (Ctrl + Shift + N) is bugged for me on Ubuntu 16.04. It randomly disappears and it’s quite annoying. I’ll probably roll back until this is fixed.
Can you please try the workaround described in this comment: https://youtrack.jetbrains.com/issue/IDEA-176186#comment=27-2332008
Thanks!
I have a problem. When I try to do duplicate a line using Ctrl+D, I expect that there will be a duplicated line.
So say console.log(“Hello World”); becomes
console.log(“Hello World”);
console.log(“Hello World”);
Instead, I get taken to Compare With window which apparently has the same shortcut. When I tried to look this stuff up in the settings it had it showed me that it was still Ctrl+D! For Compare With it showed no shortcut at all! So can you update the shortcuts or fix this?
This shortcut depends on the context: when the focus is on the editor, it duplicated the line, but when the focus is on the project view or on a navigation bar, it opens Compare with window.
In the Settings | Keymap I see this shortcut assigned to the Compare files action for default Windows keymap. If you still want to remove the assignment, please try to make a new copy of the default keymap and modify it.
It now gives Ctrl+D for both of them, but it still opens the compare with window regardless of where the cursor is located when I press the Ctrl+D key. And besides, I usually keep my sidebar closed because I have little use for it.
As I’ve said, Ctrl-D is a default for both actions. Have you tried removing the assignment as I’ve suggested? Thanks!
The bug has been fixed as of 2017.2.1. Thanks!
“Parameter hints and type info in TypeScript” super cool but do you plan parameter hints could be also available in pure JS maybe with @JSDoc
Please feel free to file a request for this feature to youtrack, https://youtrack.jetbrains.com/issues/WEB
https://youtrack.jetbrains.com/issue/WEB-27961
is this still compatible with osx 10.10.5? I hangs on start after the update. I tested in two different macs.
Java 8 that WebStorm uses is compatible with macOS 10.8.3 or above. We haven’t tested it with earlier macOS versions.
Yes, great, but as I said, I’m using 10.10.5. And my Java is updated to the last release. I just tried and none of the IDEs works after updating. They hang when they are about to show the project windows.
Sorry, misread the OS version. As I’ve said, we have only tested on macOS 10.11 and 10.12. Can you please send us the IDE logs located in ~/Library/Logs/WebStorm2017.2
Any chance you have any 3rd-party plugins installed? Thanks!
Sure, here is a Dropbox link with two .log files from two different machines:
https://www.dropbox.com/s/dm02hh5nqam9rxm/java_error_in_webstorm_4146.log?dl=0
Thank you! Found a related issue on our issue tracker: https://youtrack.jetbrains.com/issue/JRE-407
Can you please try the workaround suggested here: https://youtrack.jetbrains.com/issue/JRE-407#comment=27-2305435
how do i turn these things off? https://drive.google.com/open?id=0B7Rg7l5e2Y3yaENVQlZ6QzhFbzg
so messi
You can disable Parameter hints in Preferences | Editor | General | Appearance – Show parameter name hints.
tks alot
Using CTR+SHIFT+F10 is not picking the right testing configuration for my mocha files. It uses Karma and tries to run it in the browser, whereas I want it to run with my Mocha default configuration.
Jasmine tests are fine.
Used to work in 2017.1
Do you have both karma and mocha listed in your project’s package.json file?
Yes, we have both jasmine and mocha tests at the moment.
The logic used for determining what test runner is available for a given test file is based on dependencies declarations in package.json nearest to the current test file.
If you have a single package.json, with both
'karma'and'mocha'dependencies included, and there is a karma config in your project, karma is preferred – see https://youtrack.jetbrains.com/issue/WEB-26070#comment=27-2088951. To force using Mocha test runner for files in a certain directory, create a Mocha run configuration with"Test directory"set to this directory.Hi folks I have a problem. In 2017.2 broken “Autoscroll from Source” in “Project” window.
Working on MacOS Siera.
I tried 2017.3 – it’s won’t work too. In 2017.1 everything is fine.
Copying the reply from Twitter: “Haven’t reproduced it so far in WS2017.2.4 on macOS. It doesn’t work all the time, does it? Do you have any plugins installed?”