diff --git a/.gitignore b/.gitignore
index 9737f1231509..17b544c1d7e2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,5 @@
 .gradle
 .idea
-.vscode
 *.iml
 *.swp
 build
@@ -13,7 +12,6 @@ data
 .settings
 **/gmon.out
 static_checker_reports/
-.vscode
 
 # Logs
 acceptance_tests_logs/
diff --git a/.vscode/frontend.code-workspace b/.vscode/frontend.code-workspace
new file mode 100644
index 000000000000..8ec2e7d144b2
--- /dev/null
+++ b/.vscode/frontend.code-workspace
@@ -0,0 +1,54 @@
+{
+  "folders": [
+    {
+      "path": "../airbyte-webapp"
+    },
+    {
+      "path": "../airbyte-webapp-e2e-tests"
+    }
+  ],
+  "extensions": {
+    "recommendations": [
+      "dbaeumer.vscode-eslint",
+      "esbenp.prettier-vscode",
+      "ms-vsliveshare.vsliveshare",
+      "eamodio.gitlens"
+    ]
+  },
+  "settings": {
+    "javascript.preferences.quoteStyle": "double",
+    "typescript.preferences.quoteStyle": "double",
+    "javascript.preferences.importModuleSpecifier": "shortest",
+    "typescript.preferences.importModuleSpecifier": "shortest",
+    "javascript.updateImportsOnFileMove.enabled": "always",
+    "typescript.updateImportsOnFileMove.enabled": "always",
+    "editor.detectIndentation": true,
+    "eslint.format.enable": true,
+    "eslint.run": "onType",
+    "[javascript]": {
+      "editor.formatOnSave": true,
+      "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+      "editor.codeActionsOnSave": {
+        "source.organizeImports": false
+      }
+    },
+    "[typescript]": {
+      "editor.formatOnSave": true,
+      "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+      "editor.codeActionsOnSave": {
+        "source.organizeImports": false
+      }
+    },
+    "[typescriptreact]": {
+      "editor.formatOnSave": true,
+      "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+      "editor.codeActionsOnSave": {
+        "source.organizeImports": false
+      }
+    },
+    "[json]": {
+      "editor.formatOnSave": true,
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    }
+  }
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000000..f033cb881e89
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,36 @@
+{
+  "javascript.preferences.quoteStyle": "double",
+  "typescript.preferences.quoteStyle": "double",
+  "javascript.preferences.importModuleSpecifier": "shortest",
+  "typescript.preferences.importModuleSpecifier": "shortest",
+  "javascript.updateImportsOnFileMove.enabled": "always",
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "editor.detectIndentation": true,
+  "eslint.format.enable": true,
+  "eslint.run": "onType",
+  "[javascript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": false
+    }
+  },
+  "[typescript]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": false
+    }
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.codeActionsOnSave": {
+      "source.organizeImports": false
+    }
+  },
+  "[json]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}