diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1c8ac1f0539..f35ca2046c6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -24,5 +24,8 @@
   },
   "[javascript]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "johnsoncodehk.volar"
   }
 }
\ No newline at end of file
diff --git a/test/jest/.eslintrc.js b/test/jest/.eslintrc.js
index 04ab3714ae4..63871dd008e 100644
--- a/test/jest/.eslintrc.js
+++ b/test/jest/.eslintrc.js
@@ -1,10 +1,10 @@
 module.exports = {
-  extends: [
-    // Removes 'no-undef' lint errors for Jest global functions (`describe`, `it`, etc),
-    //  add Jest-specific lint rules and Jest plugin
-    // See https://github.com/jest-community/eslint-plugin-jest#recommended
-    'plugin:jest/recommended',
-    // Uncomment following line to apply style rules
-    // 'plugin:jest/style',
-  ],
+    extends: [
+        // Removes 'no-undef' lint errors for Jest global functions (`describe`, `it`, etc),
+        //  add Jest-specific lint rules and Jest plugin
+        // See https://github.com/jest-community/eslint-plugin-jest#recommended
+        'plugin:jest/recommended',
+        // Uncomment following line to apply style rules
+        // 'plugin:jest/style',
+    ],
 };
diff --git a/test/jest/__tests__/MyButton.spec.ts b/test/jest/__tests__/MyButton.spec.ts
index af977ea62af..a7f2fbba275 100644
--- a/test/jest/__tests__/MyButton.spec.ts
+++ b/test/jest/__tests__/MyButton.spec.ts
@@ -8,34 +8,34 @@ import MyButton from './demo/MyButton';
 installQuasarPlugin();
 
 describe('MyButton', () => {
-  it('has increment method', () => {
-    const wrapper = mount(MyButton);
-    const { vm } = wrapper;
+    it('has increment method', () => {
+        const wrapper = mount(MyButton);
+        const { vm } = wrapper;
 
-    expect(typeof vm.increment).toBe('function');
-  });
+        expect(typeof vm.increment).toBe('function');
+    });
 
-  it('can check the inner text content', () => {
-    const wrapper = mount(MyButton);
-    const { vm } = wrapper;
+    it('can check the inner text content', () => {
+        const wrapper = mount(MyButton);
+        const { vm } = wrapper;
 
-    expect((vm.$el as HTMLElement).textContent).toContain('rocket muffin');
-    expect(wrapper.find('.content').text()).toContain('rocket muffin');
-  });
+        expect((vm.$el as HTMLElement).textContent).toContain('rocket muffin');
+        expect(wrapper.find('.content').text()).toContain('rocket muffin');
+    });
 
-  it('sets the correct default data', () => {
-    const wrapper = mount(MyButton);
-    const { vm } = wrapper;
+    it('sets the correct default data', () => {
+        const wrapper = mount(MyButton);
+        const { vm } = wrapper;
 
-    expect(typeof vm.counter).toBe('number');
-    expect(vm.counter).toBe(0);
-  });
+        expect(typeof vm.counter).toBe('number');
+        expect(vm.counter).toBe(0);
+    });
 
-  it('correctly updates counter when button is pressed', async () => {
-    const wrapper = shallowMount(MyButton);
-    const { vm } = wrapper;
-    const button = wrapper.findComponent(QBtn);
-    await button.trigger('click');
-    expect(vm.counter).toBe(1);
-  });
+    it('correctly updates counter when button is pressed', async () => {
+        const wrapper = shallowMount(MyButton);
+        const { vm } = wrapper;
+        const button = wrapper.findComponent(QBtn);
+        await button.trigger('click');
+        expect(vm.counter).toBe(1);
+    });
 });
diff --git a/test/jest/__tests__/MyDialog.spec.js b/test/jest/__tests__/MyDialog.spec.js
index fd8f877b6c6..6afbf2b6c40 100644
--- a/test/jest/__tests__/MyDialog.spec.js
+++ b/test/jest/__tests__/MyDialog.spec.js
@@ -6,13 +6,13 @@ import MyDialog from './demo/MyDialog';
 installQuasarPlugin();
 
 describe('MyDialog', () => {
-  it('should mount MyDialog', () => {
-    const wrapper = mount(MyDialog, {
-      data: () => ({
-        isDialogOpen: true,
-      }),
-    });
+    it('should mount MyDialog', () => {
+        const wrapper = mount(MyDialog, {
+            data: () => ({
+                isDialogOpen: true,
+            }),
+        });
 
-    expect(wrapper.exists()).toBe(true);
-  });
+        expect(wrapper.exists()).toBe(true);
+    });
 });
diff --git a/test/jest/__tests__/demo/MyButton.ts b/test/jest/__tests__/demo/MyButton.ts
index f08c4c34c1f..1af51575b3d 100644
--- a/test/jest/__tests__/demo/MyButton.ts
+++ b/test/jest/__tests__/demo/MyButton.ts
@@ -1,20 +1,20 @@
 import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
-  name: 'MyButton',
-  props: {
-    incrementStep: {
-      type: Number,
-      default: 1,
+    name: 'MyButton',
+    props: {
+        incrementStep: {
+            type: Number,
+            default: 1,
+        },
     },
-  },
-  setup(props) {
-    const counter = ref(0);
-    const input = ref('rocket muffin');
-    function increment() {
-      counter.value += props.incrementStep;
-    }
+    setup(props) {
+        const counter = ref(0);
+        const input = ref('rocket muffin');
+        function increment() {
+            counter.value += props.incrementStep;
+        }
 
-    return { counter, input, increment };
-  },
+        return { counter, input, increment };
+    },
 });
diff --git a/test/jest/__tests__/demo/MyButton.vue b/test/jest/__tests__/demo/MyButton.vue
index 7be3c9f6d69..6f435bb5324 100644
--- a/test/jest/__tests__/demo/MyButton.vue
+++ b/test/jest/__tests__/demo/MyButton.vue
@@ -1,9 +1,9 @@
 <script lang="ts" src="./MyButton.ts"></script>
 
 <template>
-  <div>
-    <p class="content">{{ input }}</p>
-    <span>{{ counter }}</span>
-    <q-btn class="button" @click="increment()"></q-btn>
-  </div>
+    <div>
+        <p class="content">{{ input }}</p>
+        <span>{{ counter }}</span>
+        <q-btn class="button" @click="increment()"></q-btn>
+    </div>
 </template>
diff --git a/test/jest/__tests__/demo/MyDialog.ts b/test/jest/__tests__/demo/MyDialog.ts
index da7bd7d8d4c..4a6e2d3eab9 100644
--- a/test/jest/__tests__/demo/MyDialog.ts
+++ b/test/jest/__tests__/demo/MyDialog.ts
@@ -1,10 +1,10 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'MyDialog',
-  data() {
-    return {
-      isDialogOpen: false,
-    };
-  },
+    name: 'MyDialog',
+    data() {
+        return {
+            isDialogOpen: false,
+        };
+    },
 });
diff --git a/test/jest/__tests__/demo/MyDialog.vue b/test/jest/__tests__/demo/MyDialog.vue
index f6ff283aa21..10afdb220e9 100644
--- a/test/jest/__tests__/demo/MyDialog.vue
+++ b/test/jest/__tests__/demo/MyDialog.vue
@@ -1,9 +1,9 @@
 <script lang="ts" src="./MyDialog.ts"></script>
 
 <template>
-  <q-dialog v-model="isDialogOpen">
-    <q-card>
-      <q-card-section>Custom dialog which should be tested</q-card-section>
-    </q-card>
-  </q-dialog>
+    <q-dialog v-model="isDialogOpen">
+        <q-card>
+            <q-card-section>Custom dialog which should be tested</q-card-section>
+        </q-card>
+    </q-dialog>
 </template>