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

Posted on by Ekaterina Ryabukha

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

Comments below can no longer be edited.

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

  1. Ingo Fahrentholz says:

    February 20, 2020

    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 ?

    • Ingo Fahrentholz says:

      February 20, 2020

      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 🙁

      • Ekaterina Ryabukha says:

        February 21, 2020

        Hello,

        The Save Document method is not as popular as the Save All one, so we haven’t considered adding support for it yet. Please file a new feature request here: https://youtrack.jetbrains.com/issues/WEB – explaining why it’s important for you to have it and we’ll see what we can do. Thanks!

  2. Attila Szeremi says:

    February 20, 2020

    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:

    February 21, 2020

    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:

      February 21, 2020

      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:

      February 24, 2020

      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:

        April 3, 2020

        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:

    February 22, 2020

    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.

    • Ekaterina Ryabukha says:

      February 24, 2020

      Hi Tomas,

      Thanks for the feedback! I’ve shared it with the team.

  5. David Gilbertson says:

    March 22, 2020

    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:

      March 23, 2020

      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:

    March 23, 2020

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

    • Ekaterina Ryabukha says:

      March 23, 2020

      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.

  7. Sayudha Lukita Wibisana says:

    April 21, 2020

    can I set the prettier auto save globally? So, I don’t need to setup the prettier every time I clone or started new project.

    It is frustrating needed to checked the run on save and add another file type.

    • Ekaterina Ryabukha says:

      April 21, 2020

      Hello,

      You can enable it by default for new projects by going to File in the main WebStorm menu > New Project Settings > Preferences/Settings for New Projects and ticking the Run on save for files box there.

      We don’t plan to add it for existing projects at the moment. If you think it’s important to have it for them too, feel free to file a new feature request here: https://youtrack.jetbrains.com/issues/WEB.

  8. Lima neto says:

    June 4, 2020

    How that works with the default webstorm Autosave?

    • Ekaterina Ryabukha says:

      June 5, 2020

      By design, Prettier on save runs only when the Save All action is used (Ctrl/Cmd+S), both when the action is called explicitly (e.g. using a shortcut) or implicitly (IDE frame deactivation, run configuration started, etc.).