Selain yang di atas, pintasan komentar seperti ctrl + / / cmd + / menghasilkan komentar seperti skrip // ... alih-alih komentar seperti html <!-- ... -->

Masalahnya sangat menjengkelkan dan membuat ekstensi bukannya membantu menjadi benar-benar tidak dapat digunakan.

Dugaan saya: ini entah bagaimana terkait dengan arahan struktural kustom seperti misalnya material bersudut dan / atau (event) penangan.

Ini adalah versinya

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


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

Selain yang di atas, pintasan komentar seperti ctrl + / / cmd + / menghasilkan komentar seperti skrip // ... alih-alih komentar seperti html <!-- ... -->

Masalahnya sangat menjengkelkan dan membuat ekstensi bukannya membantu menjadi benar-benar tidak dapat digunakan.

Dugaan saya: ini entah bagaimana terkait dengan arahan struktural kustom seperti misalnya material bersudut dan / atau (event) penangan.

Ini adalah versinya

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


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

Saya menggunakan v0.900.6 di sini dan itu tidak terjadi pada saya. Apakah Anda mencoba menonaktifkan ekstensi lain untuk menyingkirkan ekstensi yang bentrok?

@ghaschel Anda benar, tidak ada di setiap file.

Saya bisa mempersempitnya hingga garis ini menyebabkan masalah

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

lebih spesifik

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

mungkin * atau let . Menghapus salah satunya menyelesaikan kekacauan warna

Coba tambahkan ; setelah let param

menambahkan ; tampaknya menyelesaikan masalah.

Apakah ada peluang untuk membuat kesempatan ini tidak putus?
Angular tidak melakukan ; dan yang lebih cantik juga menghapusnya

Ini terkait dengan pola pencocokan ekspresi sudut. Diskusi yang sedang berlangsung ada di sini: https://github.com/angular/vscode-ng-language-service/issues/571

Coba tambahkan; setelah biarkan param

Nah, memperbaiki proyek yang berfungsi untuk perubahan yang tidak diumumkan pada plugin IDE agar IDE menyorot template HTML dengan benar tidak terdengar seperti solusi ...

Namun ada baiknya masalah dilokalkan.

Apakah ini akan diperbaiki?

Iya.

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

Saya melihat kesalahan dengan sintaks JS dalam pengikatan *matCellDef , tetapi tidak dengan *matHeaderCellDef . @ BO41 apakah ada sesuatu yang saya lewatkan?

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

Saya melihat kesalahan dengan sintaks JS dalam pengikatan *matCellDef , tetapi tidak dengan *matHeaderCellDef . @ BO41 apakah ada sesuatu yang saya lewatkan?

Dugaan saya adalah bahwa potongan sintaks sebenarnya lebih jauh dari file, bukan di tangkapan layar. Pembukaan ng-container adalah warna yang salah untuk tag HTML di screenshot OP, tetapi kurang terlihat dibandingkan dengan petunjuk struktural merah dan SNAFU yang mengikutinya.

Dugaan saya adalah bahwa potongan sintaks sebenarnya lebih jauh dari file, bukan di tangkapan layar. Pembukaan ng-container adalah warna yang salah untuk tag HTML di screenshot OP, tetapi kurang terlihat dibandingkan dengan petunjuk struktural merah dan SNAFU yang mengikutinya.

Itu benar. Pada saat membuka masalah, saya tidak tahu penyebabnya.
Setelah sintaks rusak sekali, itu tidak memulihkan sisa file.

@ayazhafiz kalo kamu copy lagi kode yang sama di bawah ini, mungkin kelihatannya seperti screenshot saya

@ BO41, kode apa yang Anda maksud?

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

yang ini. Tetapi setiap tag pembuka baru harus dikacaukan

Baik. Dapatkah Anda memverifikasi bahwa penyebab tunggal adalah titik koma yang hilang dalam ekspresi let param ?

bagaimana? apa saja yang bisa saya uji?

• kodenya dari angular.io
• ini bekerja dalam 0,5
• itu rusak dengan meningkatkan ke .6 atau .7 bahkan dengan semua ekstensi lainnya dinonaktifkan
• Anda dan orang lain dapat mereproduksinya dengan versi sudut yang berbeda

Yang saya maksud adalah, dapatkah Anda mengonfirmasi bahwa kesalahan dalam penyorotan untuk masalah yang telah Anda laporkan pada tag ng-container dan setelah definisi *matCellDef disebabkan oleh titik koma yang hilang.

Seperti yang disarankan @ghaschel

menambahkan ; tampaknya menyelesaikan masalah.

atau

mungkin * atau let . Menghapus salah satunya menyelesaikan kekacauan warna

Tetapi titik koma tidak hilang, karena seharusnya tidak diperlukan.

Saya mengalami masalah yang sama dengan direktif * ngFor dan dapat mengonfirmasi bahwa menambahkan ; ke akhir *ngFor="let p of navItems memperbaiki sisa pemformatan.

Tambahkan contoh lain

Oke, kami siap. Jika ada bug lain yang tidak terkait dengan bug ini, silakan buka masalah baru. Jika memungkinkan, harap sertakan contoh kode minimal yang dapat kami salin / tempel ke editor.

Oke, kami siap. Jika ada bug lain yang tidak terkait dengan bug ini, silakan buka masalah baru. Jika memungkinkan, harap sertakan contoh kode minimal yang dapat kami salin / tempel ke 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>

Catatan:

• e bahkan ngFor, dan biarkan kata yang disimpan tidak diwarnai dengan benar.
• antara #event on ng-template dan spasi pertama sebelum tag pertama tidak diwarnai dengan benar.

Terkadang ng-containger diwarnai dengan benar, terkadang tidak:

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

Warna yang tepat haruslah hijau menurut saya.

@qmarquez Titik kegagalan dalam contoh Anda adalah pernyataan let <var> = <value> . Jika Anda membatasi mereka dengan titik koma, saya curiga Anda akan melihat penyorotan sintaks yang konsisten lagi. (Itu tidak berarti ini bukan bug, tetapi secara konsisten dapat direproduksi dalam keadaan seperti itu.)

Warna yang tepat haruslah hijau menurut saya.

Warna yang benar untuk tag HTML dengan tema + Gelap default adalah biru tua. Ini mendapatkan warna hijau karena disorot sebagai komponen JSX, karena sintaks JavaScript menjadi "macet" dan tidak pernah keluar kembali ke penguraian HTML. Anda dapat mengonfirmasi hal ini dengan menjalankan Developer: Inspect TM Scopes dari Command Palette dan mengklik tag hijau. Cakupan tata bahasa untuk komponen web bergaya Angular adalah meta.tag.custom.<start/end>.html entity.name.tag.html , yang berwarna + Gelap sama dengan tag HTML lainnya. Ada tema yang mewarnai komponen web dengan token yang berbeda dari tag HTML biasa, tetapi Dark + bukan salah satunya. (Pewarnaan sebenarnya yang diterapkan tidak dikontrol oleh ekstensi ini; yang ditangani oleh tema, sedangkan ekstensi ini hanya menyediakan cakupan tata bahasa yang dapat dihubungkan dengan tema.)

Saya menduga Anda akan melihat penyorotan sintaks yang konsisten lagi.

Ya, itu dia, itu memperbaikinya. Saya pikir itu dipisahkan oleh ','

Semuanya sempurna! sangat berterima kasih! <3

komentar tidak terlihat seperti komentar lagi.
apakah ada orang lain yang mengamati perilaku ini?

591

Iya

Selain yang di atas, pintasan komentar seperti ctrl + / / cmd + / menghasilkan komentar seperti skrip // ... daripada komentar seperti html

Kami sedang berupaya untuk memperbaikinya di tambalan mendatang!

Jawaban: Arnaud Crowther [email protected]
Отправлено: среда, января 29, 2020 6:47 AM
Jawaban: angular / vscode-ng-bahasa-layanan
Копия: hafiz; Menyebut
Тема: Re: [angular / vscode-ng-language-service] Penyorotan warna template rusak (# 575)

Jadi hanya untuk rekap, menambahkan titik koma memperbaikinya. Akankah perilaku ini diperbarui di tambalan mendatang? Atau haruskah kita menambahkan titik koma mulai sekarang untuk mendapatkan penyorotan sintaks yang tepat? Terima kasih atas semua kerja keras Anda!

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, melihatnya di GitHub https://github.com/angular/vscode-ng-language-service/issues/575?email_source=notifications&email_token=AE6GL6X4BQ4LGSYDIC627PLRAGJHNA5CNFSM4KLCQL6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKHN6ZY#issuecomment-579788647 , atau berhenti berlangganan https: // github. com / notifications / unsubscribe-auth / AE6GL6RPCCIDWSKAQRQGZJLRAGJHNANCNFSM4KLCQL6A .

Hanya untuk menambahkan: Lebih cantik secara otomatis menghapus titik koma dari <div *ngIf="data.status as status;"> yang menyebabkan masalah ini.

@cpboyd Alat apa pun yang mengaitkan dan membersihkan kode akan menciptakan kembali masalah jika Anda menggunakan solusi dari titik koma. Karena keberadaan titik koma bukanlah sintaks untuk Angular. Setelah perbaikan dirilis, dan mudah-mudahan beberapa tes unit menutupinya, kita tidak perlu menggunakan perbaikan atau menghadapi masalah ini.

Kecuali jika masalah kembali muncul :(

@cpboyd Alat apa pun yang mengaitkan dan membersihkan kode akan menciptakan kembali masalah jika Anda menggunakan solusi dari titik koma. Karena keberadaan titik koma bukanlah sintaks untuk Angular. Setelah perbaikan dirilis, dan mudah-mudahan beberapa tes unit menutupinya, kita tidak perlu menggunakan perbaikan atau menghadapi masalah ini.

Kecuali jika masalah kembali muncul :(

Kami sedang menguji tata bahasa di sini, dan setelah perbaikannya saya yakin kami akan menambahkan kasus uji untuk membahas masalah ini. Saya benar-benar tidak melihat adanya regresi setelah ini diperbaiki. :)

@ayazhafiz , jika membantu, ikuti contoh lain. Jika Anda mau, saya dapat meletakkan kode di sini.

@dannymcgee @ayazhafiz Saya telah menguji tata bahasa dengan kode yang tersedia dalam masalah ini dan terhadap basis kode di tempat kerja. Sejauh ini tidak ada yang rusak dan tidak perlu menambahkan titik koma yang ditakuti juga.

Ini juga muncul setelahnya di operator as seperti:

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

Saya menemukan peretasan untuk melewati yang lebih cantik: <td mat-cell *matCellDef="let g; else"> bahwa else memperbaiki sintaksis hilighting.

Hanya menimpali, saya memiliki masalah yang sama.

Jika saya menghapus async as post dan hanya menggunakan async itu hilang. Dan menghapus let i = index atau i as index . Bukan solusi yang berhasil.

• Sudut 9
• Layanan Bahasa Angular v0.900.11

Saya mengalami masalah yang sama dengan direktif * ngFor dan dapat mengonfirmasi bahwa menambahkan ; ke akhir *ngFor="let p of navItems memperbaiki sisa pemformatan.

yang satu ini berhasil untuk saya

Perhatikan ; di "let sku" pertama

Saya mengalami masalah yang sama dengan direktif * ngFor dan dapat mengonfirmasi bahwa menambahkan ; ke akhir *ngFor="let p of navItems memperbaiki sisa pemformatan.

yang satu ini berhasil untuk saya

Perhatikan ; di "let sku" pertama

Masalah yang sama seperti @ BO41 dan @cpboyd disebutkan:

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

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

Apakah bug ini sulit diperbaiki? Ini terbuka selama 21 hari, meskipun sangat mengganggu sehingga tidak mungkin menggunakan plugin pada versi saat ini. Saya masih menggunakan versi yang lebih lama, dan tidak apa-apa untuk saat ini, tetapi menurut saya Anda harus memberikan prioritas yang lebih tinggi ...

Pemasaran tidak setuju

Perbaikan signifikan telah dibuat untuk ekstensi layanan bahasa sudut di Visual Studio Marketplace. Bersamaan dengan perombakan arsitektur besar-besaran untuk mengatasi masalah kinerja dan stabilitas, banyak bug yang sudah lama ada juga telah diperbaiki.

Ini jauh lebih baik sehingga tidak ada yang bisa menggunakannya. Hah.

Ada PR terbuka. Kita semua adalah kontributor komunitas!

Berikut ini PR untuk siapa saja yang penasaran: https://github.com/angular/vscode-ng-language-service/pull/609

Terima kasih atas kesabaran Anda. Terima kasih banyak kepada @ghaschel karena telah memperbaikinya di # 609 dan kepada @dannymcgee untuk membantu ulasan. Jika Anda mengalami kesalahan sintaks lebih lanjut setelah rilis berikutnya (0.900.14), buka masalah lain.

Berapa ETA di 0.900.14?

@rachmatul

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

Masalah ini telah dikunci secara otomatis karena tidak ada aktivitas.
Ajukan masalah baru jika Anda mengalami masalah yang serupa atau terkait.

Baca lebih lanjut tentang kebijakan penguncian percakapan otomatis kami.

_{_Tindakan ini telah dilakukan secara otomatis oleh bot._}