Blog Blog
Home
Home/WebStorm/WebStorm 2017.1 released: Vue.js, Jest, new code style options, Standard Style, and more

WebStorm 2017.1 released: Vue.js, Jest, new code style options, Standard Style, and more

Posted on by Ekaterina Prigara

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

#Angular #Jest #React #Vue #WebStorm 2017.1
Comments below can no longer be edited.

58 Responses to WebStorm 2017.1 released: Vue.js, Jest, new code style options, Standard Style, and more

  1. Birowsky says:

    March 20, 2017

    Congrats on being restless with new features.

    So..

    Is it now a good time to focus on Elm?

  2. cz says:

    March 20, 2017

    absolutely love vue.js support. thank you for awesome work.

  3. A B says:

    March 20, 2017

    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.

    • Ekaterina Prigara says:

      March 21, 2017

      Would appreciate if you point us to the bugs you’ve encountered. Thank you!

  4. Shivaji Varma says:

    March 21, 2017

    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.

  5. Ivan Stojkovic says:

    March 22, 2017

    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?

    • Ekaterina Prigara says:

      March 22, 2017

      Can you please check what shortcut is assigned to this action in Preferences | Keymap. You can search by the action name.

  6. Kris says:

    March 22, 2017

    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…

    • Ekaterina Prigara says:

      March 22, 2017

      We’re sorry. The issue has been already addressed.

      • Max Hadley says:

        March 23, 2017

        That explains why I hit this issue when I upgraded the desktop, but not when I upgradedthe laptop a couple of days later

  7. Sam Albert says:

    March 23, 2017

    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.

    • Ekaterina Prigara says:

      March 24, 2017

      Can you please try File – Close project action in the menu. Does that work?

  8. David Gilbertson says:

    March 24, 2017

    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.

    • Sergey Simonchik says:

      March 24, 2017

      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.

      • David Gilbertson says:

        March 26, 2017

        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.

  9. Michael says:

    March 24, 2017

    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?

    • Ferran Negre Pizarro says:

      March 27, 2017

      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?

      • Sergey Simonchik says:

        March 27, 2017

        Strange, 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, 2017

          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?

          • Sergey Simonchik says:

            April 14, 2017

            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.

          • 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, 2017

              The test task in the package.json is defined as "test": "react-scripts test --env=jsdom", so please make sure that you pass --env=jsdom as a Jest option in the run/debug configuration.

          • Andrew Blair says:

            July 11, 2017

            Thanks Ekaterina. I added it but I still get, “SyntaxError: Unexpected token import”

          • Andrew Blair says:

            July 11, 2017

            Added jest options

            https://gist.github.com/abcd-ca/95e4710b5fbd9143f596f36a1d64de33

            • Ekaterina Prigara says:

              July 12, 2017

              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-cache option: https://facebook.github.io/jest/docs/troubleshooting.html#caching-issues

  10. Ariane says:

    March 25, 2017

    Super 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, 2017

      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!

  11. booya2nd says:

    March 27, 2017

    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

  12. Adrian says:

    March 27, 2017

    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.

    • Ekaterina Prigara says:

      March 28, 2017

      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.

  13. Yusoo says:

    March 30, 2017

    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

    • Ekaterina Prigara says:

      March 30, 2017

      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?

  14. Roman says:

    March 31, 2017

    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.

    • Ekaterina Prigara says:

      March 31, 2017

      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.

      • Roman says:

        March 31, 2017

        No, actually you can’t. You need to click “Open in Find Window” or Ctrl + Enter before.

      • Roman says:

        March 31, 2017

        Sorry, I mean could Ctrl + Enter simply changed to Enter?

  15. Martin Kovachev says:

    April 5, 2017

    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?

    • Ekaterina Prigara says:

      April 5, 2017

      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

  16. James Weaver says:

    April 6, 2017

    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?

  17. Ray says:

    April 7, 2017

    My WS 2017.1 doesn’t like MacOS Sierra being locked..When I came back, it always freezes.

    • Ekaterina Prigara says:

      April 7, 2017

      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!

  18. Michael Fromin says:

    April 9, 2017

    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.

  19. wei yan says:

    April 24, 2017

    System reboot when I start a node process , I’m using macos sierra.

    • Ekaterina Prigara says:

      April 24, 2017

      How do you start a process? What code is executed?

      • wei yan says:

        April 24, 2017

        sorry , its nothing with webstorm…

  20. George N says:

    May 18, 2017

    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

  21. Fancy says:

    October 24, 2017

    It seems like the javascript in any vue.js’s single file component can not be inspected by the “stander style”

Latest Tweets

Related posts