Code formatting for html in polymer elements

When implementing formatting inside strings, our intention was to avoid changing the runtime behavior of code, so formatting is disabled unless the string is marked as 'safe' to reformat with a comment (//language=HTML) - see https://www.jetbrains.com/help/webstorm/using-language-injections.html#injection_comments.

As you do have a comment, formatting (via Code | Reformat Code) should work (and it does work for me):

export class RestaurantSelector extends PolymerElement {
    static get template() {
        // language=HTML
        return html`
            <style>
                :host {
                    display: inline-block;
                }
            </style>
            <header>
                <h4>Restaurant</h4>
                <template is="dom-if" if="[[restaurants.length==1]]">
                    <div id="selectedName">
                        [[selected.name]]
                    </div>
                </template>
                <template is="dom-if" if="[[restaurants.length>1]]">
                    <paper-dropdown-menu label="Dinosaurs">
                        <paper-listbox slot="dropdown-content" selected="1">
                            <paper-item>allosaurus</paper-item>
                            <paper-item>brontosaurus</paper-item>
                            <paper-item>carcharodontosaurus</paper-item>
                            <paper-item>diplodocus</paper-item>
                        </paper-listbox>
                    </paper-dropdown-menu>
                </template>
            </header>
            <!-- End shadow tree -->
        `;
    }
}

We have been requested and are planning to invert the default in a future version - reformat unless specifically excluded. See https://youtrack.jetbrains.com/issue/WEB-30883

Thank you! It seems to work sometimes.

First I thought it would work after I reopened the file, but that wasn't reliably the case.

I have added the div with the span to the existing template, which is as you can see marked with html, but it's not reformatting the code

works fine for me - code is formatted to

// language=HTML
return html`
    <div>
        <span></span>
    </div>

`;

please provide a .js file that can be used to recreate the issue

I'm not sure if the formatting works without the whole project

import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-item/paper-icon-item.js';
import './restaurant-selector.js'
import {SharedStylesPolymer} from '../../components/shared-styles.js';
import {connect} from "pwa-helpers/connect-mixin";
import {store} from "../../store";
import {navigate} from "../../actions/app";
// lazy load the restaurants reducers
import restaurants from '../../reducers/restaurants.js';

store.addReducers({
  restaurants
});

class RestaurantsPage extends connect(store)(PolymerElement) {
  static get template() {
    // language=HTML
    return html`
<div>
<span></span>
</div>      
        ${SharedStylesPolymer}
      <style>
         .container{
            display: flex;
            flex-direction: row;
         }
        .sidebar{
            height: 100%;
            background-color: var(--app-section-even-color);
            margin-right: 2em;
        }
        .actions paper-item{
            margin-left: 1em;
        }      
        .body{
        
        }
      </style>
      <div class="container">
          <div class="sidebar">
            <restaurant-selector></restaurant-selector>
            <template is="dom-if" if="[[selected!=null]]">
                <div class="actions">
                    <paper-item>Stammdaten</paper-item>
                    <paper-item on-click="_navigateSub" data-sub="masterdata" >Mittagstisch</paper-item>
                    <paper-item  >Speisekarte</paper-item>
                    <paper-item  >Soziale Medien</paper-item>
                    <paper-item  >Bildergalerie</paper-item>
                    <paper-item  >Vertragsdaten</paper-item>
                </div>
            </template>            
            <template is="dom-if" unless="[[selected!=null]]">
                    Kein Restaurant ausgewählt
             </template>
          </div>
          <div class="body">
          
          <section>
            <h2>Ihre Restaurants</h2>
            <p>This is a text-only page.</p>
            <p>It doesn't do anything other than display some static text.</p>
          </section>
        </div>
      </div>
    `;
  }

  static get properties() {
    return {
      selected: {
        type: Object,
        reflectToAttribute: true,
        notify: true,
        value: null
      },
      page: {
        type: String,
        value: "restaurants"
      },
      detail: {
        type: String,
        value: ""
      },
      subNav: {
        type: String,
        value: ""
      }
    }
  }

  ready() {
    super.ready();
    this.addEventListener('restaurantSelected', this._selectedChanged);
  }

  _navigateSub(e) {
    console.log(e);
    window.history.pushState({}, '', "/app/" + this.page + "/" + this.detail + "/" + this.subNav);
    navigate(window.location);
  }

  _selectedChanged(e) {
    this.selected = e.detail;
  }

  stateChanged(state) {
    this.page = state.app.page;
    this.detail = state.app.detail;
    this.subNav = state.app.subNav;
  }
}

window.customElements.define('restaurants-page', RestaurantsPage);

The issue is caused by 

${ SharedStylesPolymer }

interpolation; please vote for https://youtrack.jetbrains.com/issue/WEB-28540 to be notified on any progress with it

Thanks! I suspected something like that

// language=HTML
does not work for me, in Lit-element / Lit-html