Zusätzlich zu dem oben Gesagten erzeugt die Kommentarverknüpfung wie ctrl + / / cmd + / einen typoskriptähnlichen Kommentar // ... anstelle eines HTML-ähnlichen Kommentars <!-- ... -->

Das Problem ist wirklich ärgerlich und macht die Erweiterung, anstatt hilfreich zu sein, absolut unbrauchbar.

Meine Vermutung: Dies hängt irgendwie mit benutzerdefinierten strukturellen Richtlinien zusammen, wie z. B. eckigen Materialrichtlinien und / oder (event) Handlern.

Hier sind die Versionen

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.23
Node: 13.6.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.23
@angular-devkit/build-angular      0.803.23
@angular-devkit/build-optimizer    0.803.23
@angular-devkit/build-webpack      0.803.23
@angular-devkit/core               8.3.23
@angular-devkit/schematics         8.3.23
@angular/cdk                       8.2.3
@angular/cli                       8.3.23
@angular/flex-layout               8.0.0-beta.27
@angular/material                  8.2.3
@angular/material-moment-adapter   8.2.3
@ngtools/webpack                   8.3.23
@schematics/angular                8.3.23
@schematics/update                 0.803.23
rxjs                               6.5.4
typescript                         3.4.5
webpack                            4.39.2

Zusätzlich zu dem oben Gesagten erzeugt die Kommentarverknüpfung wie ctrl + / / cmd + / einen typoskriptähnlichen Kommentar // ... anstelle eines HTML-ähnlichen Kommentars <!-- ... -->

Das Problem ist wirklich ärgerlich und macht die Erweiterung, anstatt hilfreich zu sein, absolut unbrauchbar.

Meine Vermutung: Dies hängt irgendwie mit benutzerdefinierten strukturellen Richtlinien zusammen, wie z. B. eckigen Materialrichtlinien und / oder (event) Handlern.

Hier sind die Versionen

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.3.23
Node: 13.6.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.23
@angular-devkit/build-angular      0.803.23
@angular-devkit/build-optimizer    0.803.23
@angular-devkit/build-webpack      0.803.23
@angular-devkit/core               8.3.23
@angular-devkit/schematics         8.3.23
@angular/cdk                       8.2.3
@angular/cli                       8.3.23
@angular/flex-layout               8.0.0-beta.27
@angular/material                  8.2.3
@angular/material-moment-adapter   8.2.3
@ngtools/webpack                   8.3.23
@schematics/angular                8.3.23
@schematics/update                 0.803.23
rxjs                               6.5.4
typescript                         3.4.5
webpack                            4.39.2

Ich verwende hier v0.900.6 und es passiert mir nicht. Haben Sie versucht, andere Erweiterungen zu deaktivieren, um widersprüchliche Erweiterungen auszuschließen?

@ghaschel du hast recht, es ist nicht in jeder datei.

Ich konnte es auf diese Linie eingrenzen, was zu Problemen führte

<td mat-cell *matCellDef="let param">{{ param.costCode?.name }}</td>

spezifischer

<td *matCellDef="let param"></td>

wahrscheinlich die * oder die let . Durch Entfernen von beidem wird das Farbproblem behoben

Versuchen Sie, nach let param ein ; hinzuzufügen

Das Hinzufügen von ; scheint das Problem zu lösen.

Gibt es eine Chance, diese Chance nicht zu brechen?
Angular macht das ; und hübscher entfernt es auch

Dies hängt mit dem Übereinstimmungsmuster der Winkelausdrücke zusammen. Die laufende Diskussion ist hier: https://github.com/angular/vscode-ng-language-service/issues/571

Versuchen Sie, ein; nach lassen param

Das Reparieren eines Arbeitsprojekts für eine nicht angekündigte Änderung des IDE-Plugins, damit IDE die HTML-Vorlagen richtig hervorhebt, klingt nicht nach einer Lösung ...

Es ist jedoch gut, dass das Problem lokalisiert ist.

Wird das behoben?

Ja.

Mit der Vorlage

<ng-container matColumnDef="cost-code">
    <th mat-header-cell *matHeaderCellDef>
        {{ 'GENERAL.COST_CODE'  | async }}
    </th>
    <td mat-cell *matCellDef="let param">{{ param.costCode?.name }}</td>
</ng-container>

Ich sehe den Fehler mit der JS-Syntax in der Bindung *matCellDef , aber nicht mit der Bindung *matHeaderCellDef . @ BO41 fehlt mir etwas?

Mit der Vorlage

<ng-container matColumnDef="cost-code">
    <th mat-header-cell *matHeaderCellDef>
        {{ 'GENERAL.COST_CODE'  | async }}
    </th>
    <td mat-cell *matCellDef="let param">{{ param.costCode?.name }}</td>
</ng-container>

Ich sehe den Fehler mit der JS-Syntax in der Bindung *matCellDef , aber nicht mit der Bindung *matHeaderCellDef . @ BO41 fehlt mir etwas?

Ich vermute, dass die brechende Syntax tatsächlich weiter oben in der Datei liegt, nicht im Screenshot. Die Öffnung ng-container hat die falsche Farbe für ein HTML-Tag im OP-Screenshot, ist jedoch weniger auffällig als die rote Strukturanweisung und die folgende SNAFU.

Ich vermute, dass die brechende Syntax tatsächlich weiter oben in der Datei liegt, nicht im Screenshot. Die Öffnung ng-container hat die falsche Farbe für ein HTML-Tag im OP-Screenshot, ist jedoch weniger auffällig als die rote Strukturanweisung und die folgende SNAFU.

Das ist richtig. Zum Zeitpunkt der Eröffnung der Ausgabe kannte ich die Ursache nicht.
Sobald die Syntax einmal gebrochen ist, wird sie für den Rest der Datei nicht wiederhergestellt.

@ayazhafiz Wenn Sie den gleichen Code unten noch einmal kopieren, sieht es wahrscheinlich aus wie mein Screenshot

@ BO41 Auf welchen Code beziehen Sie sich?

<ng-container matColumnDef="cost-code">
    <th mat-header-cell *matHeaderCellDef>
        {{ 'GENERAL.COST_CODE'  | async }}
    </th>
    <td mat-cell *matCellDef="let param">{{ param.costCode?.name }}</td>
</ng-container>

Dieses hier. Aber jedes neue Eröffnungs-Tag sollte durcheinander gebracht werden

Okay. Können Sie überprüfen, ob die einzige Ursache das fehlende Semikolon im Ausdruck let param ?

Wie? Was kann ich testen?

• Der Code stammt von angle.io
• es funktioniert in .5
• Es wird durch ein Upgrade auf .6 oder .7 unterbrochen, auch wenn alle anderen Erweiterungen deaktiviert sind
• Sie und andere Personen können es mit verschiedenen Winkelversionen reproduzieren

Was ich meine ist, können Sie bestätigen, dass der Fehler in der Hervorhebung für das Problem, das Sie auf dem ng-container -Tag und nach der *matCellDef -Definition gemeldet haben, durch ein fehlendes Semikolon verursacht wird.

Wie @ghaschel vorgeschlagen hat

Das Hinzufügen von ; scheint das Problem zu lösen.

oder

wahrscheinlich die * oder die let . Durch Entfernen von beidem wird das Farbproblem behoben

Das Semikolon fehlt jedoch nicht, da es nicht notwendig sein sollte.

Ich habe das gleiche Problem mit der Direktive * ngFor und kann bestätigen, dass das Hinzufügen von ; am Ende von *ngFor="let p of navItems den Rest der Formatierung behebt.

Fügen Sie ein weiteres Beispiel hinzu

Okay, wir sind dabei. Wenn es andere Fehler gibt, die von diesem unabhängig sind, können Sie gerne eine neue Ausgabe öffnen. Wenn möglich, fügen Sie bitte ein minimales Codebeispiel bei, das wir kopieren / in einen Editor einfügen können.

Okay, wir sind dabei. Wenn es andere Fehler gibt, die von diesem unabhängig sind, können Sie gerne eine neue Ausgabe öffnen. Wenn möglich, fügen Sie bitte ein minimales Codebeispiel bei, das wir kopieren / in einen Editor einfügen können.

<div>
  <ng-template #event>
    <ng-container *ngIf="!false">some code</ng-container>
  </ng-template>
</div>

<ng-container *ngFor="let hour of hoursToRender, let f = first, let e = even">
</ng-container>

Anmerkungen:

• e auf gerade ngFor, und lassen Sie reserverd Wort nicht richtig gefärbt.
• zwischen #event auf ng-template und dem ersten Leerzeichen vor dem ersten Tag sind nicht richtig gefärbt.

Manchmal ist ng-containger richtig gefärbt, manchmal nicht:

<div class="container">
    <div class="hoursHeaderColumn">
        <ng-container *ngFor="let n of hoursToRender, let f = first, let i = index, let e = even">
            <div class="hoursHeader"
                 [class.dayHeader]="f"
                 [class.evenHour]="e">
                <span *ngIf="!f">
                    {{i - 1 + renderStartTime}}
                </span>
            </div>
        </ng-container>
    </div>
    <ng-container *ngFor="let day of daysToRender">
        <div class="day">
            <ng-container *ngFor="let hour of hoursToRender, let f = first, let e = even">
                <div (click)="onHourClick(day, hour)"
                     [class.dayHeader]="f"
                     [class.evenHour]="e"
                     [class.hour]="!f"
                     [class.picked]="!f && !loadingEvents && occuped[day.dayValue][hour].picked">
                    <span *ngIf="f else event">
                        {{day.label}}<br /> <span class="date">{{day.dateValue}}/{{day.month}}</span>
                    </span>
                    <ng-template #event>
                        <ng-container *ngIf="!loadingEvents">
                            <div class="startBleed"
                                 *ngIf="occuped[day.dayValue][hour].startBleed"></div>
                            <div class="occuped"
                                 *ngIf="occuped[day.dayValue][hour].summary && !occuped[day.dayValue][hour].startBleed && !occuped[day.dayValue][hour].endBleed">
                            </div>
                            <div class="endBleed"
                                 *ngIf="occuped[day.dayValue][hour].endBleed"></div>
                        </ng-container>
                    </ng-template>
                </div>
            </ng-container>
        </div>
    </ng-container>
    <app-loading *ngIf="loadingEvents"
                 class="eventsLoader"></app-loading>
</div>

Die passende Farbe sollte meiner Meinung nach grün sein.

@qmarquez Der let <var> = <value> -Anweisungen . Wenn Sie diese mit einem Semikolon begrenzen, wird vermutlich wieder eine konsistente Syntaxhervorhebung angezeigt. (Das heißt nicht, dass dies kein Fehler ist, sondern dass er unter diesen Umständen konsistent reproduzierbar ist.)

Die passende Farbe sollte meiner Meinung nach grün sein.

Die richtige Farbe für ein HTML-Tag mit dem Standardthema Dark + ist dunkelblau. Es erhält die grüne Farbe, weil es als JSX-Komponente hervorgehoben wird, da die JavaScript-Syntax "hängen bleibt" und nie wieder zur HTML-Analyse zurückkehrt. Sie können dies bestätigen, indem Sie Developer: Inspect TM Scopes in der Befehlspalette ausführen und auf die grünen Tags klicken. Der Grammatikbereich für eine Webkomponente im Angular-Stil ist meta.tag.custom.<start/end>.html entity.name.tag.html , wobei Dark + die gleichen Farben wie jedes andere HTML-Tag aufweist. Es gibt Themen, die Webkomponenten mit einem anderen Token als einfache HTML-Tags färben, aber Dark + gehört nicht dazu. (Die tatsächlich angewendete Farbgebung wird von dieser Erweiterung nicht gesteuert. Sie wird von Themen verwaltet, während diese Erweiterung nur die Grammatikbereiche bereitstellt, in die sich Themen einhängen können.)

Ich vermute, Sie werden wieder eine konsistente Syntaxhervorhebung sehen.

Ja, das war's, es hat es repariert. Ich dachte, es wäre durch ',' getrennt

Es ist Alles perfekt! Ich danke wirklich viel! <3

Kommentare sehen nicht mehr wie Kommentare aus.
Hat jemand anderes dieses Verhalten beobachtet?

591

Ja

Darüber hinaus erzeugt die Kommentarverknüpfung wie Strg + / / cmd + / einen typskriptähnlichen Kommentar // ... anstelle eines HTML-ähnlichen Kommentars

Wir arbeiten daran, dies in einem zukünftigen Patch zu beheben!

:Т: Arnaud Crowther [email protected]
Отправлено: среда, января 29, 2020 6:47 AM
Кому: Winkel- / Vscode-ng-Sprachdienst
Копия: hafiz; Erwähnen
Тема: Re: [Angular / Vscode-ng-language-service] Die Hervorhebung der Vorlagenfarbe ist unterbrochen (# 575).

Um es noch einmal zusammenzufassen: Durch Hinzufügen des Semikolons wird das Problem behoben. Wird dieses Verhalten in einem zukünftigen Patch aktualisiert? Oder sollten wir von nun an nur noch Semikolons hinzufügen, um eine korrekte Syntaxhervorhebung zu erzielen? Vielen Dank für all Ihre harte Arbeit!

- -
Sie erhalten dies, weil Sie erwähnt wurden.
Antworten Sie auf diese E - Mail direkt, sehen sie auf GitHub https://github.com/angular/vscode-ng-language-service/issues/575?email_source=notifications&email_token=AE6GL6X4BQ4LGSYDIC627PLRAGJHNA5CNFSM4KLCQL6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKHN6ZY#issuecomment-579788647 oder abmelden https: // GitHub. com / notifications / unsubscribe-auth / AE6GL6RPCCIDWSKAQRQGZJLRAGJHNANCNFSM4KLCQL6A .

Nur zum Hinzufügen: Prettier entfernt automatisch ein Semikolon aus <div *ngIf="data.status as status;"> was zu diesem Problem führt.

@cpboyd Jedes Tool, das Code färbt und bereinigt, erstellt das Problem neu, wenn Sie die Umgehung des Semikolons verwenden. Da das Vorhandensein des Semikolons nicht die Syntax für Angular ist. Sobald das Update veröffentlicht wurde und hoffentlich einige Unit-Tests es abdecken, sollten wir die Problemumgehung nicht mehr verwenden müssen oder auf dieses Problem stoßen.

Außer wenn das Problem zurückgeht :(

@cpboyd Jedes Tool, das Code färbt und bereinigt, erstellt das Problem neu, wenn Sie die Umgehung des Semikolons verwenden. Da das Vorhandensein des Semikolons nicht die Syntax für Angular ist. Sobald das Update veröffentlicht wurde und hoffentlich einige Unit-Tests es abdecken, sollten wir die Problemumgehung nicht mehr verwenden müssen oder auf dieses Problem stoßen.

Außer wenn das Problem zurückgeht :(

Wir testen die Grammatiken hier in Schnappschüssen, und sobald das Problem behoben ist, werden wir sicher Testfälle hinzufügen, um dieses Problem zu beheben. Ich sehe wirklich keine Regressionen voraus, wenn dies behoben ist. :) :)

@ayazhafiz , wenn es hilft, folgen Sie einem anderen Beispiel. Wenn Sie möchten, kann ich den Code hier eingeben.

@dannymcgee @ayazhafiz Ich habe die Grammatik mit dem verfügbaren Code in dieser Ausgabe und gegen die Codebasis bei der Arbeit getestet. Bisher ist nichts kaputt gegangen und es ist nicht erforderlich, auch das gefürchtete Semikolon hinzuzufügen.

Dies erscheint auch danach im Operator as wie:

<ng-container *myDirective="{ results: results$ } as data"> <!-- it breaks here -->
      <!-- All the lines below are broken -->
      <my-component
        [ngClass]="myClass"

Ich habe einen Hack gefunden, um schöner zu werden: <td mat-cell *matCellDef="let g; else"> that else behebt die Syntax-Hilighting.

Ich mische mich ein und habe das gleiche Problem.

Wenn ich async as post entferne und nur async , verschwindet es. Und entfernen Sie let i = index oder i as index . Keine wirklich funktionierende Lösung.

• Winkel 9
• Angular Language Service v0.900.11

Ich habe das gleiche Problem mit der Direktive * ngFor und kann bestätigen, dass das Hinzufügen von ; am Ende von *ngFor="let p of navItems den Rest der Formatierung behebt.

Dieser hat für mich gearbeitet

Beachten Sie die ; im ersten "let sku"

Ich habe das gleiche Problem mit der Direktive * ngFor und kann bestätigen, dass das Hinzufügen von ; am Ende von *ngFor="let p of navItems den Rest der Formatierung behebt.

Dieser hat für mich gearbeitet

Beachten Sie die ; im ersten "let sku"

Gleiches Problem wie bei @ BO41 und @cpboyd erwähnt:

https://github.com/angular/vscode-ng-language-service/issues/575#issuecomment -580404727

https://github.com/angular/vscode-ng-language-service/issues/575#issuecomment -578128919

Ist dieser Fehler so schwer zu beheben? Es ist 21 Tage geöffnet, obwohl es so nervig ist, dass es unmöglich ist, das Plugin in der aktuellen Version zu verwenden. Ich verwende immer noch eine ältere Version und es ist im Moment in Ordnung, aber ich denke, Sie sollten ihr eine höhere Priorität geben ...

Marketing ist anderer Meinung

Die Erweiterung des Angular-Sprachdienstes auf dem Visual Studio-Marktplatz wurde erheblich verbessert. Neben einer umfassenden Überarbeitung der Architektur, um Leistungs- und Stabilitätsprobleme zu beheben, wurden auch viele langjährige Fehler behoben.

Es ist so viel verbessert, dass niemand es benutzen kann. Hah.

Es gibt eine offene PR. Wir sind alle Community-Mitwirkende!

Hier ist die PR für alle, die neugierig sind: https://github.com/angular/vscode-ng-language-service/pull/609

Vielen Dank für Ihre Geduld. Vielen Dank an Korrektur in # 609 und an @dannymcgee für die Unterstützung bei der Überprüfung. Wenn nach der nächsten Version (0.900.14) weitere Syntaxfehler auftreten, öffnen Sie bitte ein anderes Problem.

Was ist die ETA auf 0.900.14?

@kyliau

v0.900.14 wurde veröffentlicht!
https://github.com/angular/vscode-ng-language-service/releases/tag/v0.900.14

Dieses Problem wurde aufgrund von Inaktivität automatisch gesperrt.
Bitte reichen Sie ein neues Problem ein, wenn Sie auf ein ähnliches oder verwandtes Problem stoßen.

Lesen Sie mehr über unsere Richtlinien zum automatischen Sperren von Konversationen .

_{_Diese Aktion wurde automatisch von einem Bot ausgeführt._}