Marko: How to enable emmet for marko files?

[williamvivier]

I tried to add:

 "marko": {
  "extends": "html"
}

but no luck...

[patrick-steele-idem]

Hi @williamvivier, I created a <USER_HOME>/emmet/snippets.json file and I also needed to update my Atom keymap.cson file (Atom → Open Your Keymap):

_keymap.cson:_

'atom-text-editor[data-grammar~="marko"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

_<USER_HOME>/emmet/snippets.json:_

{
    "marko": {
        "extends": "html",
        "snippets": {
            "for": "<for each=\"${1:item} in ${2:items}\">$3</for>",
            "@for": "for\"${1:item} in ${2:items}\"",
            "attrs=": "attrs=\"${1:expr}\"",
            "if": "<if test=\"${1:condition}\">$2</if>",
            "@if": "if=\"${1:condition}\"",
            "else-if": "<else-if test=\"${1:condition}\">$2</else-if>",
            "@else-if": "else-if=\"${1:condition}\"",
            "else": "<else>$1</else>",
            "var": "<var name=\"${1:name}\" value=\"$2\"/>",
            "assign": "<assign var=\"${1:var}\" value=\"$2\"/>",
            "require": "<require module=\"${1:module}\" var=\"$2\"/>",
            "op": "<optimizer-page package-path=\"${1:./optimizer.json}\"/>",
            "oh": "<optimizer-head/>",
            "ob": "<optimizer-body/>",
            "use": "<layout-use template=\"${1:./path/to/template.marko}\">\n    <layout-put into=\"${2:target}\">\n        ${3:content}\n    </layout-put>\n</layout-use>",
            "placeholder": "<layout-placeholder name=\"${1:name}\"/>",
            "put": "<layout-put into=\"${1:name}\"/>",
            "async": "<async-fragment data-provider=\"${1:data.myDataProvider}\" var=\"${2:varName}\">\n    ${3:}\n</async-fragment>",
            "bind": "w-bind=\"${1:./widget}\"",
            "include": "<include template=\"${1:./path/to/template.marko}\"/>",
            "?": "{?${1:expression};${2:trueTemplate};${3:falseTemplate}}",
            "def": "<def function=\"${1:name}(${2:params})\">\n    ${3:}\n</def>",
            "invoke": "<invoke function=\"${1:name}\" ${2:arg1Name}=\"${3:arg1Value}\"/>",
            "comment": "<html-comment>$1</html-comment"
        }
    }
}

Also, I had opened up an issue against the Emmet Atom project on Github that has relevant discussion: https://github.com/emmetio/emmet-atom/issues/206

Ideally, the Marko plugin for Atom would automatically enable Emmet support, but right now the Emmet API has limitations that prevent this.

Hopefully editing those two files enables Emmet for you, but let us know if you are still running into issues.

[patrick-steele-idem]

Hey @williamvivier, I'm just do some housecleaning and am reviewing old issues. I'm going to go ahead and close this issue, but if you are still having issues getting Emmet to work with Marko please let us know. Thanks!

[gilesbutler]

For anybody coming across this issue and using VS Code, the following snippet enables Emmet and Marko to play nicely together. Just add it to your settings.json and you're good to go...

"emmet.includeLanguages": {
    "marko": "html"
  },

[DylanPiercey]

@gilesbutler thanks for providing this tip. I think it's very helpful so I added it to the docs of https://github.com/pcanella/vscode-marko 😄

[gilesbutler]

No worries, great idea! Thanks @DylanPiercey

[PierBover]

So I installed the official Marko extension and added "marko": "html" but nothing happens when for example I write div and press tab.

Then I saw the emmet suggestions on the autocomplete list, but for some reason these are not default (the one with the little tool):

It seems that for every HTML tag I will have to manually select the Emmet suggestion before being able to press tab and get an html tag as expected.

Shouldn't the VSCode extension declare marko templates as HTML like Vue does on single file components?

[mlrawlings]

The official Marko extension now has autocompletion for html tags (and your custom Marko tags) and it looks like that's taking precedence over the emmet suggestion. And since we support a concise syntax as well, the tag is technically already completed which is why tab does nothing. I can understand how this is confusing. I'm not totally happy with the way autocomplete works right now.

You could try setting editor.emmet.action.expandAbbreviation and using an emmet-specific keyboard shortcut to trigger expansion.

I would also imagine that once you're under a tag written in the html syntax, emmet should take over as the only suggestion because we would no longer be completing concise tags.