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

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

Ekaterina Prigara

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

#documentation #git #Prettier #WebStorm 2018.1
Comments below can no longer be edited.

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

  1. Colliot says:

    February 23, 2018

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

    • Ekaterina Prigara says:

      February 26, 2018

      Thanks for noticing! I’ve fixed the typo.

  2. Lukasz Gandecki says:

    February 23, 2018

    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:

      February 24, 2018

      Hi Lucasz,

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

      Regards,
      Bernardo.

      • Michael Wills says:

        September 26, 2018

        Thanks for bringing up the Save Actions plugin Bernardo. Seems to work quite well.

    • Ekaterina Prigara says:

      February 26, 2018

      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:

        March 13, 2018

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

        • Stujo says:

          November 14, 2018

          Do you know if: This is supported in the IDE, or only with the manual action?

      • Jonathan says:

        March 18, 2018

        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:

          March 19, 2018

          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:

    March 26, 2018

    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.

    • Ekaterina Prigara says:

      March 28, 2018

      Great to hear that you like this new feature! At the moment, there’s no option that will keep the dialog open. Please vote for this feature request: https://youtrack.jetbrains.com/issue/IDEA-131673

  4. Oleh Lustenko says:

    April 5, 2018

    Integration with Prettier is nice!

    It’s possible to configure prettier settings ?

    • Ekaterina Prigara says:

      April 5, 2018

      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:

    April 30, 2018

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

    • lena_spb says:

      May 1, 2018

      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:

    May 8, 2018

    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?

    • Maxim Kropotov says:

      May 8, 2018

      Glenn, unfortunately there was some confusion re: if HTML files should be formatted. caused by the fact that HTML is not officially supported, but is processed by the CLI anyway. After this issue HTML files should not be touched any more: https://youtrack.jetbrains.com/issue/WEB-31708#comment=27-2749711. If you are seeing something different, please make sure your IDE and the Prettier plugin are both updated to the latest version.

      More generally, .prettierignore files are not currently processed, as it seems there is no way to pass the ignored values to Prettier via the API it exposes. I’ve created an issue to address this: https://youtrack.jetbrains.com/issue/WEB-32711.

      • Alex Mabry says:

        October 23, 2018

        Maxim,
        Any update on this?

        • Maxim Kropotov says:

          October 24, 2018

          Will try to make it available in a bugfix update to 2018.3, since .gitignore information was made available via the NodeJS API some time ago.

        • Ekaterina Prigara says:

          October 24, 2018

          Hello Alex,
          No, no updates on that. Please follow this issue: https://youtrack.jetbrains.com/issue/WEB-32711

  7. Peter Kellner says:

    October 2, 2018

    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:

      October 2, 2018

      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. Alejandro Garrido says:

    October 15, 2018

    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?
    Thanks

    • Ekaterina Prigara says:

      October 15, 2018

      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:

        December 18, 2018

        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:

          December 19, 2018

          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:

    December 20, 2018

    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?

    • Ekaterina Prigara says:

      December 20, 2018

      Hello, no, sorry, it’s not possible to configure WebStorm this way.

Latest Tweets

Related posts