7

Gibt es irgendein Sublime-Paket, um HTML innerhalb von JavaScript-Strings zu markieren?Wie man Syntax innerhalb von JavaScript-Strings in Sublime hervorhebt

(Beachten Sie die Frage ist nur über HTML innerhalb JS Strings, nicht im allgemeinen Syntaxhervorhebung.)

Insbesondere schreibe ich Angular Komponenten Inline-Vorlagen

angular.module('compMod', []).component('myComp', { 
    template: `<div>Some Text</div>` 
}); 

und suchen HTML markieren Syntax innerhalb der ES6-Template-Strings.

+1

Ich weiß nicht, ob es ein solches Paket gibt, aber ich denke, es ist sowieso keine gute Idee. Wahrscheinlich möchten Sie, dass Elemente in Template-Strings richtig hervorgehoben werden, wenn es sich nicht um HTML handelt. Sie können jedoch 'templateUrl' verwenden und eine Verknüpfung zu einer Vorlagendatei erstellen, anstatt eine Vorlagenzeichenfolge zu verwenden. – Calvin

+0

@Calvin Es gibt einen Vorteil für Inline-Vorlagen, alles an einem Ort zu haben, es wird häufig verwendet, z.B. [hier] (https://github.com/formly-js/angular-formly/blob/master/src/directives/formly-form.js), aber soweit ich weiß, benutzt der Autor dieses Pakets Webstorm genau das. –

+0

Öffnen Sie ein [Problem] (https://github.com/sublimehq/Packages/issues) in sublimehqs Packages Repo auf Github und stellen Sie eine Anfrage mit dem '[JavaScript] -Tag. In der neuesten Version von 'JavaScript-Slimline-Syntax' sind Template-Strings in Backticks als solche gekennzeichnet, so dass es nicht allzu schwierig sein sollte, die HTML-Syntax dort zu importieren. Sie können oder dürfen nicht zustimmen, aber es ist einen Versuch wert. – MattDMo

Antwort

4

Wie @Calvin oben gesagt hat, würde ich nicht sagen, dass dies eine gute Übung ist, aber ich würde nicht unbedingt sagen, dass es ganz schlecht ist. Wie auch immer, hier ist meine naive Lösung (habe es nicht für irgendwelche Randfälle getestet):

Installiere babel package for sublime text und wähle es als default Syntax für deine * .js Dateien.

Als nächstes bearbeiten Sie JavaScript (Babel).sublime-syntax, das sich innerhalb des Babel-Paketverzeichnisses befindet, z.B. ~/.config/sublime-text-3/Packages/Babel/.

Suchen Sie nach dem Abschnitt template-string-body:, und fügen Sie an seinem die beiden folgenden Zeilen, ähnlich wie @ VRPF Vorschlag Beginn:

- meta_content_scope: text.html.basic.embedded.js 
- include: scope:text.html.basic 

Jetzt haben Sie eine volle Unterstützung in es6 + HTML-Syntax innerhalb Template-Strings.