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のようなコメント代わりにtypescriptのようなコメント// ...ます。

この問題は本当に厄介で、完全に使用できなくなるのに役立つのではなく、拡張機能になります。

私の推測：これは、角度のあるマテリアルや(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のようなコメント代わりにtypescriptのようなコメント// ...ます。

この問題は本当に厄介で、完全に使用できなくなるのに役立つのではなく、拡張機能になります。

私の推測：これは、角度のあるマテリアルや(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 ;追加してみてください

ghaschel 2020年01月24日

👍10 🎉3

;追加すると、問題が解決するようです。

このチャンスを壊さないようにするチャンスはありますか？
Angularは;を実行しておらず、prettierもそれを削除しています

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>

私は中JS構文でエラーを見ています*matCellDefではなく、との結合*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>
私は中JS構文でエラーを見ています*matCellDefではなく、との結合*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 on ngFor、およびreserverdワードが適切に色付けされていないようにします。
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タグの正しい色は、濃い青です。 JavaScript構文が「スタック」し、HTML解析に戻らないため、JSXコンポーネントとして強調表示されているため、緑色になっています。これを確認するには、コマンドパレットからDeveloper: Inspect TM Scopesを実行し、緑色のタグをクリックします。 AngularスタイルのWebコンポーネントの文法スコープはmeta.tag.custom.<start/end>.html entity.name.tag.html 、Dark +は他のHTMLタグと同じ色になります。プレーンなHTMLタグとは異なるトークンでWebコンポーネントを着色するテーマがありますが、Dark +はその1つではありません。（適用される実際の色付けは、この拡張機能によって制御されません。これはテーマによって処理されますが、この拡張機能は、テーマがフックできる文法スコープを提供するだけです。）

dannymcgee 2020年01月28日

👍3 ❤2

一貫した構文が再び強調表示されるのではないかと思います。

ええ、それだけです、それはそれを修正しました。 '、'で区切られていると思いました

それはすべて完璧です！本当にたくさんあります！ <3

qmarquez 2020年01月28日

❤1

コメントはコメントのようには見えなくなりました。
他の誰かがこの行動を観察していますか？

591

sanket-bhalerao 2020年01月29日

👍1

はい

上記に加えて、ctrl + / / cmd + /などのコメントショートカットは、htmlのようなコメントの代わりにtypescriptのようなコメント// ...を生成します

smnbbrv 2020年01月29日

将来のパッチでこれを修正するために取り組んでいます！

От：アルノー・クラウザー[email protected]
Отправлено：среда、января29、2020 6:47 AM
Кому：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 / notifys / unsubscribe-auth / AE6GL6RPCCIDWSKAQRQGZJLRAGJHNANCNFSM4KLCQL6A 。

ayazhafiz 2020年01月29日

👍8 ❤1 🎉1

追加するだけです。Prettierは<div *ngIf="data.status as status;">からセミコロンを自動的に削除するため、この問題が発生します。

cpboyd 2020年01月30日

👍3

@cpboydセミコロンの回避策を使用している場合、コードをリントしてクリーン

問題が後退する場合を除いて:(

itanex 2020年01月31日

@cpboydセミコロンの回避策を使用している場合、コードをリントしてクリーン
問題が後退する場合を除いて:(

ここでは文法のスナップショットテストを行っています。修正が完了したら、この問題をカバーするテストケースを追加すると確信しています。これが修正された後は、実際にはリグレッションは予測されません。 :)

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"