diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 00000000..d887751d
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,33 @@
+{
+  "recommendations": [
+		"formulahendry.auto-close-tag",
+		"formulahendry.auto-complete-tag",
+		"steoates.autoimport",
+		"formulahendry.auto-rename-tag",
+		"coenraads.bracket-pair-colorizer",
+		"pranaygp.vscode-css-peek",
+		"mikestead.dotenv",
+		"editorconfig.editorconfig",
+		"dsznajder.es7-react-js-snippets",
+		"dbaeumer.vscode-eslint",
+		"miguelsolorio.fluent-icons",
+		"mhutchie.git-graph",
+		"donjayamanne.githistory",
+		"eamodio.gitlens",
+		"lokalise.i18n-ally",
+		"afzalsayed96.icones",
+		"antfu.iconify",
+		"kisstkondoros.vscode-gutter-preview",
+		"xabikos.javascriptsnippets",
+		"whtouche.vscode-js-console-utils",
+		"ritwickdey.liveserver",
+		"yzhang.markdown-all-in-one",
+		"pkief.material-icon-theme",
+		"zhuangtongfa.material-theme",
+		"christian-kohler.path-intellisense",
+		"esbenp.prettier-vscode",
+		"johnsoncodehk.volar",
+		"dariofuzinato.vue-peek",
+		"voorjaar.windicss-intellisense"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..af5b5325
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,63 @@
+{
+	"editor.quickSuggestions": {
+			"strings": true
+	},
+	"workbench.iconTheme": "material-icon-theme",
+	"workbench.colorTheme": "One Dark Pro",
+	"editor.fontSize": 15,
+	"editor.tabSize": 2,
+	"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
+	"editor.fontLigatures": true,
+	"editor.codeActionsOnSave": {
+			"source.fixAll.eslint": true
+	},
+	"git.enableSmartCommit": true,
+	"path-intellisense.mappings": {
+			"@": "${workspaceFolder}/src",
+			"~@": "${workspaceFolder}/src",
+	},
+	"gutterpreview.paths": {
+			"@": "/src",
+			"~@": "/src"
+	},
+	"terminal.integrated.cursorStyle": "line",
+	"files.associations": {
+			"*.env.*": "dotenv"
+	},
+	"[jsonc]": {
+			"editor.defaultFormatter": "vscode.json-language-features"
+	},
+	"[json]": {
+			"editor.defaultFormatter": "vscode.json-language-features"
+	},
+	"[javascript]": {
+			"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"javascript.updateImportsOnFileMove.enabled": "always",
+	"[javascriptreact]": {
+			"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"terminal.integrated.fontSize": 14,
+	"terminal.integrated.fontFamily": "Fira Code",
+	"terminal.integrated.fontWeight": 500,
+	"i18n-ally.displayLanguage": "zh",
+	"[html]": {
+			"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[typescript]": {
+			"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[vue]": {
+			"editor.defaultFormatter": "johnsoncodehk.volar"
+	},
+	"terminal.integrated.tabs.enabled": false,
+	"[typescriptreact]": {
+			"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[markdown]": {
+			"editor.defaultFormatter": "yzhang.markdown-all-in-one"
+	},
+	"volar.tsPlugin": true,
+	"volar.tsPluginStatus": true,
+	"workbench.productIconTheme": "fluent-icons",
+}