En plus de ce qui précède, le raccourci de commentaire tel que ctrl + / / cmd + / produit un commentaire de type script // ... au lieu d'un commentaire de type html <!-- ... -->

Le problème est vraiment ennuyeux et rend l'extension au lieu d'être utile pour être absolument inutilisable.

Ma conjecture: ceci est en quelque sorte lié aux directives structurelles personnalisées telles que les matériaux angulaires et / ou les gestionnaires (event) .

Voici les versions

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


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

En plus de ce qui précède, le raccourci de commentaire tel que ctrl + / / cmd + / produit un commentaire de type script // ... au lieu d'un commentaire de type html <!-- ... -->

Le problème est vraiment ennuyeux et rend l'extension au lieu d'être utile pour être absolument inutilisable.

Ma conjecture: ceci est en quelque sorte lié aux directives structurelles personnalisées telles que les matériaux angulaires et / ou les gestionnaires (event) .

Voici les versions

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


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

J'utilise la v0.900.6 ici et cela ne m'arrive pas. Avez-vous essayé de désactiver d'autres extensions pour exclure toute extension en conflit?

@ghaschel vous avez raison, ce n'est pas dans tous les fichiers.

J'ai pu le réduire à cette ligne causant des problèmes

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

plus spécifique

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

probablement le * ou le let . Supprimer l'un ou l'autre résout le désordre de couleur

Essayez d'ajouter un ; après let param

l'ajout de ; semble résoudre le problème.

Y a-t-il une chance de rendre cette chance non brisée?
Angular ne fait pas le ; et plus joli le supprime aussi

Ceci est lié au modèle de correspondance des expressions angulaires. La discussion en cours est ici: https://github.com/angular/vscode-ng-language-service/issues/571

Essayez d'ajouter un; après let param

Eh bien, réparer un projet de travail pour un changement de rupture non annoncé du plugin IDE afin de faire en sorte que l'IDE met en évidence correctement les modèles HTML ne semble pas être une solution ...

Cependant, il est bon que le problème soit localisé.

Cela sera-t-il corrigé?

Oui.

Avec le modèle

<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>

Je vois l'erreur avec la syntaxe JS dans la liaison *matCellDef , mais pas avec la *matHeaderCellDef . @ BO41 y a-t-il quelque chose qui me manque?

Avec le modèle

<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>

Je vois l'erreur avec la syntaxe JS dans la liaison *matCellDef , mais pas avec la *matHeaderCellDef . @ BO41 y a-t-il quelque chose qui me manque?

Je suppose que le morceau de syntaxe de rupture est en fait plus haut dans le fichier, pas dans la capture d'écran. L'ouverture ng-container est la mauvaise couleur pour une balise HTML dans la capture d'écran OP, mais moins visible que la directive structurelle rouge et le SNAFU qui suit.

Je suppose que le morceau de syntaxe de rupture est en fait plus haut dans le fichier, pas dans la capture d'écran. L'ouverture ng-container est la mauvaise couleur pour une balise HTML dans la capture d'écran OP, mais moins visible que la directive structurelle rouge et le SNAFU qui suit.

C'est correct. Au moment d'ouvrir le numéro, je n'en connaissais pas la cause.
Une fois que la syntaxe est cassée une fois, elle ne récupère pas pour le reste du fichier.

@ayazhafiz si vous

@ BO41 de quel code parlez-vous?

<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>

celui-ci. Mais toute nouvelle balise d'ouverture devrait être gâchée

Bien. Pouvez-vous vérifier que la seule cause est le point-virgule manquant dans l'expression let param ?

Comment? tout ce que je peux tester?

• le code provient d'angular.io
• ça marche en .5
• il s'arrête en passant à .6 ou .7 même avec toutes les autres extensions désactivées
• vous et d'autres personnes pouvez le reproduire avec différentes versions angulaires

Ce que je veux dire, c'est que vous pouvez confirmer que l'erreur de mise en évidence du problème que vous avez signalé sur la balise ng-container et après la définition *matCellDef est causée par un point-virgule manquant.

Comme @ghaschel l'a suggéré

l'ajout de ; semble résoudre le problème.

ou

probablement le * ou le let . Supprimer l'un ou l'autre résout le désordre de couleur

Mais le point-virgule n'est pas manquant, car cela ne devrait pas être nécessaire.

J'ai le même problème avec la directive * ngFor et je peux confirmer que l'ajout de ; à la fin de *ngFor="let p of navItems corrige le reste du formatage.

Ajouter un autre exemple

D'accord, nous y sommes. S'il y a d'autres bogues indépendants de celui-ci, n'hésitez pas à ouvrir un nouveau numéro. Si possible, veuillez inclure un échantillon de code minimal que nous pouvons copier / coller dans un éditeur.

D'accord, nous y sommes. S'il y a d'autres bogues indépendants de celui-ci, n'hésitez pas à ouvrir un nouveau numéro. Si possible, veuillez inclure un échantillon de code minimal que nous pouvons copier / coller dans un éditeur.

<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>

Remarques:

• e sur même ngFor, et let mot reserverd ne sont pas correctement colorés.
• entre #event sur ng-template et le premier espace avant la première balise ne sont pas correctement colorés.

Parfois, ng-containger est correctement coloré, parfois pas:

<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>

La couleur appropriée devrait être verte à mon avis.

@qmarquez Le point d'échec dans vos exemples est les instructions let <var> = <value> . Si vous les plafonnez avec un point-virgule, je suppose que vous verrez à nouveau une coloration syntaxique cohérente. (Cela ne veut pas dire que ce n'est pas un bogue, mais qu'il est toujours reproductible dans ces circonstances.)

La couleur appropriée devrait être verte à mon avis.

La couleur correcte pour une balise HTML avec le thème Dark + par défaut est le bleu foncé. Il prend la couleur verte parce qu'il est mis en évidence en tant que composant JSX, en raison de la syntaxe JavaScript "bloquée" et ne revient jamais à l'analyse HTML. Vous pouvez le confirmer en exécutant Developer: Inspect TM Scopes partir de la palette de commandes et en cliquant sur les balises vertes. La portée grammaticale d'un composant Web de style angulaire est meta.tag.custom.<start/end>.html entity.name.tag.html , dont Dark + colore de la même manière que toute autre balise HTML. Il existe des thèmes qui colorent les composants Web avec un jeton différent des balises HTML simples, mais Dark + n'en fait pas partie. (La coloration réelle appliquée n'est pas contrôlée par cette extension; elle est gérée par des thèmes, alors que cette extension fournit simplement les portées grammaticales auxquelles les thèmes peuvent s'accrocher.)

Je soupçonne que vous verrez à nouveau une coloration syntaxique cohérente.

Ouais, c'est ça, ça l'a corrigé. Je pensais qu'il était séparé par ','

Tout est parfait! vraiment beaucoup! <3

les commentaires ne ressemblent plus à des commentaires.
quelqu'un d'autre a-t-il observé ce comportement?

591

Oui

En plus de ce qui précède, le raccourci de commentaire tel que ctrl + / / cmd + / produit un commentaire de type script // ... au lieu d'un commentaire de type html

Nous travaillons à résoudre ce problème dans un futur patch!

От: Arnaud Crowther [email protected]
Отправлено: mardi 29 juin 2020 06:47
Кому: angular / vscode-ng-language-service
Копия: hafiz; Mention
Тема: Re: [angular / vscode-ng-language-service] La mise en évidence des couleurs du modèle a été interrompue (# 575)

Donc, juste pour récapituler, l'ajout du point-virgule le corrige. Ce comportement sera-t-il mis à jour dans un futur patch? Ou devrions-nous simplement ajouter des points-virgules à partir de maintenant pour obtenir une coloration syntaxique appropriée? Merci pour tout votre travail!

-
Vous recevez cela parce que vous avez été mentionné.
Répondre à cet e - mail directement, voir sur GitHub https://github.com/angular/vscode-ng-language-service/issues/575?email_source=notifications&email_token=AE6GL6X4BQ4LGSYDIC627PLRAGJHNA5CNFSM4KLCQL6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKHN6ZY#issuecomment-579788647 ou désabonnement https: // GitHub. com / notifications / unsubscribe-auth / AE6GL6RPCCIDWSKAQRQGZJLRAGJHNANCNFSM4KLCQL6A .

Juste pour ajouter: Prettier supprime automatiquement un point-virgule de <div *ngIf="data.status as status;"> ce qui entraîne ce problème.

@cpboyd Tout outil qui lints et nettoie le code va recréer le problème si vous utilisez le contournement du point-virgule. Comme la présence du point-virgule n'est pas la syntaxe de Angular. Une fois que le correctif a été publié et, espérons-le, certains tests unitaires le couvrent, nous ne devrions pas avoir à utiliser la solution de contournement ou à rencontrer ce problème.

Sauf lorsque le problème régresse :(

@cpboyd Tout outil qui lints et nettoie le code va recréer le problème si vous utilisez le contournement du point-virgule. Comme la présence du point-virgule n'est pas la syntaxe de Angular. Une fois que le correctif a été publié et, espérons-le, certains tests unitaires le couvrent, nous ne devrions pas avoir à utiliser la solution de contournement ou à rencontrer ce problème.

Sauf lorsque le problème régresse :(

Nous testons instantanément les grammaires ici, et une fois que le correctif sera résolu, je suis sûr que nous ajouterons des cas de test pour couvrir ce problème. Je ne prévois vraiment aucune régression une fois que cela aura été corrigé. :)

@ayazhafiz , si cela vous aide, suivez un autre exemple. Si vous voulez, je peux mettre le code ici.

@dannymcgee @ayazhafiz J'ai testé la grammaire avec le code disponible dans ce numéro et par rapport à la base de code au travail. Rien de cassé jusqu'à présent et pas besoin d'ajouter le point-virgule redouté également.

Cela apparaît également par la suite dans l'opérateur as comme:

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

J'ai trouvé un hack pour passer plus joli: <td mat-cell *matCellDef="let g; else"> que else corrige la syntaxe hilighting.

Juste en sonnant, j'ai le même problème.

Si je supprime async as post et que j'utilise simplement async cela disparaît. Et en supprimant let i = index ou i as index . Pas vraiment une solution de travail.

• Angulaire 9
• Service de langage angulaire v0.900.11

J'ai le même problème avec la directive * ngFor et je peux confirmer que l'ajout de ; à la fin de *ngFor="let p of navItems corrige le reste du formatage.

celui-ci a fonctionné pour moi

Notez le ; dans le premier "let sku"

J'ai le même problème avec la directive * ngFor et je peux confirmer que l'ajout de ; à la fin de *ngFor="let p of navItems corrige le reste du formatage.

celui-ci a fonctionné pour moi

Notez le ; dans le premier "let sku"

Même problème que @ BO41 et @cpboyd mentionnés:

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

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

Ce bogue est-il si difficile à corriger? Il est ouvert pendant 21 jours, malgré qu'il soit si ennuyeux qu'il est impossible d'utiliser le plugin dans la version actuelle. J'utilise toujours une ancienne version, et ça va pour le moment, mais je pense que vous devriez lui donner une priorité plus élevée ...

Le marketing n'est pas d'accord

Des améliorations significatives ont été apportées à l'extension de service de langage Angular sur Visual Studio Marketplace. Parallèlement à une refonte architecturale majeure pour résoudre les problèmes de performances et de stabilité, de nombreux bogues de longue date ont également été corrigés.

Il est tellement amélioré que personne ne peut l'utiliser. Hah.

Il y a un PR ouvert. Nous sommes tous des contributeurs de la communauté!

Voici le PR pour quiconque est curieux: https://github.com/angular/vscode-ng-language-service/pull/609

Merci pour votre patience. Un grand merci à @ghaschel pour avoir problème dans # 609 et à @dannymcgee pour son aide. Si vous rencontrez d'autres erreurs de syntaxe après la prochaine version (0.900.14), veuillez ouvrir un autre problème.

Qu'est-ce que l'ETA sur la 0.900.14?

@kyliau

La v0.900.14 a été publiée!
https://github.com/angular/vscode-ng-language-service/releases/tag/v0.900.14

Ce problème a été automatiquement verrouillé en raison de l'inactivité.
Veuillez signaler un nouveau problème si vous rencontrez un problème similaire ou connexe.

En savoir plus sur notre politique de verrouillage automatique des conversations .

_{_Cette action a été effectuée automatiquement par un bot._}