AppCode
CLion
DataGrip
GoLand
IntelliJ IDEA
MPS
PhpStorm
PyCharm
Rider
RubyMine
WebStorm
Toolbox App
.NET Tools
ReSharper C++
Space
TeamCity
Upsource
YouTrack
DataLore
Hub
Kotlin
KtorWebStorm 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.
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).
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.
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.
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.
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.
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
Colliot says:
February 23, 2018An “eternal” tool? Shouldn’t it be “external”?
Ekaterina Prigara says:
February 26, 2018Thanks for noticing! I’ve fixed the typo.
Lukasz Gandecki says:
February 23, 2018Fantastic 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, 2018Hi Lucasz,
I use Save Actions plugin to accomplish this. Hope they could work together.
Regards,
Bernardo.
Michael Wills says:
September 26, 2018Thanks for bringing up the Save Actions plugin Bernardo. Seems to work quite well.
Ekaterina Prigara says:
February 26, 2018No, 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, 2018For what it’s worth, the web development community (which Webstorm targets) has moved to formatting with Prettier on save.
Stujo says:
November 14, 2018Do you know if: This is supported in the IDE, or only with the manual action?
Ekaterina Prigara says:
November 20, 2018Stujo,
You can find the configuration for running Prettier on save in WebStorm here: https://prettier.io/docs/en/webstorm.html
Jonathan says:
March 18, 2018File 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, 2018Hello 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.
Wojciech Owczarczyk says:
March 26, 2018I 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, 2018Great 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
Oleh Lustenko says:
April 5, 2018Integration with Prettier is nice!
It’s possible to configure prettier settings ?
Ekaterina Prigara says:
April 5, 2018You 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.
Johhan Santana says:
April 30, 2018In the latest update, I can’t seem to find the reformat with prettier option anymore :l
lena_spb says:
May 1, 2018it’s definitely there, available via Help | Find action
please make sure to specify a path to Prettier package in Settings | Languages & Frameworks | JavaScript | Prettier
Glenn Dwiyatcita says:
May 8, 2018I have
**/*.htmlin 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, 2018Glenn, 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, 2018Maxim,
Any update on this?
Maxim Kropotov says:
October 24, 2018Will 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, 2018Hello Alex,
No, no updates on that. Please follow this issue: https://youtrack.jetbrains.com/issue/WEB-32711
Peter Kellner says:
October 2, 2018Am 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, 2018Yes, 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.
Alejandro Garrido says:
October 15, 2018Hi,
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, 2018Does 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, 2018I’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, 2018Hello 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?
Nauris says:
December 20, 2018I 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, 2018Hello, no, sorry, it’s not possible to configure WebStorm this way.