WebStorm 2018.1: Prettier, partial Git commits, new documentation UI, and more

Posted on by Ekaterina Prigara

🎉 Today we’re announcing WebStorm 2018.1! 🎉

With this big spring update, WebStorm brings integration with Prettier, lots of improvements in support for JavaScript, TypeScript, and CSS, and so much more!

Explore the new features and download WebStorm 2018.1 on our website.

https://youtu.be/EVwJzxLPU3A

Here are the key highlights of WebStorm 2018.1 that you can’t miss:

  • Format your code with Prettier with a shortcut, Alt-Shift-Cmd/Ctrl-P.
  • Commit to Git or add to a changelist only selected changes from a file.
  • Enjoy the new, more compact and lightweight documentation popup for JavaScript, TypeScript, and other languages.
  • Create new Vue projects from the IDE’s Welcome screen using Vue CLI, and create new components using the Extract Vue Component refactoring.
  • Configure Yarn or npm as a package manager used in the project, in the Node.js and npm preferences.
  • Debug React Native apps that use Expo, as well as those already built and launched on a device.


Download WebStorm 2018.1

WebStorm Team

Comments below can no longer be edited.

42 Responses to WebStorm 2018.1: Prettier, partial Git commits, new documentation UI, and more

  1. Denis Marinov says:

    March 26, 2018

    Hi there,

    Nicely done! Though, would you like to add code editor gutter icons for running code block, like shown in other EAP’s of related Jetbrains projects?

    That would be great! Thank you!

    • Ekaterina Prigara says:

      March 26, 2018

      Hello Denis,
      What product was that? Can you please send a link?
      Thanks!

      • Denis Marinov says:

        March 26, 2018

        I saw that with PHPStorm (https://blog.jetbrains.com/phpstorm/2018/03/testing-improvements-in-phpstorm-2018-1/) and also with Clion, which I use for my C/C++ projects. They have that gutter icon for running classes, functions etc.

        • Ekaterina Prigara says:

          March 26, 2018

          In WebStorm you can also run tests using the gutter icons – it works for Karma, Mocha and Jest tests.

          • dsmjet says:

            March 26, 2018

            I have to look into that. But can’t you just have the gutter icons on the gutter without having to use one of the above?

            • Ekaterina Prigara says:

              March 27, 2018

              Can you please explain what do you want these icons to do? Run the selected code, block or file with Node.js? Run this code in the browser console?
              If you want to run a file with Node.js, you can do it pretty easily right now – right-click on the file and select Run.

          • Denis Marinov says:

            March 28, 2018

            I thought you can do something like that https://ibb.co/jgHuc7 with a plain JavaScript function or class, but maybe that’s something with CMake and Clion. Do Karma, Mocha and Jest tests provide you with this gutter icon on the gutter?

            P.S. Can’t reply to the below ones. Don’t know why.

            • Ekaterina Prigara says:

              March 29, 2018

              Yes, there’s a gutter icon for every Mocha, Karma and Jest test.

        • Denis Marinov says:

          March 30, 2018

          Okay, I’ll have to see how those work. Thank you for your time!

  2. Helmuth Saatkamp says:

    March 26, 2018

    Great Release, love those improvements. So far, so good.
    But I found one problem with the find/replace dialog. When I try to replace something in the code, the confirmation dialog stays behind the find/replace dialog after I click the rename all button.

  3. Kyle Palko says:

    March 26, 2018

    Great update, thanks!

  4. Bogdan Zaharia says:

    March 26, 2018

    It’s great that Webstorm now has support for Prettier. Is there also an easy way to run it when saving a file? Easier and more integrated than using file watchers, I mean.

    • Ekaterina Prigara says:

      March 28, 2018

      No, sorry, the only way to run Prettier on save now is using the file watcher. By the way, we have updated the docs on configuring the file watcher – it should work smoother now: https://prettier.io/docs/en/webstorm.html

  5. Rob says:

    March 27, 2018

    Partial git commits are a first step in the right direction. I would love to see full support for all command line features, especially partial _adds_ (of new files) and line-wise commits.
    Thank you for your efforts, Webstorm’s the best web IDE by far!

  6. Julian Müller says:

    March 27, 2018

    Since updating to 2018.1 all methods in my React components are marked as ‘unused’ even though they are either default methods (render, componentWillMount, etc..) or are used inside the render method (but since marked as unused,….).

    How can I fix this or roll back to 2017 which was working like a charm 5 minutes ago!

    I tried to invalidate my cache and restarted but it doesn’t do anything.

    Help?

    • Ekaterina Prigara says:

      March 28, 2018

      Hello Julian,
      Any chance you can send us the code sample (we are interested how the component is defined)? So far we were not able to reproduce the problem?
      In the meantime, you can download WebStorm 2017.3 here: https://www.jetbrains.com/webstorm/download/previous.html
      Sorry for the inconvenience.

      • Julian Müller says:

        March 28, 2018

        I deleted the .idea folder inside the project, then hit ‘Invalidate Cache -> Restart’. After that, React code is highlighted correct again. Yay!

        There is only one problem left: The file search 😀
        When typing, not all files are shown (see picture below):
        https://imgur.com/a/WTrJL

        Only one file is shown, while you can clearly see that 3 files are starting with “Connect”.

        • Ekaterina Prigara says:

          March 28, 2018

          Has the indexing already finished? If yes, can you please still send us the IDE logs? It seems that something is wrong with the project indices – maybe some error occurred when they were built 🙁 Thanks!

          • Julian Müller says:

            March 29, 2018

            I’ve submitted a request (#1311368) and got the response that some scss file inside ‘node_modules/sass-spec…’ is causing the issue.

            However, using `find . -type d -name ‘*sass*’` I’m unable to find that folder though. 😀

            • Ekaterina Prigara says:

              March 29, 2018

              Hello Julian,
              We see that this file was under the path /node_modules/node-sass/node_modules/sass-spec when the error occurred and it caused it (you can also see that in the log file). Probably node-sass adds this package when you run some specific command and then it was removed when you’ve updated the dependencies.

  7. Julian Müller says:

    March 27, 2018

    Also “Comment with Line Comment” and “Comment with Block” comment is not working in JSX files anymore. Even the menu options are hidden, once inside a React component (Code > Comment with ….”

    Will this feature be reintroduced in a later patch for WebStorm 2018?

    • Julian Müller says:

      March 27, 2018

      Hm, strange…Had to restart WebStorm because I was unable to write Braces in my code. This fixed my issue being unable to toggle line comments.

      I’ll keep you updated regarding my other issue.

    • Ekaterina Prigara says:

      March 28, 2018

      That’s weird. Can you please send us the content of the IDE log folder (menu Help – Show Logs) to our tech support: https://intellij-support.jetbrains.com/hc/en-us/requests/new

  8. Vadorequest says:

    March 27, 2018

    The new git commit one-liner is a long-awaited and awesome feature, thanks!
    Running scripts directly from npm package is a nice to have feature as well.

  9. Ismael Venegas Castelló says:

    March 28, 2018

    PyCharm pro is advertised to also have the same features as WebStorm and DataGrip bundled, however I can not find Prettier support in PyCharm 2018.1 Pro.

    • Ekaterina Prigara says:

      March 29, 2018

      That’s right. Though, some of the plugins that are bundled with WebStorm and not bundled with PyCharm (but they all are available). You can install the Prettier plugin in PyCharm via Preferences | Plugins.

      • Ismael Venegas Castelló says:

        March 29, 2018

        Thank you!

  10. spaceoi says:

    March 29, 2018

    Can you provide a react native expo debug tutorial or guide? I’ve tried several times while nothing correct happed.

    Thanks

    • Ekaterina Prigara says:

      March 29, 2018

      Hello,
      Please check the steps described here in the “Debugging React Native apps that use Expo” section or in our docs under “To debug a React Native application that uses Expo”.

      • Zhaoyu Zhang says:

        March 31, 2018

        Thanks for your help, and yes I’ve already these docs but setting break point didn’t work.

  11. Bhish says:

    April 9, 2018

    Is there a way to configure the prettier formatter? For example we format with single quotes rather than double.

    Ideally, we actually run through ts-lint and tsling-plugin-prettier – so our prettier format rules are actually contained within our tslint.json (under rules.prettier).

    Good work btw :+1:

    • Ekaterina Prigara says:

      April 9, 2018

      You can add a Prettier configuration file to your project or add configuration options to the package.json file: https://prettier.io/docs/en/configuration.html

      • Atul says:

        April 12, 2018

        Tried using the package.json option but the settings are not picked up. Any idea how can I make the editor pick up the settings?

        • Ekaterina Prigara says:

          April 13, 2018

          > Any idea how can I make the editor pick up the settings?

          So do you want to configure the behaviour of the built-in formatter or Prettier (when you run it using the Reformat with Prettier action)?
          The latter should work fine with the config in package.json. Can you please check if it picks up the config if you run prettier from the command line?

  12. Mille says:

    May 24, 2018

    How do you use partial git commits?

    I see in Intellij that there are checkboxes, but not in Webstorm. Do I have to enable this anywhere?

    • Ekaterina Prigara says:

      May 25, 2018

      It should work the same way in WebStorm. What WebStorm version do you use?

      • Mille says:

        May 27, 2018

        I believe I’m on the latest? I’m on version 2017.3.4

  13. finelay says:

    October 22, 2018

    My WebStorm version is 2018.2.4 but I can not sea they checkboxes?
    How can i use partial git commits?