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

🎉 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.

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

About Ekaterina Prigara

Ekaterina Prigara is WebStorm product marketing manager at JetBrains. She's passionate about new technologies, UX and coffee.
This entry was posted in Release Announcements and tagged , , , , , . Bookmark the permalink.

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

  1. Denis Marinov says:

    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!

  2. Helmuth Saatkamp says:

    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:

    Great update, thanks!

  4. Bogdan Zaharia says:

    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.

  5. Rob says:

    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:

    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:

      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:

        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 :D
        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:

          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:

            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. :D

          • Ekaterina Prigara says:

            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:

    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?

  8. Vadorequest says:

    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:

    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:

      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.

  10. spaceoi says:

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

    Thanks

    • Ekaterina Prigara says:

      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”.

  11. Bhish says:

    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:

      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:

        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:

          > 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:

    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?

Leave a Reply

Your email address will not be published. Required fields are marked *