WebStorm 2020.1 EAP #5: Running Prettier on Save and Coding Assistance for Vuex Store Symbols

WebStorm 2020.1 EAP build #5 is now available!

If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out our previous EAP blog posts.

The Toolbox App is the easiest way to get the EAP builds and keep both your stable WebStorm version and any EAP versions up to date. Or you can download the EAP builds from our website. You can also choose to be notified right from the IDE when a new EAP build is available: go to Preferences/Settings | Appearance & Behavior | System Settings | Updates and select Automatically check updates for Early Access Program.

DOWNLOAD WEBSTORM 2020.1 EAP

Important! WebStorm EAP builds are not fully tested and might be unstable.

Here are some of the highlights of WebStorm 2020.1 EAP #5 (build 201.5616.21). For the full list of issues fixed in this update, see the release notes.

Running Prettier on save

Being an integral part of daily workflows for many developers, Prettier has become a de-facto standard for JavaScript code style. With WebStorm, you can easily work with this popular tool using the Reformat with Prettier action. However, until now it’s been challenging to use Prettier to apply formatting to your files on save. To do so, you had to set up a file watcher or install a third-party plugin to make it possible to use save actions. This wasn’t very straightforward and required some extra effort from you, so we’ve added a new option that lets you run Prettier on save more efficiently. You can find it in Preferences/Settings | Languages & Frameworks | JavaScript | Prettier.

running-prettier-on-save

With the Run on save for files checkbox ticked, WebStorm will apply formatting to all JavaScript and TypeScript files that you’ve edited in your project. If you want to change this default behavior and have the formatting applied to other types of files or to files located in specific directories only, you can customize it using glob patterns.

If you’re ready to give this new functionality a go, don’t forget to disable the file watcher you’ve been using for this purpose.

Code completion and resolution for store symbols within Vuex store

We’re continuing to improve Vue.js support in WebStorm. In this EAP build, you can find some further enhancements to Vuex support, such as code completion for Vuex store symbols within the Vuex store code.

vuex-completion-for-cartjs

You can now also expect literal and identifier references to Vuex store symbols located within the Vuex store and module code to be properly resolved.

vuex-completion-for-cartjs-2

That’s it for the most notable highlights. Here are some of the smaller changes:

  • A while ago, we added an inspection (Alt+Enter) that would warn you whenever you had imports whose from part could be shortened by importing the parent directory. It was enabled for TypeScript projects only. Now we’ve also turned it on for JavaScript. If needed, you can manage its scope or severity in Preferences/Settings | Editor | Inspections | Import can be shortened.
  • Starting from v2020.1, the configuration files will be stored in another folder. For more information on where exactly these files will be stored on your machine, please refer to this article.

Please report any issues on our issue tracker. And stay tuned for next week’s update!

The WebStorm team

About Ekaterina Ryabukha

WebStorm Product Marketing Manager at JetBrains
This entry was posted in Early Access Preview and tagged , . Bookmark the permalink.

16 Responses to WebStorm 2020.1 EAP #5: Running Prettier on Save and Coding Assistance for Vuex Store Symbols

  1. Good to hear that you’re working on making the prettier integration a lot easier. Unfortunately it is not working on my machine.
    If i hit save nothing happens (I’ve tested it and expected that the trailing whitespace should be remove.)

    I’ve also installed prettier global and referenced the prettier package like: “~/.nvm/versions/node/v12.13.0/lib/node_modules/prettier” which resolves to version 1.19.1.

    For the patterns in run on save I’ve defined: {**/*,*}.{js,ts,jsx,tsx}

    And of course I’ve checked the “Run on save for files” checkbox and disabled the file watchers.

    Do I miss anything here ?

    • Oh I’ve found the issue..

      Prettier only gets triggered when you use the “Save All” method for saving an file. Since I’ve customized my keymap to use “Save Document” the build prettier hook doesn’t get triggered :(

  2. It would be nice if there would be some fix to the issue of conflicting formatting of prettier and “Reformat code” on save; in particular when there’s a long (named) import that’s longer than the line limit.

    What happens is that on save, prettier formats the line in one way, then when committing in PhpStorm with “Reformat code” enabled, it reformats the import line, then the on-save prettier gets triggered again changing the import back, making PhpStorm abort the the commit.

  3. Malte Bastian says:

    It would be nice if there was an option to run “eslint –fix” when saving. I have try to change the “Prettier package”-path to eslint, but then the “–fix” argument is missing.

    We use eslint with the prettier-plugin for all our projects. Just running “prettier” would mean that the “prettier” settings in the “.eslintrc” file are ignored.

    • Ekaterina Ryabukha says:

      Hello,

      We have it on our roadmap, however, we can’t say when exactly it gets implemented. Please stay tuned for the upcoming announcements in our blog!

    • Dan says:

      I’d like to see support for this added too.

      I tend to follow my company’s coding standards (even at home), which requires formatting that’s different to what Prettier offers. Because of this, I’ve got an eslint config that enforces the correct formatting, and I don’t use Prettier.

      It’s easily the feature that I miss the most from VS Code, being able to run eslint -fix on save. It’s also the showstopper for pushing for us to use Webstorm at work.

      Thanks

      • Florian says:

        Meanwhile you can use File Watchers to call eslint on the saved file. It could listen on save or additionally on merge tasks from a git pull etc. Really handsome feature. :-)

  4. Tomas says:

    I think you’d want to include jsx files by default as well, seems like a very common setting users would have to change otherwise. Or better yet, match the Prettier list of support filetypes by default, which includes jsx and a bunch more.

  5. David Gilbertson says:

    Prettier on save is excellent, and fast!

    As others have commented, I mostly use ESLint to run prettier with –fix. Having that built in would be excellent.

    • Ekaterina Ryabukha says:

      We plan to implement this functionality too. It’s likely to land in one of the 2020.1 bug-fix updates.

  6. Sam Blowes says:

    There was a mention of Eslint getting a run on save option aswell, but it didnt make it to the beta?

    • Ekaterina Ryabukha says:

      Hi Sam,

      Unfortunately, we didn’t have enough time to add this functionality to WebStorm 2020.1, however, we still plan to implement it in one of the 2020.1 bug-fix updates.

Leave a Reply

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