How do I make a default syntax by filetype in Atom text editor?

Question

I want my .ejs files to have html syntax, however, it always opens the files as Plain Text.

In sublime you can choose "Open all with current extension as..." then choose your syntax.

I see that you can change the syntax in the left bottom corner

How do you open files with a certain type with a specific syntax?

Answer 1

Easy mode: include

If your language really is just HTML, you can set up a simple package to handle this.

Create a package called langugage-ejs and in grammars/ejs.cson you can include HTML as having the patterns you care about:

'fileTypes': [
  'ejs'
]

'name': 'Embedded JavaScript'

'patterns': [
  {
    'include': 'source.html'
  }
]

'scopeName': 'source.ejs'

language-ipynb certainly does this by extending JSON.

What about my template tags?

In reality though, you have template tags on top of HTML that you would want to make the editor recognize. The best example I can find is for erb (Embedded Ruby templates). It sources from HTML but also adds on other tags as shown in this snippet:

...
'patterns': [
  {
    'begin': '<%+#'
    'captures':
      '0':
        'name': 'punctuation.definition.comment.erb'
    'end': '%>'
    'name': 'comment.block.erb'
  }
  {
    'begin': '<%+(?!>)[-=]?'
    'captures':
      '0':
        'name': 'punctuation.section.embedded.ruby'
    'end': '-?%>'
    'name': 'source.ruby.rails.embedded.html'
    'patterns': [
      {
        'captures':
          '1':
            'name': 'punctuation.definition.comment.ruby'
        'match': '(#).*?(?=-?%>)'
        'name': 'comment.line.number-sign.ruby'
      }
      {
        'include': 'source.ruby.rails'
      }
    ]
  }
  {
    'include': 'text.html.basic'
  }
]
...

Answer 2

This is now in Atom core, you don't need that file-types package any more.

Where I work, we use .phl for a certain kind of PHP file. To tell Atom about this, first find the language's Scope Name (e.g. text.html.php ), then edit config.cson like so:

core:
    customFileTypes:
      "text.html.php": [
        "phl"
      ]
    themes: [
// snip

You can find this file at ~/.atom/config.cson, or from the Settings window click the "Open Config Folder" button.

It's easy to get wrong, as evidenced by the many errors people made on the GitHub issue for the feature.

Answer 3

Edit: since the time I wrote this answer, this functionality has been added to Atom core, see this answer for details.

file-types Atom package

(https://atom.io/packages/file-types)

It does exactly what the title question asks for: you can define new file extensions for existing languages with a simple edit of the config.cson file.

Answer 4

For example if you want to open all .jsx files with javascript syntax, you need to add this to your config.cson

"*":
  core:
    customFileTypes:
      "source.js": [
         "jsx"
      ]

This maps all .jsx files to open with js syntax.

Answer 5

For individual files you can use the Grammar Selector; Ctrl+Shift+L to set which language you're using on that file. Not the same as auto-detect but useful for those times when you're using a file that you don't want to set a default for.

Answer 6

It looks likes there's a brand new package has been released for this. https://atom.io/packages/language-ejs.

Answer 7

As Dave Andersen mentions in a buried comment, it is now possible to do this without any extra packages and it's documented here.