Vscode-ng-language-service: 模板颜色突出显示损坏

创建于 2020-01-24 · 46评论 · 资料来源: angular/vscode-ng-language-service

描述错误

标签突出显示是奇怪且不一致的

预期行为

开头标签和结束标签应具有相同的颜色。
如果代码正确，则不应显示错误红色。

屏幕截图

其他背景

在v0.900.5 ，在v0.900.6中断

bug

资料来源

ghost

👍53 👀6 😕5 ❤2

最有用的评论

是的。

ayazhafiz 于 2020-01-24

👍8 ❤5 🎉4

所有46条评论

除上述内容外，诸如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

smnbbrv 于 2020-01-24

👍14 👀1

除上述内容外，诸如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 于 2020-01-24

@ghaschel你是对的，并非在每个文件中。

我能够将范围缩小到此线而导致麻烦

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

更详细

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

可能是*或let 。删除其中一个可以解决颜色混乱

ghost 于 2020-01-24

尝试在let param之后添加; let param

ghaschel 于 2020-01-24

👍10 🎉3

添加;似乎可以解决问题。

是否有机会使这一机会永无止境？
Angular没有做;并且更漂亮也正在删除它

ghost 于 2020-01-24

👍9

这与角度表达式匹配模式有关。正在进行的讨论在这里： https :

ghaschel 于 2020-01-24

👍1

尝试添加; 在让参数之后

好吧，为了使IDE正确突出显示HTML模板而修复一个尚未宣布的IDE插件重大更改的工作项目，听起来不像是一种解决方案...

但是，将问题本地化是一件好事。

这会解决吗？

smnbbrv 于 2020-01-24

😄2

是的。

ayazhafiz 于 2020-01-24

👍8 ❤5 🎉4

与模板

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

我在*matCellDef绑定中看到JS语法错误，但没有看到*matHeaderCellDef 。 @ BO41我缺少什么吗？

Screen Shot 2020-01-25 at 9 33 41 AM

ayazhafiz 于 2020-01-25

与模板
<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>
我在*matCellDef绑定中看到JS语法错误，但没有看到*matHeaderCellDef 。 @ BO41我缺少什么吗？

我的猜测是，语法的断点实际上位于文件的上方，而不是位于屏幕截图中。开头的ng-container是OP屏幕截图中HTML标签的颜色错误，但不如红色的结构指令和随后的SNAFU引起注意。

dannymcgee 于 2020-01-26

我的猜测是，语法的断点实际上位于文件的上方，而不是位于屏幕截图中。开头的ng-container是OP屏幕截图中HTML标签的颜色错误，但不如红色的结构指令和随后的SNAFU引起注意。

没错在打开问题时，我不知道原因。
语法一旦被破坏，就不会在文件的其余部分恢复。

@ayazhafiz如果您再次在下面复制相同的代码，则可能看起来像我的屏幕截图

ghost 于 2020-01-26

@ BO41您指的是什么代码？

ayazhafiz 于 2020-01-26

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

这个。但是任何新的开始标签都应该弄乱

ghost 于 2020-01-26

好的。您可以验证唯一的原因是let param表达式中缺少分号吗？

ayazhafiz 于 2020-01-26

如何？有什么我可以测试的吗？

该代码来自angular.io
它在.5下工作
即使禁用了所有其他扩展名，它也会通过升级到.6或.7来中断
您和其他人可以使用不同的角度版本进行复制

ghost 于 2020-01-27

我的意思是，您能确认在ng-container标签上和*matCellDef定义之后报告的问题的突出显示错误是由于缺少分号引起的。

ayazhafiz 于 2020-01-27

正如@ghaschel建议的

添加;似乎可以解决问题。

或者

可能是*或let 。删除其中一个可以解决颜色混乱

但是，分号并没有丢失，因为它不是必需的。

ghost 于 2020-01-27

我在* ngFor指令中遇到了同样的问题，可以确认将;到*ngFor="let p of navItems的末尾可以修复其余的格式。

JochemWarmenhoven 于 2020-01-27

👍2

追加另一个例子

qmarquez 于 2020-01-27

好的，我们在做。如果还有其他与该错误无关的错误，请随时打开一个新的问题。如果可能，请提供一个最小的代码示例，我们可以将其复制/粘贴到编辑器中。

ayazhafiz 于 2020-01-27

好的，我们在做。如果还有其他与该错误无关的错误，请随时打开一个新的问题。如果可能，请提供一个最小的代码示例，我们可以将其复制/粘贴到编辑器中。

<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上也没有保留颜色。
ng-template上的#event和第一个标记之前的第一个空白之间的颜色不正确。

qmarquez 于 2020-01-27

有时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 于 2020-01-27

@qmarquez示例中的失败点是let <var> = <value>语句。如果用分号将它们加起来，我怀疑您会再次看到一致的语法突出显示。（这并不是说这不是错误，而是在这种情况下始终可以再现。）

我认为合适的颜色应该是绿色。

具有默认Dark +主题的HTML标签的正确颜色是深蓝色。之所以变成绿色，是因为它被作为JSX组件突出显示，这是因为JavaScript语法被“卡住了”，并且从不退出到HTML解析。您可以通过从命令面板运行Developer: Inspect TM Scopes并单击绿色标签来确认这一点。 Angular样式的Web组件的语法范围是meta.tag.custom.<start/end>.html entity.name.tag.html ，Dark +的颜色与其他任何HTML标记的颜色相同。有一些主题使用与普通HTML标签不同的标记为Web组件着色，但是Dark +不是其中之一。（应用的实际颜色不受此扩展名的控制；这是由主题处理的，而此扩展名仅提供了主题可以挂接到的语法范围。）

dannymcgee 于 2020-01-28

👍3 ❤2

我怀疑您会再次看到一致的语法突出显示。

是的，就是这样，它已经解决了。我以为它用'，'隔开

太完美了！真的很高兴！ <3

qmarquez 于 2020-01-28

❤1

评论看起来不再像评论了。
还有其他人观察到这种行为吗？

591

sanket-bhalerao 于 2020-01-29

👍1

是

除上述内容外，诸如ctrl + / / cmd + /之类的注释快捷方式还会生成类似打字稿的注释// ... ...而不是类似html的注释

smnbbrv 于 2020-01-29

我们正在努力在以后的补丁中修复此问题！

答案：Arnaud Crowther [email protected]
Отправлено：среда，января29，2020 6:47 AM
Кому：angular / vscode-ng-language-service
Копия：哈菲兹；提到
类型：回复：[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 。

ayazhafiz 于 2020-01-29

👍8 ❤1 🎉1

只需添加：Prettier会自动从<div *ngIf="data.status as status;">删除分号，从而导致此问题。

cpboyd 于 2020-01-30

👍3

@cpboyd如果您正在使用分号的变通方法，则可以使用任何清理和清除代码的工具来重新创建问题。因为分号的存在不是Angular的语法。修复程序发布后，并希望某些单元测试能够解决此问题，我们就不必使用变通方法或遇到此问题。

除非问题恶化：(

itanex 于 2020-01-31

@cpboyd如果您正在使用分号的变通方法，则可以使用任何清理和清除代码的工具来重新创建问题。因为分号的存在不是Angular的语法。修复程序发布后，并希望某些单元测试能够解决此问题，我们就不必使用变通方法或遇到此问题。
除非问题恶化：(

我们在这里对语法进行快照测试，一旦修复，我确定我们将添加测试用例来解决此问题。一旦解决此问题，我真的不会预见到任何回归。 :)

dannymcgee 于 2020-01-31

😕1

@ayazhafiz ，如果有帮助，请遵循另一个示例。如果您愿意，我可以将代码放在这里。

Angular language service color problem and solution

mhagnumdw 于 2020-02-03

@dannymcgee @ayazhafiz我已经在本期中使用可用代码并针对工作中的代码库测试了语法。到目前为止没有任何问题，也不需要添加可怕的分号。

ghaschel 于 2020-02-03

🎉4 ❤1

此后，它还会出现在as运算符中，例如：

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