بالإضافة إلى ما سبق ، فإن اختصار التعليق مثل 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 لا يقوم بعمل ; وأجمل هو إزالته أيضًا

يرتبط هذا بالنمط المطابق للتعبيرات الزاوية. المناقشة الجارية هنا: 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 on 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 من لوحة الأوامر والنقر على العلامات الخضراء. النطاق النحوي لمكون الويب ذي النمط الزاوي هو meta.tag.custom.<start/end>.html entity.name.tag.html ، والذي يتطابق مع ألوان Dark + مثل أي علامة HTML أخرى. هناك سمات تلون مكونات الويب برموز مختلفة عن علامات HTML العادية ، لكن Dark + ليست واحدة منها. (لا يتم التحكم في التلوين الفعلي الذي يتم تطبيقه بواسطة هذا الامتداد ؛ يتم التعامل معه بواسطة السمات ، بينما يوفر هذا الامتداد فقط نطاقات القواعد التي يمكن للسمات الارتباط بها.)

أظن أنك سترى إبراز بناء الجملة المتسق مرة أخرى.

نعم ، هذا كل شيء ، تم إصلاحه. اعتقدت أنها مفصولة بـ "،"

يجري الأمر على أكمل وجه! يعتقد الكثير حقا! <3

التعليقات لا تبدو مثل التعليقات بعد الآن.
هل لاحظ أي شخص آخر هذا السلوك؟

591

نعم

بالإضافة إلى ما سبق ، فإن اختصار التعليق مثل ctrl + / / cmd + / ينتج تعليقًا يشبه الكتابة المطبوعة // ... بدلاً من تعليق يشبه html

نحن نعمل على إصلاح هذا في تصحيح مستقبلي!

От: Arnaud Crowther [email protected]
тправлено: среда، января 29، 2020 6:47 AM
Кому: الزاوي / vscode-ng-language-service
Копия: حافظ؛ أشير
Тема: Re: [angular / vscode-ng-language-service] تعطل تمييز لون القالب (# 575)

لذلك فقط للتلخيص ، إضافة الفاصلة المنقوطة يصلحها. هل سيتم تحديث هذا السلوك في تصحيح مستقبلي؟ أم يجب علينا فقط إضافة الفاصلة المنقوطة من الآن فصاعدًا للحصول على تمييز مناسب في بناء الجملة؟ شكرا لعملكم الشاق!

-
أنت تتلقى هذا لأنه تم ذكرك.
الرد على هذا البريد الإلكتروني مباشرة، مشاهدته على جيثب https://github.com/angular/vscode-ng-language-service/issues/575؟email_source=notifications&email_token=AE6GL6X4BQ4LGSYDIC627PLRAGJHNA5CNFSM4KLCQL6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKHN6ZY#issuecomment-579788647 ، أو إلغاء الاشتراك HTTPS: // جيثب. com / إخطارات / unsubscribe-auth / AE6GL6RPCCIDWSKAQRQGZJLRAGJHNANCNFSM4KLCQL6A .

فقط للإضافة: يقوم Prettier تلقائيًا بإزالة الفاصلة المنقوطة من <div *ngIf="data.status as status;"> مما يؤدي إلى حدوث هذه المشكلة.

cpboyd أي أداة تقوم بتنظيف الكود وتنظيفه

إلا إذا تراجعت المشكلة :(

cpboyd أي أداة تقوم بتنظيف الكود وتنظيفه

إلا إذا تراجعت المشكلة :(

نحن بصدد اختبار القواعد النحوية هنا ، وبمجرد أن يتم الإصلاح ، أنا متأكد من أننا سنضيف حالات اختبار لتغطية هذه المشكلة. أنا حقًا لا أتوقع أي تراجع بمجرد إصلاح ذلك. :)

ayazhafiz ، إذا كان ذلك

dannymcgeeayazhafiz لقد اختبرت قواعد اللغة برمز المتاحة في هذه المسألة، وضد مصدر برنامج في العمل. لم يتم كسر أي شيء حتى الآن ولا حاجة لإضافة الفاصلة المنقوطة المخيفة أيضًا.

يظهر هذا أيضًا بعد ذلك في عامل التشغيل 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. جنبًا إلى جنب مع الإصلاح المعماري الرئيسي لمعالجة مشكلات الأداء والاستقرار ، تم أيضًا إصلاح العديد من الأخطاء طويلة الأمد.

لقد تم تحسينه كثيرًا بحيث لا يمكن لأحد استخدامه. ههه.

هناك علاقات عامة مفتوحة. نحن جميعًا مساهمون في المجتمع!

هنا العلاقات العامة لأي شخص فضولي: https://github.com/angular/vscode-ng-language-service/pull/609

شكرا لك على صبرك. شكراً جزيلاً لـ ghaschel لإصلاح هذا الأمر في # 609 وإلى dannymcgee للمساعدة في المراجعة. إذا واجهت المزيد من الأخطاء النحوية بعد الإصدار التالي (0.900.14) ، فيرجى فتح مشكلة أخرى.

ما هو ETA على 0.900.14؟

تضمين التغريدة

تم نشر الإصدار 0.900.14!
https://github.com/angular/vscode-ng-language-service/releases/tag/v0.900.14

تم قفل هذه المشكلة تلقائيًا بسبب عدم النشاط.
يرجى تقديم مشكلة جديدة إذا كنت تواجه مشكلة مشابهة أو ذات صلة.

اقرأ المزيد حول سياسة قفل المحادثة التلقائي .

_{_تم تنفيذ هذا الإجراء تلقائيًا بواسطة روبوت.}