diff --git a/frontend/jsconfig.json b/frontend/jsconfig.json
new file mode 100644
index 000000000..b2c0e02ee
--- /dev/null
+++ b/frontend/jsconfig.json
@@ -0,0 +1,3 @@
+{
+  "include": ["./src/**/*"]
+}
diff --git a/frontend/package.json b/frontend/package.json
index 19ed57974..4deceb724 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -54,5 +54,11 @@
     "> 1%",
     "last 2 versions",
     "not dead"
-  ]
-}
+  ],
+  "prettier": {
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": false
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 132fe276b..98c56b8ca 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -34,11 +34,11 @@
 </template>
 
 <script>
-import Menu from "./components/UI/Menu";
-import SearchBar from "./components/UI/SearchBar";
-import AddRecipeFab from "./components/UI/AddRecipeFab";
-import SnackBar from "./components/UI/SnackBar";
-import Vuetify from "./plugins/vuetify";
+import Menu from "./components/UI/Menu"
+import SearchBar from "./components/UI/SearchBar"
+import AddRecipeFab from "./components/UI/AddRecipeFab"
+import SnackBar from "./components/UI/SnackBar"
+import Vuetify from "./plugins/vuetify"
 export default {
   name: "App",
 
@@ -51,15 +51,15 @@ export default {
 
   watch: {
     $route() {
-      this.search = false;
+      this.search = false
     },
   },
 
   mounted() {
-    this.$store.dispatch("initTheme");
-    this.$store.dispatch("requestRecentRecipes");
-    this.darkModeSystemCheck();
-    this.darkModeAddEventListener();
+    this.$store.dispatch("initTheme")
+    this.$store.dispatch("requestRecentRecipes")
+    this.darkModeSystemCheck()
+    this.darkModeAddEventListener()
   },
 
   data: () => ({
@@ -73,30 +73,30 @@ export default {
       if (this.$store.getters.getDarkMode === "system")
         Vuetify.framework.theme.dark = window.matchMedia(
           "(prefers-color-scheme: dark)"
-        ).matches;
+        ).matches
     },
     /**
      * This will monitor the OS level darkmode and call to update dark mode.
      */
     darkModeAddEventListener() {
-      const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
       darkMediaQuery.addEventListener("change", () => {
-        this.darkModeSystemCheck();
-      });
+        this.darkModeSystemCheck()
+      })
     },
 
     toggleSearch() {
       if (this.search === true) {
-        this.search = false;
+        this.search = false
       } else {
-        this.search = true;
+        this.search = true
       }
     },
     navigateFromSearch(slug) {
-      this.$router.push(`/recipe/${slug}`);
+      this.$router.push(`/recipe/${slug}`)
     },
   },
-};
+}
 </script>
 
 <style>
diff --git a/frontend/src/components/MealPlan/MealPlanEditor.vue b/frontend/src/components/MealPlan/MealPlanEditor.vue
index 40df06270..01b5ef086 100644
--- a/frontend/src/components/MealPlan/MealPlanEditor.vue
+++ b/frontend/src/components/MealPlan/MealPlanEditor.vue
@@ -1,13 +1,17 @@
 <template>
   <v-card>
-    <v-card-title class="headline"> {{$t('meal-plan.edit-meal-plan')}} </v-card-title>
+    <v-card-title class="headline">
+      {{ $t("meal-plan.edit-meal-plan") }}
+    </v-card-title>
     <v-divider></v-divider>
 
     <v-card-text>
       <MealPlanCard v-model="mealPlan.meals" />
       <v-row align="center" justify="end">
         <v-card-actions>
-          <v-btn color="success" text @click="update"> {{$t('general.update')}} </v-btn>
+          <v-btn color="success" text @click="update">
+            {{ $t("general.update") }}
+          </v-btn>
           <v-spacer></v-spacer>
         </v-card-actions>
       </v-row>
diff --git a/frontend/src/components/MealPlan/MealPlanNew.vue b/frontend/src/components/MealPlan/MealPlanNew.vue
index 65f288200..fed8f0cee 100644
--- a/frontend/src/components/MealPlan/MealPlanNew.vue
+++ b/frontend/src/components/MealPlan/MealPlanNew.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card>
     <v-card-title class="headline">
-      {{$t('meal-plan.create-a-new-meal-plan')}}
+      {{ $t("meal-plan.create-a-new-meal-plan") }}
     </v-card-title>
     <v-divider></v-divider>
     <v-card-text>
@@ -71,9 +71,11 @@
     <v-row align="center" justify="end">
       <v-card-actions>
         <v-btn color="success" @click="random" v-if="meals[1]" text>
-          {{$t('general.random')}}
+          {{ $t("general.random") }}
+        </v-btn>
+        <v-btn color="success" @click="save" text>
+          {{ $t("general.save") }}
         </v-btn>
-        <v-btn color="success" @click="save" text> {{$t('general.save')}} </v-btn>
 
         <v-spacer></v-spacer>
         <v-btn icon @click="show = !show"> </v-btn>
diff --git a/frontend/vetur.config.js b/frontend/vetur.config.js
new file mode 100644
index 000000000..410ba2c75
--- /dev/null
+++ b/frontend/vetur.config.js
@@ -0,0 +1,36 @@
+// vetur.config.js
+/** @type {import('vls').VeturConfig} */
+module.exports = {
+  // **optional** default: `{}`
+  // override vscode settings part
+  // Notice: It only affects the settings used by Vetur.
+  settings: {
+    "vetur.useWorkspaceDependencies": true,
+    "vetur.experimental.templateInterpolationService": true,
+  },
+  // **optional** default: `[{ root: './' }]`
+  // support monorepos
+  projects: [
+    {
+      // **required**
+      // Where is your project?
+      // It is relative to `vetur.config.js`.
+      root: "./frontend",
+      // **optional** default: `'package.json'`
+      // Where is `package.json` in the project?
+      // We use it to determine the version of vue.
+      // It is relative to root property.
+      package: "package.json",
+      // **optional**
+      // Where is TypeScript config file in the project?
+      // It is relative to root property.
+      // Where is vetur custom snippets folders?
+      // **optional** default: `[]`
+      // Register globally Vue component glob.
+      // If you set it, you can get completion by that components.
+      // It is relative to root property.
+      // Notice: It won't actually do it. You need to use `require.context` or `Vue.component`
+      globalComponents: ["./src/components/**/*.vue"],
+    },
+  ],
+};