Fix some style issues (#408)

* Remove extra closing tag and reformat index.html * Install prettier and reformat codebase
EduMIPS64 · Jun 1, 2020 · 4e889c2 · 4e889c2
1 parent 9dd8b99
commit 4e889c2
Show file tree

Hide file tree

Showing 16 changed files with 932 additions and 760 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,28 +1,28 @@
 {
-    "env": {
-        "browser": true,
-        "es6": true
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "prettier"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
     },
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "plugin:react-hooks/recommended"
-    ],
-    "globals": {
-        "Atomics": "readonly",
-        "SharedArrayBuffer": "readonly"
-    },
-    "parserOptions": {
-        "ecmaFeatures": {
-            "jsx": true
-        },
-        "ecmaVersion": 11,
-        "sourceType": "module"
-    },
-    "plugins": [
-        "react"
-    ],
-    "rules": {
-        "react/prop-types": 0
-    }
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "prettier"],
+  "rules": {
+    "react/prop-types": 0,
+    "prettier/prettier": ["error"]
+  }
 }
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 80
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,9 +28,11 @@
     "copy-webpack-plugin": "6.0.1",
     "css-loader": "3.5.3",
     "eslint": "7.1.0",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-config-standard": "14.1.1",
     "eslint-plugin-import": "2.20.2",
     "eslint-plugin-node": "11.1.0",
+    "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-react": "7.20.0",
     "eslint-plugin-react-hooks": "4.0.4",

diff --git a/src/webapp/components/Code.js b/src/webapp/components/Code.js
@@ -1,121 +1,120 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState } from 'react';
 
 import MonacoEditor from 'react-monaco-editor';
 
 const Code = (props) => {
-    const [monaco, setMonaco] = useState(null);
-    const [editor, setEditor] = useState(null);
+  const [monaco, setMonaco] = useState(null);
+  const [editor, setEditor] = useState(null);
 
-    // IDisposable to clean up the hover provider.
-    const [hoverDisposable, setHoverCleanup] = useState(null);
+  // IDisposable to clean up the hover provider.
+  const [hoverDisposable, setHoverCleanup] = useState(null);
 
-    // Hook to update the map of source line to instruction.
-    useEffect(() => {
-        if (!monaco) {
-            return;
-        }
+  // Hook to update the map of source line to instruction.
+  useEffect(() => {
+    if (!monaco) {
+      return;
+    }
+
+    let map = new Map();
+    if (props.parsedInstructions) {
+      props.parsedInstructions
+        .filter((instruction) => instruction)
+        .map((instruction) => map.set(instruction.Line, instruction));
+    }
+
+    if (hoverDisposable) {
+      hoverDisposable.dispose();
+    }
 
-        let map = new Map();
-        if (props.parsedInstructions) {
-            props.parsedInstructions
-                .filter(instruction => instruction)
-                .map(instruction => map.set(instruction.Line, instruction));
+    let disposable = monaco.languages.registerHoverProvider('mips', {
+      provideHover: (model, position) => {
+        if (map.size === 0) {
+          return;
         }
 
-        if (hoverDisposable) {
-            hoverDisposable.dispose();
+        const line = position.lineNumber;
+        if (!map.has(line)) {
+          return;
         }
 
-        let disposable = monaco.languages.registerHoverProvider("mips", {provideHover:
-            (model, position) => {
-                if (map.size === 0) {
-                    return;
-                }
-
-                const line = position.lineNumber;
-                if (!map.has(line)) {
-                    return;
-                }
-
-                const instruction = map.get(line);
-                return {
-                    range: new monaco.Range(line, 0, line, model.getLineMaxColumn(line)),
-                    contents: [
-                        { value: `*Address*: \`${instruction.Address}\``},
-                        { value: `*OpCode*: \`${instruction.OpCode}\``},
-                        { value: `*Binary*: \`${instruction.BinaryRepresentation}\``},
-                    ]
-                }
-            },
-        });
-        setHoverCleanup(disposable);
-    }, [props.parsedInstructions, monaco]); // eslint-disable-line react-hooks/exhaustive-deps
-
-
-    const editorDidMount = (editor, monaco) => {
-        setMonaco(monaco);
-        setEditor(editor);
+        const instruction = map.get(line);
+        return {
+          range: new monaco.Range(line, 0, line, model.getLineMaxColumn(line)),
+          contents: [
+            { value: `*Address*: \`${instruction.Address}\`` },
+            { value: `*OpCode*: \`${instruction.OpCode}\`` },
+            { value: `*Binary*: \`${instruction.BinaryRepresentation}\`` },
+          ],
+        };
+      },
+    });
+    setHoverCleanup(disposable);
+  }, [props.parsedInstructions, monaco]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const editorDidMount = (editor, monaco) => {
+    setMonaco(monaco);
+    setEditor(editor);
+  };
+
+  const options = {
+    selectOnLineNumbers: true,
+    roundedSelection: false,
+    readOnly: false,
+    cursorStyle: 'line',
+    codelens: false,
+    minimap: { enabled: false },
+    tabsize: 4,
+    lineNumbersMinChars: 3,
+
+    // Note: the documentation mentions this might have a negative performance
+    // impact.
+    automaticLayout: true,
+  };
+
+  // Hook to compute and set markers for warnings and errors.
+  useEffect(() => {
+    if (!monaco || !editor) {
+      return;
     }
 
-    const options = {
-        selectOnLineNumbers: true,
-        roundedSelection: false,
-        readOnly: false,
-        cursorStyle: "line",
-        codelens: false,
-        minimap: {enabled: false},
-        tabsize: 4,
-        lineNumbersMinChars: 3,
-
-        // Note: the documentation mentions this might have a negative performance
-        // impact.
-        automaticLayout: true,
-    };
-
-    // Hook to compute and set markers for warnings and errors.
-    useEffect(() => {
-        if (!monaco || !editor) {
-            return;
-        }
-
-        const model = editor.getModel();
-        monaco.editor.setModelMarkers(model, "EduMIPS64", []);
+    const model = editor.getModel();
+    monaco.editor.setModelMarkers(model, 'EduMIPS64', []);
 
-        if(!props.parsingErrors) {
-            return;
-        }
+    if (!props.parsingErrors) {
+      return;
+    }
 
-        console.log("Parsing errors", props.parsingErrors);
-        const lines = editor.getValue().split("\n");
-        const markers = props.parsingErrors.map(err => {
-            const line = lines[err.row-1];
-            // First non-space character.
-            const startColumn = line.search(/\S/)+1;
-            return {
-                startLineNumber: err.row,
-                endLineNumber: err.row,
-                startColumn: startColumn,
-                endColumn: line.length+1,
-                message: `${err.description}`,
-                severity: err.isWarning ? 4 : 8,
-                source: 'EduMIPS64',
-            };
-        });
-        console.log("Markers", markers);
-
-        monaco.editor.setModelMarkers(model, "EduMIPS64", markers);
-    }, [props.parsingErrors, editor, monaco]);
-
-    return (
-        <MonacoEditor
-            language="mips"
-            value={props.code}
-            options={options}
-            onChange={props.onChangeValue}
-            theme="vs-light"
-            editorDidMount={editorDidMount}
-        />
-    )
-}
-
-export default Code;
+    console.log('Parsing errors', props.parsingErrors);
+    const lines = editor.getValue().split('\n');
+    const markers = props.parsingErrors.map((err) => {
+      const line = lines[err.row - 1];
+      // First non-space character.
+      const startColumn = line.search(/\S/) + 1;
+      return {
+        startLineNumber: err.row,
+        endLineNumber: err.row,
+        startColumn: startColumn,
+        endColumn: line.length + 1,
+        message: `${err.description}`,
+        severity: err.isWarning ? 4 : 8,
+        source: 'EduMIPS64',
+      };
+    });
+    console.log('Markers', markers);
+
+    monaco.editor.setModelMarkers(model, 'EduMIPS64', markers);
+  }, [props.parsingErrors, editor, monaco]);
+
+  return (
+    <MonacoEditor
+      language="mips"
+      value={props.code}
+      options={options}
+      onChange={props.onChangeValue}
+      theme="vs-light"
+      editorDidMount={editorDidMount}
+    />
+  );
+};
+
+export default Code;
diff --git a/src/webapp/components/Controls.js b/src/webapp/components/Controls.js
@@ -1,20 +1,60 @@
-import React from "react";
-import ErrorDisplay from "./ErrorDisplay";
+import React from 'react';
+import ErrorDisplay from './ErrorDisplay';
 
 // Number of steps to run with the multi-step button.
 const STEP_STRIDE = 500;
 
 const Controls = (props) => {
-    return (
-        <div id="controls">
-            <input id="load-button" type="button" value="Load/Reset" onClick={() => {props.onLoadClick()}} disabled={!props.loadEnabled} />
-            <input id="step-button" type="button" value="Single Step" onClick={() => {props.onStepClick(1)}} disabled={!props.stepEnabled} />
-            <input id="multi-step-button" type="button" value="Multi Step" onClick={() => {props.onStepClick(STEP_STRIDE)}} disabled={!props.stepEnabled} />
-            <input id="run-button" type="button" value="Run All" onClick={() => {props.onRunClick()}} disabled={!props.runEnabled} />
-            <input id="stop-button" type="button" value="Stop" onClick={() => {props.onStopClick()}} disabled={!props.stopEnabled} />
-            <ErrorDisplay parsingErrors={props.parsingErrors} />
-        </div>
-    )
-}
+  return (
+    <div id="controls">
+      <input
+        id="load-button"
+        type="button"
+        value="Load/Reset"
+        onClick={() => {
+          props.onLoadClick();
+        }}
+        disabled={!props.loadEnabled}
+      />
+      <input
+        id="step-button"
+        type="button"
+        value="Single Step"
+        onClick={() => {
+          props.onStepClick(1);
+        }}
+        disabled={!props.stepEnabled}
+      />
+      <input
+        id="multi-step-button"
+        type="button"
+        value="Multi Step"
+        onClick={() => {
+          props.onStepClick(STEP_STRIDE);
+        }}
+        disabled={!props.stepEnabled}
+      />
+      <input
+        id="run-button"
+        type="button"
+        value="Run All"
+        onClick={() => {
+          props.onRunClick();
+        }}
+        disabled={!props.runEnabled}
+      />
+      <input
+        id="stop-button"
+        type="button"
+        value="Stop"
+        onClick={() => {
+          props.onStopClick();
+        }}
+        disabled={!props.stopEnabled}
+      />
+      <ErrorDisplay parsingErrors={props.parsingErrors} />
+    </div>
+  );
+};
 
-export default Controls;
+export default Controls;