Beautify on save not working?

[iksose]

I feel like I'm missing something big here, so apologies for the issue but I haven't been able to get Beautify on Save to work since migrating to a new machine (OSX). The manual shortcut command for this still works, but automatically formatting doesn't.

I'm not sure if it's the version or my hardware, or maybe some configuration setting. I tried rolling back the package but apparently Atom doesn't support "deprecated" versions.

I assume just having the option selected through the UI would take precedence? Or is there a .jsbeautifyrc that I need to edit.

Thanks

[Glavin001]

You must have just updated to a new version from a very old version. Beautify on save has been deprecated since #308 was released.

What you do now is use the Language Config - <language> - Beautify On Save options, for each desired language. See https://github.com/Glavin001/atom-beautify/blob/master/docs/options.md#language-config---c---beautify-on-save for details
Basically, beautify on save is now opt-in, per language. This allows much more user customization, as a lot of users were complaining that they wanted to disable most of their languages and only beautify on save certain languages. Now it is all opt-in so everyone is happy, once they update.

[kayone]

sorry for re-opening this issue, I've been trying to enable this with no success, I'm adding the config to .jsbeautifyrc

I've tried

{
  "language_js_beautify_on_save": true
}

and

{
  "js": {
    "language_js_beautify_on_save": true,
    "indent_size": 2,
    "indent_char": " ",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 2,
    "jslint_happy": true
  }
}

[Glavin001]

@kayone : I think Beautify On Save is not working when set in the .jsbeautifyrc file. Only in the Atom Beautify package settings. This is something I would like to address however beautify on save is really more of an editor option, than a styling option. So for now you can only configure it in the Atom Beautify package settings.

[kayone]

that makes total sense, thank you for the fast response.

[Glavin001]

I have since improved the documentation for this. See #529

[bryantchan]

@Glavin001 hi, i can't find the js beautify on save option in the package setting panel.

[Glavin001]

@bryantchan the option would be named Language Config - JavaScript - Beautify On Save. see https://github.com/Glavin001/atom-beautify/blob/master/docs/options.md#language-config---javascript---beautify-on-save for details.

[rahul-desai3]

@Glavin001 Is this option renamed to something else? I see the following option which I have enabled but still doesn't work. I am using Atom v1.5.

I don't see any Language Config.

[Glavin001]

Nope, that should be the option, Language Config - JavaScript - Beautify On Save.

[csergiu]

I can confirm this is not working, I have "Beautify Entire File On Save" option enabled but it doesn't beautify on save, maybe it's because of a conflict with another package? Here are my Atom packages:

• minimap
• linter
• merge-conflicts
• linter-scss-lint
• git-plus
• emmet
• pigments

Edit: nevermind, you have to enable Beautify on Save for each language that you want that functionality to work, so for example for Sass, I would open up DevTools (Cmd + Alt + I on Windows) and search for "Language Config - Sass" in the Elements tab and then go there and enable it. Hope this helps.

[jonnyelliot]

Further to @csergiu 's edit: Ticking the 'Beautify On Save' in @rahul-desai3's comment doesn't do what you might think it does, the way atom-beautify's settings are currently laid out make this unintuitive imo - it should be called "Beautify entire file (when beautify on save is enabled)"

To actually enable beautify on save you must scroll down (way down!) to the 'Beautify on Save' option for each language, there is no global option.

[rahul-desai3]

Found it! This settings page is a very good example of a bad design.

Attaching a snapshot here for future readers:

Thank you, guys!

[Glavin001]

This settings page is a very good example of a bad design.

This settings page is just painfully huge. I think they are at least sorted by title, so it should be easy to find.. Was it not sorted alphabetically?

I am hoping there will be an available Atom API that will allow me to better organize these settings, and improve the user experience. If anyone knows of a new Atom API and would be interested in submitting a Pull Request, please do so and I will review and accept. Thank you!

[rahul-desai3]

Yes. The only part I found helpful in the way this is organized is that it is alphabetical.

[Glavin001]

... in the way this is organized ...

There is no intentional organization. Unfortunately, when the settings menu was developed the Atom API did not allow for any more helpful organized. It appears to still be the case: https://atom.io/docs/api/v1.5.3/Config
There was also a bug in Atom Settings View that made attempts at organizing futile: atom/settings-view#386
There appears to be a way to order options now: atom/settings-view#597 (comment)
However, it would be more helpful to have collapsible groups. If someone adds functionality for collapsable groups to Atom Settings View, please let me know so Atom Beautify can benefit from it!

[derwaldgeist]

+1

The settings page is one of the things I really dislike about Atom. The other one is the incredible weak and error-prone seach & replace function. These two features let me think about switching to another editor once in a while. But still, I love most of the rest about Atom, so I am still sticking to it.

[Glavin001]

I recommend everyone interested in the settings UI for Atom Beautify to subscribe to #864

[patrykwlazlowicz]

Hi

I have similar problem, atom-beautify don't format my javascript code on save, but other language does.

Include config file

`"atom-beautify":

bash:
  beautify_on_save: true
  indent_size: 4
c:
  configPath: "/Users/*/.clang-format"
  default_beautifier: "clang-format"
cpp:
  configPath: "/Users/*/.clang-format"
  default_beautifier: "clang-format"
css:
  beautify_on_save: true
general:
  _analyticsUserId: "*"
html:
  beautify_on_save: true
  indent_size: 2
  max_preserve_newlines: 2
  wrap_line_length: 150
js:
  beautify_on_save: true
  keep_array_indentation: true
  max_preserve_newlines: 2
  wrap_line_length: 150
json:
  beautify_on_save: true
  max_preserve_newlines: 1
  preserve_newlines: false
less:
  beautify_on_save: true
objectivec:
  configPath: "/Users/*/.clang-format"
  default_beautifier: "clang-format"
sass:
  beautify_on_save: true
sql: {}
xml:
  max_preserve_newlines: 2

`

[Glavin001]

@patrykwlazlowicz please provide a link to a Gist with your complete debugging information. See https://github.com/Glavin001/atom-beautify/blob/master/docs/troubleshooting.md for details. I suspect your file is not being recognized as JavaScript exactly and thus the js.beautify_on_save = true is not being used. Will need your debugging information to confirm and resolve.

[ghost]

@patrykwlazlowicz I had the same problem as you did, and @Glavin001's diagnosis was correct for my atom setup. Because I had the language-babel package installed, atom (and thus atom-beautify) did not recognize the text as javascript. You can tell that this is happening by looking at the language indicator in the bottom right. It should look something like

If it doesn't say JavaScript when you're editing a .js file, then atom-beautify won't be able to beautify on save.

My current workaround is to delete language-babel, but I suspect you might be able to add

yourlanguageoverridehere:
  beautify_on_save: true

to your config file to get beautify on save working.

[pjm4]

Adding this to C:\Users\<username>\.atom\config.cson fixed it for me:

    jsx:
      beautify_on_save: true

^{Atom version: 1.19.5}