Além do acima, o atalho de comentário como ctrl + / / cmd + / produz um comentário tipo script // ... vez de comentário tipo html <!-- ... -->

O problema é realmente irritante e torna a extensão, em vez de ser útil, absolutamente inutilizável.

Meu palpite: isso está de alguma forma relacionado às diretivas estruturais personalizadas, como, por exemplo, materiais angulares e / ou (event) manipuladores.

Aqui estão as versões

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


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

Além do acima, o atalho de comentário como ctrl + / / cmd + / produz um comentário tipo script // ... vez de comentário tipo html <!-- ... -->

O problema é realmente irritante e torna a extensão, em vez de ser útil, absolutamente inutilizável.

Meu palpite: isso está de alguma forma relacionado às diretivas estruturais personalizadas, como, por exemplo, materiais angulares e / ou (event) manipuladores.

Aqui estão as versões

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


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

Estou usando a v0.900.6 aqui e isso não acontece comigo. Você tentou desativar outras extensões para descartar qualquer extensão conflitante?

@ghaschel você está certo, não está em todos os arquivos.

Consegui restringir essa linha, causando problemas

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

mais específico

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

provavelmente o * ou o let . Remover qualquer um deles resolve a confusão de cores

Tente adicionar um ; após let param

adicionar ; parece resolver o problema.

Existe uma chance de fazer essa chance não quebrar?
O Angular não está fazendo ; e mais bonito também está removendo

Isso está relacionado ao padrão de correspondência de expressões angulares. A discussão em andamento está aqui: https://github.com/angular/vscode-ng-language-service/issues/571

Experimente adicionar um; depois de deixar param

Bem, consertar um projeto de trabalho para uma alteração interrompida não anunciada do plug-in IDE para fazer o IDE destacar os modelos HTML corretamente não parece uma solução ...

No entanto, é bom que o problema seja localizado.

Isso será corrigido?

sim.

Com o template

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

Estou vendo o erro com a sintaxe JS na ligação *matCellDef , mas não com *matHeaderCellDef . @ BO41 há algo que estou perdendo?

Com o template

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

Estou vendo o erro com a sintaxe JS na ligação *matCellDef , mas não com *matHeaderCellDef . @ BO41 há algo que estou perdendo?

Meu palpite é que a parte que quebra a sintaxe está, na verdade, mais acima no arquivo, não na imagem. A abertura ng-container é a cor errada para uma tag HTML na captura de tela do OP, mas menos perceptível do que a diretiva estrutural vermelha e o SNAFU que se segue.

Meu palpite é que a parte que quebra a sintaxe está, na verdade, mais acima no arquivo, não na imagem. A abertura ng-container é a cor errada para uma tag HTML na captura de tela do OP, mas menos perceptível do que a diretiva estrutural vermelha e o SNAFU que se segue.

Está correto. Na hora de abrir a edição, não sabia a causa.
Depois que a sintaxe é quebrada uma vez, ela não se recupera para o resto do arquivo.

@ayazhafiz se você copiar o mesmo código novamente abaixo, provavelmente se parece com a minha imagem

@ BO41 a que código você está se referindo?

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

Este. Mas qualquer nova tag de abertura deve ser bagunçada

OK. Você pode verificar se a única causa é o ponto-e-vírgula ausente na expressão let param ?

Como? algo que eu possa testar?

• o código é do angular.io
• funciona em 0,5
• interrompe ao atualizar para .6 ou .7, mesmo com todas as outras extensões desativadas
• você e outras pessoas podem reproduzi-lo com diferentes versões angulares

O que quero dizer é, você pode confirmar que o erro no destaque para o problema que você relatou na tag ng-container e após a definição *matCellDef é causado por um ponto-e-vírgula ausente.

Como @ghaschel sugeriu

adicionar ; parece resolver o problema.

ou

provavelmente o * ou o let . Remover qualquer um deles resolve a confusão de cores

Mas o ponto-e-vírgula não está faltando, pois não deveria ser necessário.

Estou tendo o mesmo problema com a diretiva * ngFor e posso confirmar que adicionar ; ao final de *ngFor="let p of navItems corrige o resto da formatação.

Anexe outro exemplo

Ok, estamos trabalhando nisso. Se houver outros bugs independentes deste, sinta-se à vontade para abrir um novo problema. Se possível, inclua uma amostra mínima de código que possamos copiar / colar em um editor.

Ok, estamos trabalhando nisso. Se houver outros bugs independentes deste, sinta-se à vontade para abrir um novo problema. Se possível, inclua uma amostra mínima de código que possamos copiar / colar em um 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 no mesmo ngFor, e deixe a palavra reserverd não estar corretamente colorida.
• entre #event no ng-template e o primeiro espaço em branco antes da primeira tag não estão devidamente coloridos.

Às vezes, o ng-containger tem a cor adequada, às vezes não:

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

A cor apropriada deve ser verde na minha opinião.

@qmarquez O ponto de falha em seus exemplos são as instruções let <var> = <value> . Se você colocar um ponto-e-vírgula neles, suspeito que você verá um realce de sintaxe consistente novamente. (Isso não quer dizer que não seja um bug, mas que pode ser reproduzido de forma consistente nessas circunstâncias.)

A cor apropriada deve ser verde na minha opinião.

A cor correta para uma tag HTML com o tema Dark + padrão é azul escuro. Ele está ficando com a cor verde porque está sendo destacado como um componente JSX, devido à sintaxe JavaScript ficar "presa" e nunca mais sair da análise de HTML. Você pode confirmar isso executando Developer: Inspect TM Scopes na Paleta de comandos e clicando nas tags verdes. O escopo da gramática para um componente da web de estilo Angular é meta.tag.custom.<start/end>.html entity.name.tag.html , que colore Dark + da mesma forma que qualquer outra tag HTML. Existem temas que colorem os componentes da web com um token diferente das tags HTML simples, mas Dark + não é um deles. (A coloração real aplicada não é controlada por esta extensão; ela é tratada por temas, enquanto esta extensão apenas fornece os escopos gramaticais aos quais os temas podem se conectar.)

Eu suspeito que você verá um realce de sintaxe consistente novamente.

Sim, é isso, consertou. Eu pensei que estava separado por ','

Está tudo perfeito! realmente thnks muito! <3

comentários não se parecem mais com comentários.
alguém mais observou esse comportamento?

591

sim

Além do acima, o atalho de comentário como ctrl + / / cmd + / produz um comentário tipo texto // ... em vez de comentário tipo html

Estamos trabalhando para consertar isso em um patch futuro!

От: Arnaud Crowther [email protected]
Отправлено: среда, января 29, 2020, 6h47
Кому: angular / vscode-ng-language-service
Копия: hafiz; Menção
Тема: Re: [angular / vscode-ng-language-service] O destaque da cor do modelo quebrou (# 575)

Então, apenas para recapitular, adicionar o ponto-e-vírgula corrige isso. Este comportamento será atualizado em um patch futuro? Ou deveríamos apenas adicionar ponto-e-vírgulas a partir de agora para obter o realce de sintaxe adequado? Obrigado por todo o seu trabalho árduo!

-
Você está recebendo isso porque foi mencionado.
Responda a este e-mail diretamente, vê-lo no GitHub https://github.com/angular/vscode-ng-language-service/issues/575?email_source=notifications&email_token=AE6GL6X4BQ4LGSYDIC627PLRAGJHNA5CNFSM4KLCQL6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKHN6ZY#issuecomment-579788647 , ou unsubscribe https: // github. com / notificações / unsubscribe-auth / AE6GL6RPCCIDWSKAQRQGZJLRAGJHNANCNFSM4KLCQL6A .

Só para adicionar: mais bonito remove automaticamente um ponto e vírgula de <div *ngIf="data.status as status;"> que resulta neste problema.

@cpboyd Qualquer ferramenta que lints e limpe o código irá recriar o problema se você estiver usando a

Exceto quando o problema regride :(

@cpboyd Qualquer ferramenta que lints e limpe o código irá recriar o problema se você estiver usando a

Exceto quando o problema regride :(

Estamos fazendo um teste instantâneo das gramáticas aqui e, assim que a correção for corrigida, teremos certeza de que adicionaremos casos de teste para cobrir esse problema. Eu realmente não prevejo nenhuma regressão depois que isso for corrigido. :)

@ayazhafiz , se ajudar, siga outro exemplo. Se quiser posso colocar o código aqui.

@dannymcgee @ayazhafiz Eu testei a gramática com o código disponível nesta edição e com a base de código em funcionamento. Nada quebrado até agora e não há necessidade de adicionar o temido ponto-e-vírgula também.

Isso também aparece depois no operador as como:

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

Eu encontrei um hack para passar mais bonito: <td mat-cell *matCellDef="let g; else"> that else corrige o realce de sintaxe.

Apenas entrando na conversa, tenho o mesmo problema.

Se eu remover async as post e apenas usar async ele vai embora. E removendo let i = index ou i as index . Não é realmente uma solução de trabalho.

• Angular 9
• Angular Language Service v0.900.11

Estou tendo o mesmo problema com a diretiva * ngFor e posso confirmar que adicionar ; ao final de *ngFor="let p of navItems corrige o resto da formatação.

este funcionou para mim

Observe o ; no primeiro "let sku"

Estou tendo o mesmo problema com a diretiva * ngFor e posso confirmar que adicionar ; ao final de *ngFor="let p of navItems corrige o resto da formatação.

este funcionou para mim

Observe o ; no primeiro "let sku"

Mesmo problema mencionado por @ BO41 e @cpboyd :

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

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

Este bug é tão difícil de corrigir? Está aberto por 21 dias, apesar de ser tão chato que é impossível usar o plugin na versão atual. Ainda estou usando uma versão mais antiga e está tudo bem por enquanto, mas acho que você deveria dar a ela uma prioridade mais alta ...

O marketing discorda

Melhorias significativas foram feitas na extensão do serviço de linguagem Angular no Visual Studio Marketplace. Junto com uma grande revisão arquitetônica para resolver problemas de desempenho e estabilidade, muitos bugs antigos também foram corrigidos.

Está tão melhorado que ninguém pode usá-lo. Hah.

Existe um PR aberto. Somos todos colaboradores da comunidade!

Aqui está o PR para quem está curioso: https://github.com/angular/vscode-ng-language-service/pull/609

Obrigado pela sua paciência. Muito obrigado a @dannymcgee por ajudar na revisão. Se você tiver mais erros de sintaxe após a próxima versão (0.900.14), abra outro problema.

Qual é o ETA em 0.900.14?

@kyliau

v0.900.14 foi publicado!
https://github.com/angular/vscode-ng-language-service/releases/tag/v0.900.14

Este problema foi bloqueado automaticamente devido à inatividade.
Registre um novo problema se você estiver encontrando um problema semelhante ou relacionado.

Leia mais sobre nossa política de bloqueio automático de conversas .

_{_Esta ação foi executada automaticamente por um bot._}