.vscode/settings.json

@@ -9,7 +9,20 @@
   "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
   "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
   "typescript.format.placeOpenBraceOnNewLineForFunctions": false,
-  "vetur.format.defaultFormatter.html": "js-beautify-html",
-  "vetur.format.defaultFormatter.js": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "vetur.format.defaultFormatter.html": "prettier",
+  "vetur.format.defaultFormatter.js": "prettier-eslint",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "vetur.format.defaultFormatterOptions": {
+
+    "js-beautify-html": {
+      "wrap_attributes": "force-expand-multiline"
+    },
+    "prettyhtml": {
+      "printWidth": 100,
+      "singleQuote": false,
+      "wrapAttributes": false,
+      "sortAttributes": false
+    }
+  },
+  "vetur.format.defaultFormatter.ts": "prettier-tslint"
 }

src/plugins/user/components/settings/RoleSettings.vue

@@ -1,11 +1,10 @@
 <template>
   <div>
     <q-card class="col-12">
-      <q-form
-        @submit="save"
-        @reset="reset"
-      >
-        <q-card-section class="fit row justify-start content-center items-center">
+      <q-form @submit="save" @reset="reset">
+        <q-card-section
+          class="fit row justify-start content-center items-center"
+        >
           <span class="col-xs-12 col-sm-6 text-center text-h6">
             Rollen und Berechtigungen
           </span>
@@ -31,7 +30,7 @@
           v-if="role"
           class="fit row justify-start content-center items-center"
         >
-          <q-scroll-area style="height: 20em; width: 100%;">
+          <q-scroll-area style="height: 20em; width: 100%">
             <q-input
               filled
               v-model="newRoleName"
@@ -47,24 +46,10 @@
             />
           </q-scroll-area>
         </q-card-section>
-        <q-card-actions
-          v-if="role"
-          align="right"
-        >
-          <q-btn
-            label="Löschen"
-            color="negative"
-            @click="remove"
-          />
-          <q-btn
-            label="Reset"
-            type="reset"
-          />
-          <q-btn
-            color="primary"
-            type="submit"
-            label="Speichern"
-          />
+        <q-card-actions v-if="role" align="right">
+          <q-btn label="Löschen" color="negative" @click="remove" />
+          <q-btn label="Reset" type="reset" />
+          <q-btn color="primary" type="submit" label="Speichern" />
         </q-card-actions>
       </q-form>
     </q-card>