1.Live Server

Live Server 插件是一个用于前端开发的扩展，它的主要作用是提供一个本地开发服务器，以便实时预览和调试网页应用程序。其最大特点在于热重载，即开发者可实时预览代码效果。 因为Live Server 允许开发者在浏览器中实时预览您正在编辑的网页。每当保存HTML、CSS、JavaScript文件时，该插件会自动刷新浏览器，以便开发者可以立即看到页面的更改效果

2.Auto Close Tag

该插件帮助我们输入标签的时候，自动结束标签。通常想要使用一个特定的 HTML 元素时，需要手动输入开始标签和结束标签。而当使用该插件后，只需要输入开始标签，它就会自动添加结束标签。此外，对于 Vue 开发者来说，它还支持自定义类型名称。当输入自定义组件的开始标签时，它会自动添加结束标签。

3.Auto Rename Tag

该插件帮助我们在重命名一个标签时，自动重命名 HTML 标签的开始和结束标签。避免只修改了开始标签，而忘记修改结束标签。该扩展适用于 HTML、XML、PHP 和 JavaScript。

4.Vue Language Features (Volar)

该插件可以让Vue代码获得漂亮的语法高亮显示、错误检查和代码格式化。并且它还会对很多 Vue 指令和事件处理程序，进行提示和建议。

5.ESLint

用于代码规范的检查，这个插件使得开发者可以在编写代码的过程中即时发现和修正错误，极大地提高了编程效率和代码质量

6.Prettier - Code formatter

这是一个代码格式化工具，它可以帮助开发者以统一的方式格式化，从而极大地提高了代码的可读性和可维护性,同时可以在vscode settings.json 下面配置格式化规范从而实现保存按照eslint以及代码规范自动格式化，以下是目前配置好的一个自动保存eslint格式化的settings.json

{ "editor.tabSize": 2, "editor.guides.bracketPairs": "active", "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复 "prettier.eslintIntegration": true, //使用单引号替代双引号 "javascript.format.insertSpaceBeforeFunctionParenthesis": false, //让函数(名)和后面的括号之间加个空格 "vetur.format.defaultFormatter.html": "js-beautify-html", //格式化.vue中html "vetur.format.defaultFormatter.js": "vscode-typescript", //让vue中的js按编辑器自带的ts格式进行格式化 "vetur.format.defaultFormatterOptions": { "wrap_attributes": "force-expand-multiline", // 对属性进行换行 wrap_attributes // - auto: 仅在超出行长度时才对属性进行换行。 // - force: 对除第一个属性外的其他每个属性进行换行。 // - force-aligned: 对除第一个属性外的其他每个属性进行换行，并保持对齐。 // - force-expand-multiline: 对每个属性进行换行。 // - aligned-multiple: 当超出折行长度时，将属性进行垂直对齐。 "js-beautify-html": { "wrap_attributes": "force-expand-multiline", "wrap_line_length": 120, "semi": false, "singleQuote": true, "end_with_newline": false } }, "eslint.validate": [ //开启对.vue文件中错误的检查 "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": true } ], "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "files.associations": { "*.cjson": "jsonc", "*.wxss": "css", "*.wxs": "javascript" }, "emmet.includeLanguages": { "wxml": "html" }, "minapp-vscode.disableAutoConfig": true, "[vue]": { "editor.defaultFormatter": "octref.vetur" }, "prettier.jsxSingleQuote": true, "prettier.singleQuote": true, // 使用单引号 "prettier.semi": false, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" }, "cssrem.rootFontSize": 100, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "workbench.startupEditor": "newUntitledFile", "gitlens.hovers.currentLine.over": "line", "security.workspace.trust.untrustedFiles": "open", "git.confirmSync": false, "[scss]": { "editor.defaultFormatter": "vscode.css-language-features" }, "git.suggestSmartCommit": false, "workbench.editorAssociations": { "*.dll": "default" }, "editor.formatOnSave": true}

7.GitLens — Git supercharged

GitLens Git supercharged 能够通过Git进行代码注释，让你更好地理解代码的历史和来源。比较方便的是，它可以直观的看到某行代码的最后修改人，以及日期和提交记录等。

8.Image preview

Image preview是一个支持实时预览图片的插件。当你的鼠标"hover"在有图像路径的代码行上，该插件就会显示一个预览窗口，直接显示图像。该插件支持各种常见的图像格式，如JPG、JPEG、PNG、BMP、GIF和SVG等。

9.Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 提供了对 Tailwind CSS 的智能提示和自动补全功能，可以帮助开发者更快地编写 CSS 样式代码，减少输入错误和提高工作效率。

10.Path Intellisense

Path Intellisense 提供了路径自动补全功能，可以帮助开发者更快地输入文件路径和文件名，减少输入错误和提高工作效率