From 33b5704cb421ae5ab1bf7a6e3587ff84ca1c084d Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@cominetti.org>
Date: Fri, 2 Oct 2020 12:52:51 +0100
Subject: [PATCH] style(ui): adds vscode workspace settings

---
 .vscode/settings.json        | 29 ++++++++++++++++++
 frontend/src/AppFrontend.vue | 57 +++++++++++++++++++++---------------
 2 files changed, 62 insertions(+), 24 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..a21d56f2c
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,29 @@
+{
+  "vetur.format.defaultFormatterOptions": {
+    "js-beautify-html": {
+      "wrap_attributes": "force-expand-multiline"
+    },
+    "prettyhtml": {
+      "printWidth": 100,
+      "singleQuote": false,
+      "wrapAttributes": false,
+      "sortAttributes": false
+    }
+  },
+
+  "editor.formatOnSave": true,
+  "vetur.validation.template": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "cSpell.userWords": ["vetur", "vuetify"],
+  "vetur.format.defaultFormatter.js": "none",
+  "vetur.format.defaultFormatter.ts": "none",
+  "[vue]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "eslint.validate": ["vue"]
+}
diff --git a/frontend/src/AppFrontend.vue b/frontend/src/AppFrontend.vue
index 65c504566..10616bd15 100644
--- a/frontend/src/AppFrontend.vue
+++ b/frontend/src/AppFrontend.vue
@@ -2,18 +2,26 @@
   <v-app id="inspire">
     <v-app-bar app color="white" flat>
       <v-container class="py-0 fill-height">
-        
-
-
         <v-btn text to="/">
-          <v-img contain max-height="30" max-width="30" src="./assets/logo.svg" />
+          <v-img
+            contain
+            max-height="30"
+            max-width="30"
+            src="./assets/logo.svg"
+          />
           <div class="mt-1">
-            <span class="primary--text"><b>SPECKLE</b></span>&nbsp;<span class="font-weight-light">ADMIN</span>
+            <span class="primary--text"><b>SPECKLE</b></span
+            >&nbsp;<span class="font-weight-light">ADMIN</span>
           </div>
-          
         </v-btn>
 
-        <v-btn v-for="link in navLinks" :key="link.name" text class="text-uppercase" :to="link.link">
+        <v-btn
+          v-for="link in navLinks"
+          :key="link.name"
+          text
+          class="text-uppercase"
+          :to="link.link"
+        >
           {{ link.name }}
         </v-btn>
 
@@ -62,9 +70,9 @@
 
           <v-col>
             <!-- <v-sheet min-height="70vh" rounded="lg"> -->
-              <v-main class="pt-0">
-                <router-view :user="user"></router-view>
-              </v-main>
+            <v-main class="pt-0">
+              <router-view :user="user"></router-view>
+            </v-main>
             <!-- </v-sheet> -->
           </v-col>
         </v-row>
@@ -110,24 +118,25 @@ export default {
             }
           }
         }
-      `,
-    },
+      `
+    }
   },
   components: {},
 
-  data: () => ( {
+  data: () => ({
     user: {},
-    navLinks: [ 
-      {link: "/streams", name:"streams"}, 
-      {link: "/teams", name:"teams"}, 
-      {link: "/profile", name:"profile"}, 
-      {link: "/settings", name:"settings"}, 
-      {link: "/help", name:"help"}
-    ] } ),
-  
-  watch:{
-    user( val ){
-      console.log( val )
+    navLinks: [
+      { link: "/streams", name: "streams" },
+      { link: "/teams", name: "teams" },
+      { link: "/profile", name: "profile" },
+      { link: "/settings", name: "settings" },
+      { link: "/help", name: "help" }
+    ]
+  }),
+
+  watch: {
+    user(val) {
+      console.log(val)
     }
   }
 }