refactor UserSearchBar, js formatting

.vscode/settings.json

@@ -1,28 +1,49 @@
 {
-    "editor.formatOnSave": true,
-    "workbench.editor.titleScrollbarSizing": "large",
-    "window.title": "${activeEditorMedium}${separator}${rootName}${separator}${profileName}",
-    "workbench.preferredDarkColorTheme": "Spinel",
-    "workbench.preferredLightColorTheme": "Spinel Light",
-    "rubyLsp.formatter": "syntax_tree",
-    "[ruby]": {
-        "editor.defaultFormatter": "Shopify.ruby-lsp"
-    },
-    "[erb]": {
-        "editor.defaultFormatter": "aliariff.vscode-erb-beautify"
-    },
-    "tailwindCSS.includeLanguages": {
-        "erb": "html",
-        "typescript": "javascript"
-    },
-    "tailwindCSS.experimental.classRegex": [
-        "\\bclass:\\s*'([^']*)'",
-        "\\bclass:\\s*\"([^\"]*)\""
-    ],
-    "editor.quickSuggestions": {
-        "other": "on",
-        "comments": "off",
-        "strings": "on"
-    },
-    "sqliteViewer.maxFileSize": 4000
-}
+  "editor.formatOnSave": true,
+  "workbench.editor.titleScrollbarSizing": "large",
+  "window.title": "${activeEditorMedium}${separator}${rootName}${separator}${profileName}",
+  "workbench.preferredDarkColorTheme": "Spinel",
+  "workbench.preferredLightColorTheme": "Spinel Light",
+  "rubyLsp.formatter": "syntax_tree",
+  "[ruby]": {
+    "editor.defaultFormatter": "Shopify.ruby-lsp"
+  },
+  "[erb]": {
+    "editor.defaultFormatter": "aliariff.vscode-erb-beautify"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "tailwindCSS.includeLanguages": {
+    "erb": "html",
+    "typescript": "javascript"
+  },
+  "tailwindCSS.experimental.classRegex": [
+    "\\bclass:\\s*'([^']*)'",
+    "\\bclass:\\s*\"([^\"]*)\"",
+    "[\"'`]([^\"'`]*).*?,?\\s?"
+  ],
+  "editor.quickSuggestions": {
+    "other": "on",
+    "comments": "off",
+    "strings": "on"
+  },
+  "tailwindCSS.experimental.configFile": "config/tailwind.config.js",
+  "sqliteViewer.maxFileSize": 4000,
+  "files.insertFinalNewline": true
+}