style: formatting html with prettier

Author: nzbin

.vscode/settings.json

@@ -1,7 +1,9 @@
 {
   "editor.rulers": [100],
   "html.format.wrapLineLength": 100,
-  "html.format.wrapAttributes": "preserve-aligned",
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

projects/dev-app/src/app/diff/diff.component.html

@@ -1,17 +1,28 @@
-<diff-editor #editor [style.height.px]="200"
-             [(ngModel)]="value"
-             (originalValueChange)="log($event)"
-             (modifiedValueChange)="log($event)"
-             [orientation]="orientation" [revertControls]="revertControls"
-             [highlightChanges]="highlightChanges" [gutter]="gutter"
-             [disabled]="disabled" />
+<diff-editor
+  #editor
+  [style.height.px]="200"
+  [(ngModel)]="value"
+  (originalValueChange)="log($event)"
+  (modifiedValueChange)="log($event)"
+  [orientation]="orientation"
+  [revertControls]="revertControls"
+  [highlightChanges]="highlightChanges"
+  [gutter]="gutter"
+  [disabled]="disabled"
+/>
 
-<button (click)="doc='123'">change original value</button>
-<button (click)="doc2='13\n456'">change modified value</button>
-<button (click)="orientation==='a-b'?orientation='b-a':orientation='a-b'">orientation</button>
-<button (click)="revertControls==='a-to-b'?revertControls='b-to-a':revertControls='a-to-b'">revertControls</button>
-<button (click)="highlightChanges=!highlightChanges">highlightChanges</button>
-<button (click)="gutter=!gutter">gutter</button>
-<button (click)="disabled=!disabled">disabled</button>
+<button (click)="doc = '123'">change original value</button>
+<button (click)="doc2 = '13\n456'">change modified value</button>
+<button (click)="orientation === 'a-b' ? (orientation = 'b-a') : (orientation = 'a-b')">
+  orientation
+</button>
+<button
+  (click)="revertControls === 'a-to-b' ? (revertControls = 'b-to-a') : (revertControls = 'a-to-b')"
+>
+  revertControls
+</button>
+<button (click)="highlightChanges = !highlightChanges">highlightChanges</button>
+<button (click)="gutter = !gutter">gutter</button>
+<button (click)="disabled = !disabled">disabled</button>
 
 <code-editor [value]="doc2" [extensions]="unifiedExts" />

projects/dev-app/src/app/home/home.component.html

@@ -8,43 +8,47 @@ <h4>Code Editor Config</h4>
 
   <div>
     <h4>
-      <button mat-button (click)="showOutput=!showOutput">Toggle output</button>
+      <button mat-button (click)="showOutput = !showOutput">Toggle output</button>
     </h4>
     <div class="editor-wrap">
-      <code-editor #editor
-                   [style.height]="'500px'"
-                   [(ngModel)]="code"
-                   (ngModelChange)="log($event)"
-                   [theme]="options.theme"
-                   [setup]="options.setup"
-                   [disabled]="options.disabled"
-                   [readonly]="options.readonly"
-                   [placeholder]="options.placeholder"
-                   [indentWithTab]="options.indentWithTab"
-                   [indentUnit]="options.indentUnit"
-                   [lineWrapping]="options.lineWrapping"
-                   [highlightWhitespace]="options.highlightWhitespace"
-                   [language]="options.language"
-                   [languages]="languages" />
+      <code-editor
+        #editor
+        [style.height]="'500px'"
+        [(ngModel)]="code"
+        (ngModelChange)="log($event)"
+        [theme]="options.theme"
+        [setup]="options.setup"
+        [disabled]="options.disabled"
+        [readonly]="options.readonly"
+        [placeholder]="options.placeholder"
+        [indentWithTab]="options.indentWithTab"
+        [indentUnit]="options.indentUnit"
+        [lineWrapping]="options.lineWrapping"
+        [highlightWhitespace]="options.highlightWhitespace"
+        [language]="options.language"
+        [languages]="languages"
+      />
 
       @if (showOutput) {
-      <textarea [style.height]="'500px'" [(ngModel)]="code"></textarea>
+        <textarea [style.height]="'500px'" [(ngModel)]="code"></textarea>
       }
     </div>
 
     <h4>Unified diff-editor</h4>
-    <code-editor #editor
-                 [style.height]="'500px'"
-                 [value]="modifiedCode"
-                 [theme]="options.theme"
-                 [setup]="options.setup"
-                 [readonly]="options.readonly"
-                 [placeholder]="options.placeholder"
-                 [indentWithTab]="options.indentWithTab"
-                 [indentUnit]="options.indentUnit"
-                 [lineWrapping]="options.lineWrapping"
-                 [highlightWhitespace]="options.highlightWhitespace"
-                 [extensions]="unifiedExts" />
+    <code-editor
+      #editor
+      [style.height]="'500px'"
+      [value]="modifiedCode"
+      [theme]="options.theme"
+      [setup]="options.setup"
+      [readonly]="options.readonly"
+      [placeholder]="options.placeholder"
+      [indentWithTab]="options.indentWithTab"
+      [indentUnit]="options.indentUnit"
+      [lineWrapping]="options.lineWrapping"
+      [highlightWhitespace]="options.highlightWhitespace"
+      [extensions]="unifiedExts"
+    />
   </div>
 </section>
 
@@ -58,13 +62,15 @@ <h4>Diff Editor Config</h4>
 
   <div>
     <h4>Split diff-editor</h4>
-    <diff-editor #editor
-                 [style.height]="'100vh'"
-                 [originalValue]="originalCode"
-                 [modifiedValue]="modifiedCode"
-                 [orientation]="options2.orientation"
-                 [revertControls]="options2.revertControls"
-                 [highlightChanges]="options2.highlightChanges"
-                 [gutter]="options2.gutter" />
+    <diff-editor
+      #editor
+      [style.height]="'100vh'"
+      [originalValue]="originalCode"
+      [modifiedValue]="modifiedCode"
+      [orientation]="options2.orientation"
+      [revertControls]="options2.revertControls"
+      [highlightChanges]="options2.highlightChanges"
+      [gutter]="options2.gutter"
+    />
   </div>
 </section>

projects/dev-app/src/app/layout/layout.component.html

@@ -3,12 +3,14 @@
   <span class="spacer"></span>
   <a mat-icon-button href="https://github.com/acrodata/code-editor" target="_blank">
     <svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg">
-      <path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8
-               c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1
-               c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6
-               c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9
-               c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3
-               C51.5,11.7,40.1,0.2,25.9,0.2z" />
+      <path
+        d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8
+        c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1
+        c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6
+        c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9
+        c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3
+        C51.5,11.7,40.1,0.2,25.9,0.2z"
+      />
     </svg>
   </a>
 </mat-toolbar>