WebStorm 2018.1 EAP, 181.3870: Reformat code with Prettier, partial commits in Git

The new WebStorm 2018.1 Early Preview build (181.3870.1) is now available!

You can update via Toolbox App, or download the build here and install it beside your stable WebStorm version.

Download WebStorm 2018.1 EAP

To learn more about all the new features added in earlier WebStorm 2018.1 EAP builds, please check out these blog posts.

Reformat code with Prettier

Prettier is a code formatting tool for JavaScript and TypeScript. While it was possible to configure and use it in WebStorm as an external tool, we decided to make the integration with it more seamless.

Now, if you have prettier installed as your project dependency or globally on your machine, you can use the new Reformat with Prettier action (Alt-Shift-Cmd/Ctrl-P) to format the selected code, a file or a whole directory. You can also find this action using the Find Action popup (Cmd/Ctrl-Shift-A).

New action Reformat with Prettier

When you use refactorings, code snippets, quick-fixes or auto imports in WebStorm, the IDE uses its own formatting to generate the new code. To make sure that this new code looks good straight away (uses the right quote style, indent size, etc) and doesn’t stand out from the code that is already reformatted with Prettier, WebStorm applies the key code style rules from the Prettier’s default or custom configuration to its Code Style settings.

If for some reason WebStorm hasn’t detected Prettier in your project and the action Reformat with Prettier is disabled, please specify the path to the prettier package in Preferences | Languages & Frameworks | Prettier.

Please note that right now you can only reformat the JavaScript and TypeScript files with Prettier in WebStorm. We plan to make this action available to the other file types supported by Prettier soon.

Markdown in documentation popup

2 weeks ago we told you about the changes we’re making to improve the documentation popup. This week we’ve added proper rendering for Markdown used in JSDoc comments in the documentation popup.

Markdown in JSDoc

Partial commits in Git

WebStorm now supports partial Git commits (git add -p). You can now commit only selected changes from the file and skips all other changes.

You can include code chunks into a commit using the checkboxes in the Diff pane of the Commit Changes dialog.

Git partial commit on a Commit Changes dialog

You can also now associate the code chunks, not the whole file, with a changelist, and track them separately. Code chunks can be quickly moved between changelists using the Move to another changelist action which is available from the context menu of the Diff pane in the Commit Changes dialog.

New action Move to another chanhelist

Alternatively, you can add code chunks to a changelist right from the editor – click on a change marker on the gutter and select a changelist or create a new one.

Move change to a changelist from the editor

You can find a full list of issues fixed in the WebStorm project in the Release Notes.

Please share your feedback and report issues on our tracker. Thank you!

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 Early Access Preview and tagged , , , . Bookmark the permalink.

30 Responses to WebStorm 2018.1 EAP, 181.3870: Reformat code with Prettier, partial commits in Git

  1. Colliot says:

    An “eternal” tool? Shouldn’t it be “external”?

  2. Lukasz Gandecki says:

    Fantastic news with the Prettier integration!

    Any chance to have a “format at save” functionality? This way you don’t ever have to think about formatting your code again, doing that in visual studio is a fantastic experience.

    • Bernardo Baumblatt says:

      Hi Lucasz,

      I use Save Actions plugin to accomplish this. Hope they could work together.


    • Ekaterina Prigara says:

      No, sorry, we don’t plan to add this feature. In the IntelliJ platform, which WebStorm is based on, we believe that files should be saved automatically and actions like formatting shouldn’t be aligned with saving the file.
      You can configure and use a File Watcher as described here if you want to run Prettier on save.

      • Rick Hanlon says:

        For what it’s worth, the web development community (which Webstorm targets) has moved to formatting with Prettier on save.

      • Jonathan says:

        File Watcher with prettier is not working properly. The reformated code is not showing immediately in the editor window when I’m editing and saving a file. Only after I switch to another file and then back. If I instead just keep on working on the file, I get a “File Cache Conflict”.
        The same is true if I don’t use the PhpStorm integration and use a npm onwatch script (https://prettier.io/docs/en/watching-files.html).
        So, believe what you want, but right now prettier, which is quickly becoming the standard code formating tool, is NOT working properly with PhpStorm. How should it work? Exactly like in VS Code (with formating on save activated). You save and immediately see the re-formated code. VS Code is tempting anyway, so you better get this working somehow.

        • Ekaterina Prigara says:

          Hello Jonathan,
          Thank you for the feedback.
          When using a file watcher, can you please make sure that the Output paths to refresh field is not empty – it should have the file path as in the Arguments field (e.g. $FilePath$). That way WebStorm will sync the changes as soon as prettier is run. I will send a PR with the correct setup to the prettier’s documentation.

  3. Wojciech Owczarczyk says:

    I like the partial commit option. Would it be possible not to close the commit window on “Commit”? Sometimes I would like to commit different chunks of code using different messages and I find it a bit tedious having to reopen the commit window each time.

  4. Oleh Lustenko says:

    Integration with Prettier is nice!

    It’s possible to configure prettier settings ?

    • Ekaterina Prigara says:

      You can add a Prettier configuration file to your project or add the options to the package.json file as suggested here – WebStorm will use this configuration when formatting with Prettier.

  5. Johhan Santana says:

    In the latest update, I can’t seem to find the reformat with prettier option anymore :l

    • lena_spb says:

      it’s definitely there, available via Help | Find action
      please make sure to specify a path to Prettier package in Settings | Languages & Frameworks | JavaScript | Prettier

  6. Glenn Dwiyatcita says:

    I have **/*.html in my .prettierignore file but WebStorm still formats the HTML files when I run Prettier against a whole directory. Is this by design or a bug?

  7. Am I correct in understanding that if I run prettier, that I get a different format then if I do Code/Reformat? If so, any way to have code/reformat run prettier?

    • Ekaterina Prigara says:

      Yes, the results might differ. We recommend using the Reformat with Prettier action instead of the usual Reformat code – you can assign a familiar shortcut for Reformat with Prettier in Preferences | Keymap.

  8. Hi,

    I cannot set
    “prettier.singleQuote”: true,
    “prettier.printWidth”: 100
    in a resource config file.
    Prettier plugin does not take into account this setting file nor these settings introduced directly in package.json file. What can I do?

    • Ekaterina Prigara says:

      Does prettier see this configuration when you run it from the command line? Can you please provide a bit more details about this resource config file? Here are the config files that Prettier recognises: https://prettier.io/docs/en/configuration.html

      • Rane Wallin says:

        I’m having the same issue. I’ve tried all of the config file names, as well as adding the rules to the package.json file. When I reformat with prettier it does not apply those rules (tabSpacing and singleQuote specifically). I also have a file watcher set and it reformats on save, but uses the default formatting.

        • Ekaterina Prigara says:

          Hello Rane,
          Do I understand correctly that when you run Prettier using a file watcher, it also ignores your custom configuration? Does that happen when you run prettier from the command line?
          What WebStorm and Prettier versions do you use?

  9. Nauris says:

    I wish there was some ‘magic format code’ command, that used Prettier if it is available and Webstorm’s Reformat code as a fallback for projects without Prettier.

    or is possible to save keybinding configuration in project’s .idea folder?

Leave a Reply

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