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
An “eternal” tool? Shouldn’t it be “external”?
Thanks for noticing! I’ve fixed the typo.
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.
Hi Lucasz,
I use Save Actions plugin to accomplish this. Hope they could work together.
Regards,
Bernardo.
Thanks for bringing up the Save Actions plugin Bernardo. Seems to work quite well.
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.
For what it’s worth, the web development community (which Webstorm targets) has moved to formatting with Prettier on save.
Do you know if: This is supported in the IDE, or only with the manual action?
Stujo,
You can find the configuration for running Prettier on save in WebStorm here: https://prettier.io/docs/en/webstorm.html
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.
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.
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.
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
Integration with Prettier is nice!
It’s possible to configure prettier settings ?
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.
In the latest update, I can’t seem to find the reformat with prettier option anymore :l
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
I 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?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.
Maxim,
Any update on this?
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.
Hello Alex,
No, no updates on that. Please follow this issue: https://youtrack.jetbrains.com/issue/WEB-32711
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?
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.
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
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
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.
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?
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?
Hello, no, sorry, it’s not possible to configure WebStorm this way.