Además de lo anterior, el atajo de comentario como ctrl + / / cmd + / produce un comentario tipo mecanografiado // ... lugar de un comentario tipo html <!-- ... -->

El problema es realmente molesto y hace que la extensión, en lugar de ser útil, sea absolutamente inutilizable.

Supongo que esto está relacionado de alguna manera con las directivas estructurales personalizadas, como por ejemplo, las de material angular y / o (event) controladores.

Aquí están las versiones

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


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

Además de lo anterior, el atajo de comentario como ctrl + / / cmd + / produce un comentario tipo mecanografiado // ... lugar de un comentario tipo html <!-- ... -->

El problema es realmente molesto y hace que la extensión, en lugar de ser útil, sea absolutamente inutilizable.

Supongo que esto está relacionado de alguna manera con las directivas estructurales personalizadas, como por ejemplo, las de material angular y / o (event) controladores.

Aquí están las versiones

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


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

Estoy usando v0.900.6 aquí y no me pasa. ¿Intentó deshabilitar otras extensiones para descartar extensiones en conflicto?

@ghaschel tienes razón, no está en todos los archivos.

Pude reducirlo a esta línea causando problemas

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

mas especifico

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

probablemente el * o el let . Eliminar cualquiera resuelve el desorden de color

Intente agregar ; después de let param

agregar ; parece resolver el problema.

¿Existe la posibilidad de que esta oportunidad no se rompa?
Angular no está haciendo el ; y más bonito también lo está quitando

Esto está relacionado con el patrón de coincidencia de expresiones angulares. La discusión en curso está aquí: https://github.com/angular/vscode-ng-language-service/issues/571

Intente agregar un; después de dejar param

Bueno, arreglar un proyecto en funcionamiento para un cambio rotundo no anunciado del complemento IDE para que IDE resalte las plantillas HTML correctamente no suena como una solución ...

Sin embargo, es bueno que el problema esté localizado.

¿Se solucionará esto?

Si.

Con la plantilla

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

Veo el error con la sintaxis JS en el enlace *matCellDef , pero no con el *matHeaderCellDef . @ BO41 ¿hay algo que me falta?

Con la plantilla

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

Veo el error con la sintaxis JS en el enlace *matCellDef , pero no con el *matHeaderCellDef . @ BO41 ¿hay algo que me falta?

Supongo que el fragmento de sintaxis que rompe está en realidad más arriba en el archivo, no en la captura de pantalla. La apertura ng-container es el color incorrecto para una etiqueta HTML en la captura de pantalla de OP, pero menos notable que la directiva estructural roja y el SNAFU que sigue.

Supongo que el fragmento de sintaxis que rompe está en realidad más arriba en el archivo, no en la captura de pantalla. La apertura ng-container es el color incorrecto para una etiqueta HTML en la captura de pantalla OP, pero menos notable que la directiva estructural roja y el SNAFU que sigue.

Eso es correcto. En el momento de abrir el problema no conocía la causa.
Una vez que la sintaxis se rompe una vez, no se recupera para el resto del archivo.

@ayazhafiz si copia el mismo código nuevamente a continuación, probablemente se vea como mi captura de pantalla

@ BO41 ¿a qué código te refieres?

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

Éste. Pero cualquier etiqueta de apertura nueva debería estar estropeada

Bueno. ¿Puede verificar que la única causa es el punto y coma que falta en la expresión let param ?

¿Cómo? algo que pueda probar?

• el código es de angular.io
• funciona en .5
• se rompe al actualizar a .6 o .7 incluso con todas las demás extensiones deshabilitadas
• usted y otras personas pueden reproducirlo con diferentes versiones angulares

Lo que quiero decir es, ¿puede confirmar que el error en el resaltado del problema que ha informado en la etiqueta ng-container y después de la definición *matCellDef se debe a que falta un punto y coma?

Como sugirió @ghaschel

agregar ; parece resolver el problema.

o

probablemente el * o el let . Eliminar cualquiera resuelve el desorden de color

Pero no falta el punto y coma, ya que no debería ser necesario.

Tengo el mismo problema con la directiva * ngFor y puedo confirmar que agregar ; al final de *ngFor="let p of navItems corrige el resto del formato.

Adjuntar otro ejemplo

Está bien, estamos en eso. Si hay otros errores independientes de este, no dude en abrir una nueva edición. Si es posible, incluya una muestra de código mínima que podamos copiar / pegar en un editor.

Está bien, estamos en eso. Si hay otros errores independientes de este, no dude en abrir una nueva edición. Si es posible, incluya una muestra de código mínima que podamos copiar / pegar en un editor.

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

Notas:

• e on even ngFor, y deje que la palabra reservada no esté coloreada correctamente.
• entre #event on ng-template y el primer espacio en blanco antes de la primera etiqueta no están coloreadas correctamente.

A veces, ng-containsger tiene el color adecuado, a veces no:

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

El color apropiado debería ser el verde en mi opinión.

@qmarquez El punto de falla en sus ejemplos son las declaraciones let <var> = <value> . Si pone un punto y coma sobre los que se ponen, sospecho que volverá a ver un resaltado de sintaxis coherente. (Eso no quiere decir que esto no sea un error, sino que es reproducible de manera consistente en esas circunstancias).

El color apropiado debería ser el verde en mi opinión.

El color correcto para una etiqueta HTML con el tema Dark + predeterminado es azul oscuro. Obtiene el color verde porque se resalta como un componente JSX, debido a que la sintaxis de JavaScript se "atasca" y nunca vuelve al análisis de HTML. Puede confirmar esto ejecutando Developer: Inspect TM Scopes desde la paleta de comandos y haciendo clic en las etiquetas verdes. El alcance gramatical de un componente web de estilo angular es meta.tag.custom.<start/end>.html entity.name.tag.html , que Dark + colorea igual que cualquier otra etiqueta HTML. Hay temas que colorean los componentes web con un token diferente al de las etiquetas HTML simples, pero Dark + no es uno de ellos. (La coloración real que se aplica no está controlada por esta extensión; se maneja por temas, mientras que esta extensión solo proporciona los ámbitos gramaticales a los que los temas pueden conectarse).

Sospecho que volverá a ver un resaltado de sintaxis consistente.

Sí, eso es todo, lo arregló. Pensé que estaba separado por ','

¡Todo esta perfecto! realmente gracias! <3

los comentarios ya no se ven como comentarios.
¿Alguien más ha observado este comportamiento?

591

sí

Además de lo anterior, el atajo de comentarios como ctrl + / / cmd + / produce un comentario tipo mecanografiado // ... en lugar de un comentario tipo html

¡Estamos trabajando para solucionar este problema en un parche futuro!

От: Arnaud Crowther [email protected]
Отправлено: среда, января 29, 2020 6:47 a.m.
Кому: angular / vscode-ng-language-service
Копия: hafiz; Mencionar
Тема: Re: [angular / vscode-ng-language-service] El resaltado de color de la plantilla se rompió (# 575)

Entonces, para recapitular, agregar el punto y coma lo corrige. ¿Se actualizará este comportamiento en un parche futuro? ¿O deberíamos simplemente agregar punto y coma de ahora en adelante para obtener el resaltado de sintaxis adecuado? ¡Gracias por todo su arduo trabajo!

-
Estás recibiendo esto porque te mencionaron.
Responder a este correo electrónico directamente, visualizarla en GitHub https://github.com/angular/vscode-ng-language-service/issues/575?email_source=notifications&email_token=AE6GL6X4BQ4LGSYDIC627PLRAGJHNA5CNFSM4KLCQL6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKHN6ZY#issuecomment-579788647 , o darse de baja https: // github. com / Notifications / unsubscribe-auth / AE6GL6RPCCIDWSKAQRQGZJLRAGJHNANCNFSM4KLCQL6A .

Solo para agregar: Prettier elimina automáticamente un punto y coma de <div *ngIf="data.status as status;"> que da como resultado este problema.

@cpboyd Cualquier herramienta que limpie y limpie el código va a recrear el problema si está utilizando la

Excepto cuando el problema retrocede :(

@cpboyd Cualquier herramienta que limpie y limpie el código va a recrear el problema si está utilizando la

Excepto cuando el problema retrocede :(

Estamos probando instantáneamente las gramáticas aquí, y una vez que lo solucionemos, estoy seguro de que agregaremos casos de prueba para cubrir este problema. Realmente no preveo ninguna regresión una vez que esto se haya solucionado. :)

@ayazhafiz , si te ayuda, sigue otro ejemplo. Si quieres puedo poner el código aquí.

@dannymcgee @ayazhafiz He probado la gramática con el código disponible en este número y con el código base en funcionamiento. Nada roto hasta ahora y no es necesario agregar el temido punto y coma también.

Esto también aparece después en el operador as como:

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

Encontré un truco para pasar más bonito: <td mat-cell *matCellDef="let g; else"> que else corrige la sintaxis.

Simplemente interviniendo, tengo el mismo problema.

Si elimino async as post y solo uso async , desaparece. Y eliminando let i = index o i as index . No es realmente una solución funcional.

• Angular 9
• Servicio de lenguaje angular v0.900.11

Tengo el mismo problema con la directiva * ngFor y puedo confirmar que agregar ; al final de *ngFor="let p of navItems corrige el resto del formato.

este funcionó para mí

Observe el ; en el primer "let sku"

Tengo el mismo problema con la directiva * ngFor y puedo confirmar que agregar ; al final de *ngFor="let p of navItems corrige el resto del formato.

este funcionó para mí

Observe el ; en el primer "let sku"

El mismo problema que @ BO41 y @cpboyd mencionaron:

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

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

¿Es este error tan difícil de arreglar? Está abierto durante 21 días, a pesar de que es tan molesto que es imposible usar el complemento en la versión actual. Todavía estoy usando una versión anterior y está bien por ahora, pero creo que deberías darle una mayor prioridad ...

El marketing no está de acuerdo

Se han realizado mejoras significativas en la extensión del servicio de lenguaje Angular en Visual Studio Marketplace. Junto con una importante revisión arquitectónica para abordar los problemas de rendimiento y estabilidad, también se han corregido muchos errores de larga data.

Está tan mejorado que nadie puede usarlo. Ja.

Hay un PR abierto. ¡Todos somos colaboradores de la comunidad!

Aquí está el PR para cualquiera que tenga curiosidad: https://github.com/angular/vscode-ng-language-service/pull/609

Gracias por su paciencia. Muchas gracias a @dannymcgee por ayudar en la revisión. Si experimenta más errores de sintaxis después de la próxima versión (0.900.14), abra otro problema.

¿Cuál es la ETA en 0.900.14?

@kyliau

¡Se ha publicado la versión 0.900.14!
https://github.com/angular/vscode-ng-language-service/releases/tag/v0.900.14

Este problema se ha bloqueado automáticamente debido a la inactividad.
Por favor, presente un nuevo problema si se encuentra con un problema similar o relacionado.

Obtenga más información sobre nuestra política de bloqueo automático de conversaciones .

_{_Esta acción ha sido realizada automáticamente por un bot._}