推荐13款常用的Vscode插件，提高前端日常开发效率 点击小卡片参与粉丝专属福利?思考，输出，沉淀。用通俗的语言陈述技术，让自己和他人都有所收获。 作者：毅航?? ?1. Live Serverimage.pngLive Server 插件是一个用于前端开发的扩展，它的主要作用是提供一个本地开发服务器，以便实时预览和调试网页应用程序。「其最大特点在于热重载，即开发者可实时预览代码效果。」 因为Live Server允许开发者在浏览器中实时预览您正在编辑的网页。每当保存HTML、CSS、JavaScript文件时，该插件会自动刷新浏览器，以便开发者可以立即看到页面的更改效果。 2. TODO Highlightsimage.pngTODO Highlights插件是一个用于帮助开发人员识别和管理代码中的待办事项的工具。该插件的主要作用是提供代码中注释中包含的待办事项的可视化标记，以便开发者更容易定位、跟踪和处理这些任务。 当使用todo或fixme标签后，可按下快捷键f1，然后选择all或者todo即可查看当前项目中声明的标签信息。 image.png3. Markdown Preview Github Stylingimage.pngMarkdown Preview Github Styling 的作用是改善和优化Markdown预览功能，使得开发者可以在VsCode 中实时预览.md文件的最终效果。除此外，其还具有如下特点： 预览实时更新：插件允许您在 VSCode 中编写Markdown文档，并实时预览渲染效果。每当您对文档进行更改并保存时，预览面板会自动更新，以便您可以立即查看您的编辑效果。提高可读性：通过应用GitHub 风格的样式，该插件可以使 Markdown 文档更易于阅读，特别是对于那些已经熟悉 GitHub的用户。这对于编写技术文档、文档说明、README 文件等非常有帮助。可配置性：插件允许您根据需要进行一些自定义配置，以适应不同的渲染需求。您可以根据自己的偏好设置不同的预览样式。总之，Markdown Preview Github Styling 插件通过在VSCode中提供GitHub风格的 Markdown预览，提高了Markdown编辑和协作的效率。 4. VsCode Iconimage.pngVSCode Icons 插件是Visual Studio Code中的一个扩展，其主要作用是为文件和文件夹添加图标，以增强编辑器的可视化效果和可识别性。其可以为不同的文件或文件件添加不同的图标，进而确保项目结构清晰，项目结构易于理解。具体效果如下： image.png5. TabnineTabnine 是一款强大的智能代码补全插件，可在Visual Studio Code（VSCode）中使用。其主要作用是提供高效和智能的代码建议，以加速代码编写和提高代码质量。具体来看，Tabnine 主要有如下功能： 「智能代码建议」：Tabnine使用机器学习和自然语言处理技术，分析您的代码并为您提供高质量的代码建议。这不仅包括常见的变量、函数和类名，还包括上下文感知的建议，可大大加速编码过程。「多语言支持」：Tabnine支持多种编程语言，包括但不限于 JavaScript、Python、Java、C++、Go等。这使得它适用于不同类型的项目和开发任务。「实时建议」：插件在您键入代码时实时提供建议，让您不必在每次需要时手动查找文档或库。这有助于减少拼写错误和代码语法问题。6. CodeSnapCodeSnap是Visual Studio Code（VSCode）中的一个插件，其允许开发者选择要捕捉的代码段，并将其转换为图像格式。这样， 开发者可以将代码示例分享给其他人，而不必以纯文本或代码文件的形式分享。 image.png7. CSS Peeimage.pngCSS Peek是Vs Code中的一个插件，它的主要作用是帮助开发人员更轻松地查找和导航CSS样式表中的类、ID、选择器和样式定义。 图片8. JavaScript Code Snippetsimage.pngJavaScript Code Snippets代码片段是一个 VS Code扩展，它提供了使用 ES6 语法进行 JavaScript开发的代码片段集合。 此扩展包括「循环、条件、函数等常见 JavaScript 概念的片段，以及箭头函数、模板文字和解构等」 ES6 特定功能。使用这些片段可以为开发人员节省大量时间，因为它无需手动为日常任务键入代码。 d9419d1a840bcdff6314d20b36d6a503.gif9. Prettier - Code formatterimage.pngPrettier是 VSCode中常用的代码格式化工具，Prettier插件的主要作用在于 「代码自动格式化」。Prettier插件可以自动格式化您的代码，包括 JavaScript、TypeScript、JSON、CSS、HTML 等多种编程语言。无需手动调整缩进、换行和其他格式设置，Prettier会自动为开发者处理。 10.Git Graphimage.pngGit Graph插件用于可视化查看存储库的 Git操作，并从图形中轻松执行Git操作。类似于SOurceTree的可视化版本控制插件，可以更新、提交代码，查看提交记录，审视代码。 image.png11. Vue Language Features (Volar)image.png该插件可以让Vue代码获得漂亮的语法高亮显示、错误检查和代码格式化。并且它还会对很多Vue 指令和事件处理程序，进行提示和建议。 image.png12. Auto Close Tagimage.png该插件帮助我们输入标签的时候，自动结束标签。通常想要使用一个特定的 HTML元素时，需要手动输入开始标签和结束标签。而当使用该插件后，只需要输入开始标签，它就会自动添加结束标签。此外，对于 Vue开发者来说，它还支持自定义类型名称。当输入自定义组件的开始标签时，它会自动添加结束标签。 13. Auto Rename Tag该插件帮助我们在重命名一个标签时，自动重命名 HTML标签的开始和结束标签。避免只修改了开始标签，而忘记修改结束标签。该扩展适用于 HTML、XML、PHP 和 JavaScript。 image.png 如果文章对你有帮助的话欢迎「关注+点赞+收藏」 阅读原文