diff --git a/packages/frontend/.vscode/settings.json b/packages/frontend/.vscode/settings.json
new file mode 100644
index 00000000..3566c26b
--- /dev/null
+++ b/packages/frontend/.vscode/settings.json
@@ -0,0 +1,39 @@
+{
+  // eslint extension options
+  "eslint.enable": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "css.customData": [".vscode/tailwind.json"],
+  // prettier extension setting
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.rulers": [80],
+  "editor.codeActionsOnSave": [
+    "source.addMissingImports",
+    "source.fixAll",
+    "source.organizeImports"
+  ],
+  // Show in vscode "Problems" tab when there are errors
+  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
+  // Use absolute import for typescript files
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  // IntelliSense for taiwind variants
+  "tailwindCSS.experimental.classRegex": [
+    ["tv\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
+}