diff --git a/.prettierrc.json b/.prettierrc.json
index 66e23359..e2798588 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -4,5 +4,6 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "none"
-}
\ No newline at end of file
+  "trailingComma": "none",
+  "singleAttributePerLine": true
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..1f477646
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
\ No newline at end of file
diff --git a/docs/.vitepress/components/demos/Torch.vue b/docs/.vitepress/components/demos/Torch.vue
index 54de0d4f..e16b6276 100644
--- a/docs/.vitepress/components/demos/Torch.vue
+++ b/docs/.vitepress/components/demos/Torch.vue
@@ -3,24 +3,39 @@
     <p>
       Pick camera:
       <select v-model="selected">
-        <option v-for="device in devices" :key="device.label" :value="device">
+        <option
+          v-for="device in devices"
+          :key="device.label"
+          :value="device"
+        >
           {{ device.label }}
         </option>
       </select>
     </p>
 
-    <p v-if="torchNotSupported" class="error">Torch not supported for active camera</p>
+    <p
+      v-if="torchNotSupported"
+      class="error"
+    >
+      Torch not supported for active camera
+    </p>
 
-    <qrcode-stream 
-      :torch="torchActive" 
-      :constraints="{ deviceId: selected.deviceId }" 
-      v-if="selected !== null"       
+    <qrcode-stream
+      :torch="torchActive"
+      :constraints="{ deviceId: selected.deviceId }"
+      v-if="selected !== null"
       @error="console.error"
       @camera-on="onCameraOn"
       v-memo="[torchActive, selected.deviceId]"
     >
-      <button @click="torchActive = !torchActive" :disabled="torchNotSupported">
-        <img :src="withBase(icon)" alt="toggle torch" />
+      <button
+        @click="torchActive = !torchActive"
+        :disabled="torchNotSupported"
+      >
+        <img
+          :src="withBase(icon)"
+          alt="toggle torch"
+        />
       </button>
     </qrcode-stream>
   </div>
@@ -35,21 +50,22 @@ const selected = ref(null as MediaDeviceInfo | null)
 const devices = ref([] as MediaDeviceInfo[])
 
 onMounted(async () => {
-  devices.value = (await navigator.mediaDevices.enumerateDevices())
-    .filter(({ kind }) => kind === 'videoinput')
+  devices.value = (await navigator.mediaDevices.enumerateDevices()).filter(
+    ({ kind }) => kind === 'videoinput'
+  )
 
-	if (devices.value.length > 0) {
-		selected.value = devices.value[0]	
-	}
+  if (devices.value.length > 0) {
+    selected.value = devices.value[0]
+  }
 })
 
 const torchActive = ref(false)
 const torchNotSupported = ref(false)
 
 const icon = computed(() => {
-  if (torchActive.value) { 
+  if (torchActive.value) {
     return '/flash-off.svg'
-  } else { 
+  } else {
     return '/flash-on.svg'
   }
 })
@@ -59,7 +75,7 @@ function onCameraOn(capabilities) {
   torchNotSupported.value = !capabilities.torch
 }
 
-function onError(err) { 
+function onError(err) {
   console.error(err)
 }
 </script>