html: reformat code

Author: tsl0922

html/.editorconfig

@@ -2,10 +2,13 @@ root = true
 
 [*]
 charset = utf-8
-indent_size = 2
+indent_size = 4
 indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+[{*.json, *.scss}]
+indent_size = 2
+
 [*.md]
 trim_trailing_whitespace = false

html/prettier.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    trailingComma: "es5",
+    tabWidth: 4,
+    printWidth: 120,
+    singleQuote: true,
+};

html/src/components/app.tsx

@@ -4,48 +4,41 @@ import { ITerminalOptions, ITheme } from 'xterm';
 import { Xterm } from './terminal';
 
 if ((module as any).hot) {
-  // tslint:disable-next-line:no-var-requires
-  require('preact/debug');
+    // tslint:disable-next-line:no-var-requires
+    require('preact/debug');
 }
 
 const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
 const wsPath = window.location.pathname.endsWith('/') ? 'ws' : '/ws';
-const url = [
-  protocol,
-  window.location.host,
-  window.location.pathname,
-  wsPath,
-  window.location.search,
-].join('');
+const url = [protocol, window.location.host, window.location.pathname, wsPath, window.location.search].join('');
 const termOptions = {
-  fontSize: 13,
-  fontFamily:
-    'Menlo For Powerline,Consolas,Liberation Mono,Menlo,Courier,monospace',
-  theme: {
-    foreground: '#d2d2d2',
-    background: '#2b2b2b',
-    cursor: '#adadad',
-    black: '#000000',
-    red: '#d81e00',
-    green: '#5ea702',
-    yellow: '#cfae00',
-    blue: '#427ab3',
-    magenta: '#89658e',
-    cyan: '#00a7aa',
-    white: '#dbded8',
-    brightBlack: '#686a66',
-    brightRed: '#f54235',
-    brightGreen: '#99e343',
-    brightYellow: '#fdeb61',
-    brightBlue: '#84b0d8',
-    brightMagenta: '#bc94b7',
-    brightCyan: '#37e6e8',
-    brightWhite: '#f1f1f0',
-  } as ITheme,
+    fontSize: 13,
+    fontFamily: 'Menlo For Powerline,Consolas,Liberation Mono,Menlo,Courier,monospace',
+    theme: {
+        foreground: '#d2d2d2',
+        background: '#2b2b2b',
+        cursor: '#adadad',
+        black: '#000000',
+        red: '#d81e00',
+        green: '#5ea702',
+        yellow: '#cfae00',
+        blue: '#427ab3',
+        magenta: '#89658e',
+        cyan: '#00a7aa',
+        white: '#dbded8',
+        brightBlack: '#686a66',
+        brightRed: '#f54235',
+        brightGreen: '#99e343',
+        brightYellow: '#fdeb61',
+        brightBlue: '#84b0d8',
+        brightMagenta: '#bc94b7',
+        brightCyan: '#37e6e8',
+        brightWhite: '#f1f1f0',
+    } as ITheme,
 } as ITerminalOptions;
 
 export class App extends Component {
-  render() {
-    return <Xterm id="terminal-container" url={url} options={termOptions} />;
-  }
+    render() {
+        return <Xterm id="terminal-container" url={url} options={termOptions} />;
+    }
 }

html/src/components/modal/index.tsx

@@ -3,25 +3,25 @@ import { Component, ComponentChildren, h } from 'preact';
 import './modal.scss';
 
 interface Props {
-  show: boolean;
-  children: ComponentChildren;
+    show: boolean;
+    children: ComponentChildren;
 }
 
 export class Modal extends Component<Props> {
-  constructor(props) {
-    super(props);
-  }
+    constructor(props) {
+        super(props);
+    }
 
-  render({ show, children }: Props) {
-    return (
-      show && (
-        <div className="modal">
-          <div className="modal-background" />
-          <div className="modal-content">
-            <div className="box">{children}</div>
-          </div>
-        </div>
-      )
-    );
-  }
+    render({ show, children }: Props) {
+        return (
+            show && (
+                <div className="modal">
+                    <div className="modal-background" />
+                    <div className="modal-content">
+                        <div className="box">{children}</div>
+                    </div>
+                </div>
+            )
+        );
+    }
 }