WebStorm 2017.1 released: Vue.js, Jest, new code style options, Standard Style, and more
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:
https://www.youtube.com/watch?v=gfXTak1qexI
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
Birowsky says:
March 20, 2017Congrats on being restless with new features.
So..
Is it now a good time to focus on Elm?
Ekaterina Prigara says:
March 20, 2017Thanks!
You’re the first person who’s asking 🙂 Please submit a feature request on https://youtrack.jetbrains.com/issues/WEB
cz says:
March 20, 2017absolutely love vue.js support. thank you for awesome work.
A B says:
March 20, 2017Plenty 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.
Ekaterina Prigara says:
March 21, 2017Would appreciate if you point us to the bugs you’ve encountered. Thank you!
Shivaji Varma says:
March 21, 2017Are 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.
Ekaterina Prigara says:
March 21, 2017We’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!
Ivan Stojkovic says:
March 22, 2017Hi,
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?
Ekaterina Prigara says:
March 22, 2017Can you please check what shortcut is assigned to this action in Preferences | Keymap. You can search by the action name.
Kris says:
March 22, 2017a 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…
Ekaterina Prigara says:
March 22, 2017We’re sorry. The issue has been already addressed.
Max Hadley says:
March 23, 2017That explains why I hit this issue when I upgraded the desktop, but not when I upgradedthe laptop a couple of days later
Sam Albert says:
March 23, 2017I’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.
Ekaterina Prigara says:
March 24, 2017Can you please try File – Close project action in the menu. Does that work?
Samuel Albert says:
March 24, 2017Close Project is disabled 🙁
Ekaterina Prigara says:
March 24, 2017Do 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!
David Gilbertson says:
March 24, 2017I 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.
Sergey Simonchik says:
March 24, 2017Is ‘./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.
David Gilbertson says:
March 26, 2017Thanks 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.
Michael says:
March 24, 2017This 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?
Ferran Negre Pizarro says:
March 27, 2017I 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?
Sergey Simonchik says:
March 27, 2017Strange, running jest tests with ES2015 works for me, tried on https://github.com/facebook/jest/tree/master/examples/async (`.babelrc` in the project root) using CLI and IDE.
Could you guys provide more details about your test configurations?
robbie says:
April 13, 2017Hi, 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?
Sergey Simonchik says:
April 14, 2017Hi,
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.
Andrew says:
July 10, 2017@Sergey
What am I missing, I’m still getting the problem in 2017.4. Works if I `npm run test` but not in Webstorm. Here’s my setup:
https://gist.github.com/abcd-ca/95e4710b5fbd9143f596f36a1d64de33
Ekaterina Prigara says:
July 11, 2017The 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.Andrew Blair says:
July 11, 2017Thanks Ekaterina. I added it but I still get, “SyntaxError: Unexpected token import”
Andrew Blair says:
July 11, 2017Added jest options
https://gist.github.com/abcd-ca/95e4710b5fbd9143f596f36a1d64de33
Ekaterina Prigara says:
July 12, 2017Just 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-issuesAriane says:
March 25, 2017Super 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.
Ekaterina Prigara says:
March 27, 2017Please 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!
warrio says:
June 2, 2017same here. I created an issue with the requested files.
https://youtrack.jetbrains.com/issue/IJSDK-265
booya2nd says:
March 27, 2017The 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
Adrian says:
March 27, 2017Bug: 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.
Ekaterina Prigara says:
March 28, 2017The 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.
Yusoo says:
March 30, 2017In 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
Ekaterina Prigara says:
March 30, 2017Can 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?
Yusoo says:
March 30, 2017Each press Ctrl + Alt + L will add a blank line, more and more
Ekaterina Prigara says:
March 30, 2017Thanks! 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
Roman says:
March 31, 2017Is 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.
Ekaterina Prigara says:
March 31, 2017You 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.
Roman says:
March 31, 2017No, actually you can’t. You need to click “Open in Find Window” or Ctrl + Enter before.
Roman says:
March 31, 2017Sorry, I mean could Ctrl + Enter simply changed to Enter?
Ekaterina Prigara says:
March 31, 2017Please vote for this issue: https://youtrack.jetbrains.com/issue/IDEA-169996
Martin Kovachev says:
April 5, 2017Since 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?
Ekaterina Prigara says:
April 5, 2017Sorry 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
James Weaver says:
April 6, 20172017.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?
Ekaterina Prigara says:
April 7, 2017Sorry 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
Ray says:
April 7, 2017My WS 2017.1 doesn’t like MacOS Sierra being locked..When I came back, it always freezes.
Ekaterina Prigara says:
April 7, 2017Sorry 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!
Michael Fromin says:
April 9, 2017Any 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.
Ekaterina Prigara says:
April 10, 2017Completion for the closing curly braces is not yet added. Please follow this issue for updates: https://youtrack.jetbrains.com/issue/WEB-26051
wei yan says:
April 24, 2017System reboot when I start a node process , I’m using macos sierra.
Ekaterina Prigara says:
April 24, 2017How do you start a process? What code is executed?
wei yan says:
April 24, 2017sorry , its nothing with webstorm…
George N says:
May 18, 2017I 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
Ekaterina Prigara says:
May 18, 2017Please check that this page is not zoomed out in Chrome.
Fancy says:
October 24, 2017It seems like the javascript in any vue.js’s single file component can not be inspected by the “stander style”