Welcome WebStorm 2017.1, the first big update this year!
We’ve added support for such exciting technologies as Vue.js and Jest, brought more flexibility to code styles, improved React and Angular support, and so much more!
Explore all the new features on our website or in this overview video:
Highlights include:
- Vue.js support: coding assistance for Vue template language; completion and automatic import for Vue components
- Jest integration: run Jest tests and see the results right in the IDE
- Support for Standard style and lots of new code style options: use of semicolons and trailing commas, quote style, sorting for imports, and more
- Imports for React components are added automatically
- Completion for modules in package.json; TSLint-powered quick-fixes; support for the Angular language service; new module dependency diagram; test status icons in the editor; emoji support in the editor 🎉.
Download WebStorm 2017.1 on our website now!
JetBrains WebStorm Team
Congrats on being restless with new features.
So..
Is it now a good time to focus on Elm?
Thanks!
You’re the first person who’s asking :) Please submit a feature request on https://youtrack.jetbrains.com/issues/WEB
absolutely love vue.js support. thank you for awesome work.
Plenty of new bugs come bundled as usual with all major releases. Good that I always keep previous version because I learned tough lessons with JetBrains software-as-service business model. Going to wait for update and will try again… Maybe.
Would appreciate if you point us to the bugs you’ve encountered. Thank you!
Are there any performance improvements?
I use WebStorm, it a great tool, but sometime it takes heavy toll on my system, utilizes lot of memory.
Hope it performs better with new updates.
Looking forward to renew my license.
We’re constantly working on performance improvements in various IDE subsystems. If you experience any performance issues, please report them to us: send the content of your IDE log folder (menu Help – Show log) to https://youtrack.jetbrains.com/issues/WEB and, if possible, a CPU snapshot captured when the problem appears: https://intellij-support.jetbrains.com/hc/en-us/articles/207241235-Reporting-performance-problems
Some problems might appear only with some very specific configuration or project structure and providing us with the diagnostic data helps us a lot. Thanks!
Hi,
i am having a problem with Keymap shortcut for Find in path …
I am using Mac OS Sierra, latest Version and latest Version of WebStorm.
I set the shortcut to ALT+F and it works great in rubymine but after Update to WebStorm 2017.1 (20. March) it doesn’t work any more. If i select view/find/find in path it makes small sound like command not found, but once i click it the second time it starts. The shortcut doesn’t work at all.
Can you please advise?
Can you please check what shortcut is assigned to this action in Preferences | Keymap. You can search by the action name.
a tip: when I update from 2016.3 to 2017.1 webstorm should properly import ALL previous settings. In my case the font family of the code and font sizes are different, some colors are different, the font size of the whole IDE (project tree) is smaller, I need to adjust it again, it’s annoying…
We’re sorry. The issue has been already addressed.
That explains why I hit this issue when I upgraded the desktop, but not when I upgradedthe laptop a couple of days later
I’m using macOS, and my projects no longer close when I click the ‘x’ button.
I have to do a full quit of webstorm (command + q) to close any ghost project windows.
Can you please try File – Close project action in the menu. Does that work?
Close Project is disabled :(
Do you have any third-party plugins installed? If yes, please try to disable them and see whether it fixes the problem.
Can you also please send us the content of the IDE log folder (menu Help – Show logs). You can either report a new issue here https://youtrack.jetbrains.com/issues/WEB or contact our tech support via https://intellij-support.jetbrains.com/hc/en-us/requests/new
Thanks!
I can’t get jest tests working. I get
Cannot find module ‘./jest.config.js’ from ‘jest-intellij-jasmine.js’
This is in a project where package.json is NOT at the top level (and it’s in IntelliJ 2017.1)
I have Jest 18.1.0 – do I need 19?
I have tried clicking the little run test triangle, or right clicking to create a run configuration, or manually creating a run configuration and setting the working directory to the path where my package.json resides.
Is ‘./jest.config.js’ configured as ‘setupTestFrameworkScriptFile’ by chance? If yes, this issue will be fixed in the next WebStorm 2017.1 minor update: https://youtrack.jetbrains.com/issue/WEB-26029. Otherwise, please provide more details about your jest configuration (preferably, in a new issue in https://youtrack.jetbrains.com/issues/WEB#newissue). Thanks.
Thanks Sergey. That’s some top-notch guessing, and spot on.
I only realised after I posted that jest.config.js was MY file, and referenced by setupTestFrameworkScriptFile.
This seems to work great for ES5 tests but I am back to Unexpected Token Import when I run tests written in ES2015/ES2016 notation. Is there a way to do this without using a transpiler first? Something like babel-jest?
I have this same issue. It doesn’t seem to use the .babelrc in the project root like it will do if I running tests using the CLI. How do we use our .babelrc to run those Jest test with Webstorm?
Strange, running jest tests with ES2015 works for me, tried on https://github.com/facebook/jest/tree/master/examples/async (
.babelrcin the project root) using CLI and IDE.Could you guys provide more details about your test configurations?
Hi, I’m having the same issue.
I have node v6.9.5 running, and have just created a new project with react-create-app.
From CLI, ‘npm run test’ launches the jest test on App.test.js which runs fine. Tried to run the same test via Webstorm (the march 17, 2017 build) and also have the Unexpected token import error.
Added a .babelrc in the root directory with presets for ‘react’ and ‘es2015’. Tried to run again, but same error.
I’d love to have a detailed walk through how to test a react app (and debug a test!) from within Webstorm, to get past the ‘unexpected token’ and ‘module not found’ pitfalls. I assume this possible in Webstorm as an IDE?
Hi,
The issue with running/debugging jest tests in projects created with create-react-app will be fixed in the upcoming WebStorm 2017.1.2 (https://youtrack.jetbrains.com/issue/WEB-26048). Sorry for the inconvenience.
@Sergey
What am I missing, I’m still getting the problem in 2017.4. Works if I
npm run testbut not in Webstorm. Here’s my setup:https://gist.github.com/abcd-ca/95e4710b5fbd9143f596f36a1d64de33
The test task in the package.json is defined as
"test": "react-scripts test --env=jsdom", so please make sure that you pass--env=jsdomas a Jest option in the run/debug configuration.Thanks Ekaterina. I added it but I still get, “SyntaxError: Unexpected token import”
Added jest options
https://gist.github.com/abcd-ca/95e4710b5fbd9143f596f36a1d64de33
Just to be sure I understand you correctly: is your application generated using create-react-app? Was it ejected? So far we don’t have enough information to reproduce the issue you have. Please also try to run a Jest configuration with
--no-cacheoption: https://facebook.github.io/jest/docs/troubleshooting.html#caching-issuesSuper slow on JavaScript code completion and highlight, 15-30s to show completion box and 7-10s to render highlight color.
Unable to find somewhere report this issue, so, i reported it to here.
Please send the content of your IDE log folder (menu Help – Show logs) and, if possible, a CPU snapshot captured during the slowdown, to our issue tracker or technical support. Please also make sure that all the folders that are updated automatically on changes with some build tools are excluded from the project (right-click on the folder in the Project view – Mark as Excluded). Thanks!
same here. I created an issue with the requested files.
https://youtrack.jetbrains.com/issue/IJSDK-265
The diagram feature has awesome potential – looking forward how it will evolve in the near future.
Sadly ‘find usage of /index.js’ (https://youtrack.jetbrains.com/issue/WEB-19752) still didn’t make it into this release; hope the team could get some attention on that ;)
https://blog.jetbrains.com/webstorm/2016/12/webstorm-2016-3-2/#comment-286832
Bug: select all does not work via the keyboard shortcut Command+A in an editor window on Mac (interestingly, just opening then closing the Edit menu makes the shortcut suddenly work.. until it doesn’t again).
Also, am I the only one that finds the new UI for the Find in Path “dialog” really irritating? It seems like JetBrains is using our $$ to change things that work fine and don’t need to be changed. In this case, it seems like they are making the product harder to use just so it can look visually slick to some graphic design manager or something.
The problem with the Select all action has already been fixed and the fix will land in one of the upcoming bug-fix updated. In the meantime, please follow the steps described in this comment as a workaround: https://youtrack.jetbrains.com/issue/JRE-280#comment=27-2053977 Sorry for the inconvenience.
There’s been a dozen of UX issues with the old Find in path dialog that was addressed with this redesign.
In vue template, Custom components are added with extra lines when formatting, like this
https://jsfiddle.net/4mpf6x1r/6/
How to remove extra lines ? this not happen in html file
Can you please provide a bit more details on when exactly this extra line appears: when you select a component name from the completion popup? or when you reformat you code?
Each press Ctrl + Alt + L will add a blank line, more and more
Thanks! The fix going to be available in the next bug-fix update: https://youtrack.jetbrains.com/issue/WEB-25959
You can now get it under the early access program here: https://confluence.jetbrains.com/display/WI/WebStorm+EAP
Is there a way to return search behaviuor from prev version?
I mean Ctrl + Shift + F, now when you press Enter IDE doesn’t opens all results.
You can see all results in the Find tool window if you want. Click the button on the bottom-left corner of the window. Next to the button, a hotkey you can use to open a tool window is written – on macOS it’s cmd-enter.
No, actually you can’t. You need to click “Open in Find Window” or Ctrl + Enter before.
Sorry, I mean could Ctrl + Enter simply changed to Enter?
Please vote for this issue: https://youtrack.jetbrains.com/issue/IDEA-169996
Since i updated to 2017.1 auto format and save has became SO SLOW – it basically locks up the entire interface for 10-15 seconds of an open PHP file and i can’t do anything…
What can we do to resolve this?
Sorry to hear that. Please send the content of your IDE log folder (menu Help – Show logs) to the PhpStorm (you’re using it, right?) tracker: https://youtrack.jetbrains.com/issues/WI
2017.1 update has left me IDE unusable. It launches with no text inside of the window chrome and dialog windows. I can’t change anything like disable plugins to resolve problem.
Can I roll back to me old version some how?
Sorry to hear that. Can you please send us the content of your IDE log folder (menu Help – Show log) to https://youtrack.jetbrains.com/issues/WEB for the investigation. Here you can find download links for older versions: https://www.jetbrains.com/webstorm/download/previous.html
My WS 2017.1 doesn’t like MacOS Sierra being locked..When I came back, it always freezes.
Sorry to hear that. Can you please sent us the content of your IDE log folder (menu Help – Show log) to https://youtrack.jetbrains.com/issues/WEB for the investigation. Thanks!
Any ideas on why {{ }} syntax does not autocomplete on .vue files in the template tags? Is there some setting I am missing? It works great in the script tag section but typing 2 opening braces does not autocomplete in the HMTL template.
Completion for the closing curly braces is not yet added. Please follow this issue for updates: https://youtrack.jetbrains.com/issue/WEB-26051
System reboot when I start a node process , I’m using macos sierra.
How do you start a process? What code is executed?
sorry , its nothing with webstorm…
I set the line-height of the 19px, but live edit show that element 18.1px. But this is not true. Please help, so hard to work pixel perfect. Screenshot
https://pp.userapi.com/c636827/v636827758/683e6/ZdZ6JAE7cTE.jpg
Please check that this page is not zoomed out in Chrome.
It seems like the javascript in any vue.js’s single file component can not be inspected by the “stander style”