Indenting custom tags in Vim

[mich...@chromium.org]

So I've just begun switching to Vim after using emacs for six years. It's been rough but what really bugs me is how badly auto-indent fails with web components & custom elements. I tried using xml mode but that chokes on void elements.

I've made a patch that adds support for <template>, <shadow> and <content>, as well as <any-custom-tags>, so that instead of this:

<section>

  <paper-dropdown-menu label="Your favorite pastry">

  <paper-dropdown class="dropdown">

  <core-menu class="menu">

  <template repeat="{{pastries}}">

  <paper-item>{{}}</paper-item>

  </template>

  </core-menu>

  </paper-dropdown>

  </paper-dropdown-menu>

</section>

vim will give you this:

<section>

  <paper-dropdown-menu label="Your favorite pastry">

    <paper-dropdown class="dropdown">

      <core-menu class="menu">

        <template repeat="{{pastries}}">

          <paper-item>{{}}</paper-item>

        </template>

      </core-menu>

    </paper-dropdown>

  </paper-dropdown-menu>

</section>

I've uploaded the updated html.vim here, which you can add to your vim/runtime/indent or $VIMFILES/indent/ to get this behavior.

This is my first attempt at editing vimscript so use at your own risk! Of course if anyone has run into this issue before and come up with a better solution, please let me know.

Thanks,

Michael

[Martin Kleinschrodt]

Thats awesome! I've recently switched over to vim, too and I've had a couple of problems working on Polymer components as well. My biggest issue is with Syntastic (or rather the included linters), which does not recognize custom element tags as valid html and fails to lint inline JS. I'm curious if there is anyone in the Polymer team who uses vim as their main editor and has some recommendations for optimizing the workflow with vim.

[Daniel Freedman]

I use https://github.com/othree/html5.vim for syntax and use jshint as my inline script linter with let g:syntastic_html_checkers=['jshint']. In my opinion, html syntax checkers are at best obsolete with html5, as the parser has a forgiving nature, as opposed to xhtml. At worst, the html syntax checkers will not understand custom elements for a long time, to the detriment of their utility.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/49b01e9e-a3f4-4333-91f0-18a73896fc9e%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[makl...@googlemail.com]

Thanks, Daniel! Didn't know it was so simple to enable inline linting with Syntastic!

[Michael Giuffrida]

Thanks Daniel! https://github.com/othree/html5.vim looks more complete than my fix since it also works for syntax highlighting.

Too bad I couldn't find this before. Any thoughts on adding suggestions for editor configurations to the "Guides & Resources" section of polymer-project.org?

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/1424857860447.e7087104%40Nodemailer.