10.推荐vscode 前端常用插件

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 提供了路径自动补全功能，可以帮助开发者更快地输入文件路径和文件名，减少输入错误和提高工作效率