Specifying different grammars for an extension, one for the code editor (syntax highlighting) and another for Atom Beautify


#1

I am working with extension .html.eex. For syntax highlighting there is a package that takes care of this called language-elixir (defines grammar named HTML (EEx)). If I run Atom Beautify on it, I get Atom Beautify could not find a supported beautifier for this file. However, if I switch the grammar to HTML, Atom Beautify works perfectly.

My question, is it possible to configure Atom to use HTML (EEx) grammar for that extension for code editing and HTML for code beatifying?


Commands synchronously
#2

UPDATE:

I managed to make Atom Beautify work for this extension when grammar is set to HTML (EEx) by making this change to /atom-beautify/src/languages/html.coffee:

  extensions: [
    "html",
    "html.eex", // added this
    "eex" // added this
  ]

Question, how to override this html.coffee without changing package source files? Thanks.


#3

You can’t unless the package gives you a way to override it.

What really needs to happen is for someone to write a new file for languages/, named elixir.coffee, that defines a new language. You can see that other template languages have their own files, like handlebars.coffee.


#4

I have created a elixir.coffee file with content adjusted to .eex including:

  grammars: [
    "HTML"
  ]

But I still get:

Atom Beautify could not find a supported beautifier for this file


#5

You didn’t look deeper into how the package works. The languages are declared in a central location (options.json), which is easier for JavaScript to use than an entire directory and allows for declaring configuration options separately from the grammar file. Here’s the definition of Handlebars again.


#6

Maybe there is a guide on-line? I have added a section to options.json for Elixir but still getting the same error message. I simple want to tell Atom Beautify to regard files with HTML (EEx) grammar as HTML when beautifying.


#7

The package readme is the closest. The package doesn’t appear to have extensibility be the highest priority.


#8

Perhaps a coding hack (if all else fails)…
How about having a routine in init.coffee that ->

  • force the grammar of the file to HTLM
  • trigger the beautifying command
  • force the grammar back to the original format.
  • optional: save the file.

Some idea (perhaps) - Commands synchronously


#9

@danPadric Thank you for the great idea. I have already considered the logic but did not know how to do it and did not know about init.coffee. Solution already implemented, coded and is working :slight_smile:


#10

That was quick - Brilliantly done dear fellow!!
Thanks for letting me know. :smile:

Please would you mind sharing your work with the public (me)?


As a note to others who is starting using Atom
The documentation is worth reading
=> Main Link :: https://atom.io/docs
=> User manual :: http://flight-manual.atom.io/
=> API :: https://atom.io/docs/api/


#11

@danPadric

Here you go init.config:

atom.commands.add  'atom-text-editor', 'custom:beautfy', ->
  return false unless editor = atom.workspace.getActiveTextEditor()
  grammar = editor.getGrammar()
  if grammar? and grammar.scopeName is 'text.html.elixir'
    editor.setGrammar(atom.grammars.grammarForScopeName('text.html.basic'))
    atom.commands.dispatch(atom.views.getView(editor), 'atom-beautify:beautify-editor')
    editor.setGrammar(atom.grammars.grammarForScopeName('text.html.elixir'))
    console.log "HTML (EEx) Beautified successfully"

Of course custom:beautify can be associated and called by any short-cut you choose.


#12

Thank you very much for sharing.

Each coder will come up with his own version.
My version would look different … but every code will have his own style.
THAT is not the reason for this note.

There is one concern - if you will allow me…

After this line you may have a future problem.

If the command call gets “stuck”, you may find that the next lines are pushed through too early. AFAIK the dispatch call does not hold until the task is complete.

I do not speak from my own experience. However, please see the topic to which I linked to earlier to what the topic starter spoke about.


#13

You’re welcome to re-write the code and share it.


#14

Hello.

It seems as though I am shooting my mouth off again.

I have been pushing some code around, which caused me to doubt my earlier comment.
I am going to start a new topic to get clarification on what I expected vs what the result is.

To show that I have tried something, the coding idea follows. Note that it is a mute point. It seems as though we do not have to check when the dispatch is done.

waitTask = false  # global scope


taskDone = (event) ->
  return false unless waitTask
  return false unless event.type is 'atom-beautify:beautify-editor'
  
  # Restoring the earlier grammar
  waitTask = false
  _editor = atom.workspace.getActiveTextEditor()
  _editor.setGrammar(atom.grammars.grammarForScopeName('text.html.elixir'))
  console.log "HTML (EEx) Beautified successfully"


atom.commands.add  'atom-text-editor', 'custom:beautify', ->
  # Check: text editor is active and concerned grammar scope
  return false unless _editor = atom.workspace.getActiveTextEditor()
  return false unless _editor.getGrammar().scopeName is 'text.html.elixir'
  
  # Change grammar
  _editor.setGrammar(atom.grammars.grammarForScopeName('text.html.basic'))

  # Need to check if task was completed as expected
  waitTask = true
  atom.commands.onDidDispatch(taskDone)

  # Trigger "beautify" task
  atom.commands.dispatch(atom.views.getView(_editor), 'atom-beautify:beautify-editor')
  
  
  return true

UPDATE:
The onDidDispatch() is now called before dispatch… this seem to work now.
Still doubtful if this step is required or not.


#15

Hello again.

On investigating another case (Atom-beautify can not format js in html),
I came up with something that could make things more easy for you.

Also refer to https://atom.io/packages/atom-beautify the heading Beautify a specific language.

Could you try atom-beautify:beautify-language-{HTML}
from the command pallet ( Ctrl+Shift+P).
Or bind the command to a shortcut key.

Please let me know if this technique also works for your problem.

Regards.
- Dan


#16

Yes, it is working with little modification:
atom-beautify:beautify-language-HTML


#17

…if all else fails, read the instructions manual.
:blush: It was actually mentioned in the documents of the package.

All the coding effort for nothing. :stuck_out_tongue_winking_eye:

Thank you for letting me know…
especially about the { } not being there.

Go well.


#18

@danPadric

In fact, reading official documents does not do harm. But you won’t believe what happened in the meantime. I have managed to make prettifying and syntax highlighting work for target programming languages inside MS VS Code Editor and wrote a custom JS script based on VS Code API to format based on grammar. I am using now VS Code now, it’s faster than Atom.


#19

Well good for you!

An apprentice of mine is doing stuff for school in C++ and had issues with Atom.
So I’ll tell you what I told him… if vsCode works for you, then use it.

Thanks for your honest feedback.
Go well.

sorry… just one caution I forgot about - -
read and consider very carefully the contract that you need to sign
when making a contribution to the vsCode project.