В дополнение к вышесказанному, ярлык комментария, такой как ctrl + / / cmd + / создает комментарий в виде машинописного текста // ... вместо комментария в стиле HTML <!-- ... -->

Проблема действительно раздражает и делает расширение не полезным, а совершенно непригодным для использования.

Я предполагаю: это как-то связано с настраиваемыми структурными директивами, такими как, например, угловые материальные директивы и / или обработчики (event) .

Вот версии

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


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

В дополнение к вышесказанному, ярлык комментария, такой как ctrl + / / cmd + / создает комментарий в виде машинописного текста // ... вместо комментария в стиле HTML <!-- ... -->

Проблема действительно раздражает и делает расширение не полезным, а совершенно непригодным для использования.

Я предполагаю: это как-то связано с настраиваемыми структурными директивами, такими как, например, угловые материальные директивы и / или обработчики (event) .

Вот версии

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


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

Я здесь использую v0.900.6, и со мной этого не происходит. Вы пытались отключить другие расширения, чтобы исключить конфликтующие расширения?

@ghaschel, ты прав, он есть не в каждом файле.

Я смог сузить его до этой линии, вызывающей проблемы

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

более конкретно

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

вероятно * или let . Удаление любого из них решает цветной беспорядок

Попробуйте добавить ; после let param

добавление ; похоже, решает проблему.

Есть ли шанс сделать этот шанс безотказным?
Angular не выполняет ; и prettier тоже его удаляет

Это связано с шаблоном сопоставления угловых выражений. Текущее обсуждение находится здесь: https://github.com/angular/vscode-ng-language-service/issues/571

Попробуйте добавить; после того, как пусть параметр

Что ж, исправление рабочего проекта для не объявленного критического изменения плагина IDE, чтобы заставить IDE правильно выделять шаблоны HTML, не похоже на решение ...

Однако хорошо, что проблема локализована.

Это будет исправлено?

Да.

С шаблоном

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

Я вижу ошибку с синтаксисом JS в привязке *matCellDef , но не с *matHeaderCellDef . @ BO41 что-то мне не хватает?

С шаблоном

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

Я вижу ошибку с синтаксисом JS в привязке *matCellDef , но не с *matHeaderCellDef . @ BO41 что-то мне не хватает?

Я предполагаю, что ломающий синтаксис на самом деле находится дальше по файлу, а не на снимке экрана. Открывающий ng-container - это неправильный цвет для HTML-тега на снимке экрана OP, но он менее заметен, чем красная структурная директива и последующий SNAFU.

Я предполагаю, что ломающий синтаксис на самом деле находится дальше по файлу, а не на снимке экрана. Открывающий ng-container - это неправильный цвет для HTML-тега на снимке экрана OP, но он менее заметен, чем красная структурная директива и последующий SNAFU.

Это правильно. На момент открытия номера я не знал причины.
Как только синтаксис нарушен один раз, он не восстанавливается для остальной части файла.

@ayazhafiz, если вы снова скопируете тот же код ниже, это, вероятно, будет похоже на мой скриншот

@ BO41, какой код вы имеете в виду?

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

Вот этот. Но любой новый открывающий тег должен быть испорчен

Ладно. Можете ли вы убедиться, что единственной причиной является отсутствие точки с запятой в выражении let param ?

Как? что-нибудь я могу протестировать?

• код взят из angular.io
• он работает в .5
• он ломается при обновлении до .6 или .7, даже если все другие расширения отключены
• вы и другие люди можете воспроизвести его с разными угловыми версиями

Я имею в виду, можете ли вы подтвердить, что ошибка при выделении проблемы, о которой вы сообщили, в теге ng-container и после определения *matCellDef вызвана отсутствующей точкой с запятой.

Как предложил @ghaschel

добавление ; похоже, решает проблему.

или

вероятно, * или let . Удаление любого из них решает цветной беспорядок

Но точка с запятой не пропадает, так как в этом нет необходимости.

У меня такая же проблема с директивой * ngFor, и я могу подтвердить, что добавление ; в конец *ngFor="let p of navItems исправляет остальную часть форматирования.

Добавьте еще один пример

Хорошо, мы на этом. Если есть другие ошибки, независимые от этой, не стесняйтесь открывать новый выпуск. Если возможно, включите минимальный образец кода, который мы можем скопировать / вставить в редактор.

Хорошо, мы на этом. Если есть другие ошибки, независимые от этой, не стесняйтесь открывать новый выпуск. Если возможно, включите минимальный образец кода, который мы можем скопировать / вставить в редактор.

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

Примечания:

• e на четном ngFor и пусть зарезервированное слово не окрашены должным образом.
• между #event в ng-template и первым пробелом перед первым тегом не окрашены должным образом.

Иногда ng-containger правильно окрашен, иногда нет:

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

На мой взгляд, подходящий цвет должен быть зеленым.

@qmarquez Точкой сбоя в ваших примерах являются инструкции let <var> = <value> . Если вы закроете их точкой с запятой, я подозреваю, что вы снова увидите последовательное выделение синтаксиса. (Это не значит, что это не ошибка, но то, что это постоянно воспроизводимо в этих обстоятельствах.)

На мой взгляд, подходящий цвет должен быть зеленым.

Правильный цвет тега HTML с темой Dark + по умолчанию - темно-синий. Он становится зеленым, потому что выделяется как JSX-компонент из-за того, что синтаксис JavaScript «застревает» и никогда не возвращается к синтаксическому анализу HTML. Вы можете подтвердить это, запустив Developer: Inspect TM Scopes из палитры команд и щелкнув зеленые теги. Объем грамматики для веб-компонента в стиле Angular составляет meta.tag.custom.<start/end>.html entity.name.tag.html , который в Dark + окрашивается так же, как и любой другой тег HTML. Существуют темы, которые окрашивают веб-компоненты с помощью маркера, отличного от обычных тегов HTML, но Dark + не входит в их число. (Фактическая применяемая окраска не контролируется этим расширением; это обрабатывается темами, тогда как это расширение просто предоставляет области грамматики, к которым могут подключаться темы.)

Я подозреваю, что вы снова увидите последовательное выделение синтаксиса.

Да, все, исправил. Я думал, что это разделено ","

Все отлично! действительно большое спасибо! <3

комментарии больше не похожи на комментарии.
кто-нибудь еще наблюдал такое поведение?

591

да

В дополнение к вышесказанному, ярлык комментария, такой как ctrl + / / cmd + /, создает комментарий в стиле машинописного текста // ... вместо комментария в стиле HTML.

Мы работаем над исправлением этого в будущем патче!

От: Арно Кроутер [email protected]
Отправлено: среда, 29 января 2020 г., 6:47
Кому: angular / vscode-ng-language-service
Копия: hafiz; Упоминание
Тема: Re: [angular / vscode-ng-language-service] Сломалась цветовая подсветка шаблона (# 575)

Итак, напомним, добавление точки с запятой исправляет это. Будет ли это поведение обновлено в будущем патче? Или нам следует просто добавлять точки с запятой, чтобы получить правильную подсветку синтаксиса? Спасибо за ваш тяжелый труд!

-
Вы получаете это, потому что вас упомянули.
Ответить на это сообщение непосредственно, просматривать его на GitHub https://github.com/angular/vscode-ng-language-service/issues/575?email_source=notifications&email_token=AE6GL6X4BQ4LGSYDIC627PLRAGJHNA5CNFSM4KLCQL6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKHN6ZY#issuecomment-579788647 или отписки https: // GitHub. com / notifications / unsubscribe-auth / AE6GL6RPCCIDWSKAQRQGZJLRAGJHNANCNFSM4KLCQL6A .

Просто добавлю: Prettier автоматически удаляет точку с запятой из <div *ngIf="data.status as status;"> что приводит к этой проблеме.

@cpboyd Любой инструмент, который связывает и очищает код, воссоздает проблему, если вы используете обход точки с запятой. Поскольку наличие точки с запятой не является синтаксисом Angular. Как только исправление будет выпущено и, надеюсь, некоторые модульные тесты охватят его, нам не придется использовать обходной путь или сталкиваться с этой проблемой.

Кроме случаев, когда проблема регрессирует :(

@cpboyd Любой инструмент, который связывает и очищает код, воссоздает проблему, если вы используете обход точки с запятой. Поскольку наличие точки с запятой не является синтаксисом Angular. Как только исправление будет выпущено и, надеюсь, некоторые модульные тесты охватят его, нам не придется использовать обходной путь или сталкиваться с этой проблемой.

Кроме случаев, когда проблема регрессирует :(

Здесь мы проводим моментальное тестирование грамматик, и, как только исправление будет исправлено, я уверен, что мы добавим тестовые примеры для решения этой проблемы. Я действительно не предвижу никаких регрессов, когда это будет исправлено. :)

@ayazhafiz , если поможет, последуйте другому примеру. Если хочешь, я могу поместить сюда код.

@dannymcgee @ayazhafiz Я проверил грамматику с кодом, доступным в этом выпуске, и с действующей кодовой базой. Пока ничего не сломано, и нет необходимости добавлять ужасную точку с запятой.

Это также появляется впоследствии в операторе as например:

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

Я нашел хитрость, чтобы сделать красивее: <td mat-cell *matCellDef="let g; else"> что else исправляет подсветку синтаксиса.

Просто вмешиваюсь, у меня такая же проблема.

Если я удалю async as post и просто использую async он исчезнет. И удаление let i = index или i as index . Не совсем рабочее решение.

• Угловой 9
• Angular Language Service v0.900.11

У меня такая же проблема с директивой * ngFor, и я могу подтвердить, что добавление ; в конец *ngFor="let p of navItems исправляет остальную часть форматирования.

это сработало для меня

Обратите внимание на ; в первом "let sku"

У меня такая же проблема с директивой * ngFor, и я могу подтвердить, что добавление ; в конец *ngFor="let p of navItems исправляет остальную часть форматирования.

это сработало для меня

Обратите внимание на ; в первом "let sku"

Та же проблема, что и у @ BO41 и @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

Неужели эту ошибку так сложно исправить? Он открыт 21 день, несмотря на то, что он настолько раздражает, что использовать плагин в текущей версии невозможно. Я все еще использую старую версию, и пока это нормально, но я думаю, вам следует уделить ей более высокий приоритет ...

Маркетинг не согласен

Значительные улучшения были внесены в расширение языковой службы Angular в Visual Studio Marketplace. Наряду с капитальным ремонтом архитектуры для решения проблем с производительностью и стабильностью были исправлены многие давние ошибки.

Он настолько улучшен, что никто не может им пользоваться. Ха.

Идет открытый пиар. Мы все участники сообщества!

Вот PR для всех, кому интересно: https://github.com/angular/vscode-ng-language-service/pull/609

Спасибо за терпеливость. Огромное спасибо @ghaschel за исправление этого в # 609 и @dannymcgee за помощь в проверке. Если у вас возникнут новые синтаксические ошибки после следующего выпуска (0.900.14), откройте другой выпуск.

Какое время прибытия на 0.900.14?

@kyliau

Опубликована v0.900.14!
https://github.com/angular/vscode-ng-language-service/releases/tag/v0.900.14

Эта проблема была автоматически заблокирована из-за бездействия.
Сообщите о новой проблеме, если вы столкнулись с аналогичной или связанной проблемой.

Узнайте больше о нашей политике автоматической блокировки разговоров .

_{_Это действие было выполнено автоматически ботом. _}