前言。

姐妹篇：
[利器]35+chrome插件选择#xff0c;含15+前端插件󿀌总有一个值得你停留。

关于关于。 【前端工具系列】。：
有句话，事半功倍#xff0c;一定是借助了一些思想和工具。

VSCode是我们前端开发的武器，本文40+精选插件󿀌让它更锋利󿀌#xff01不可摧！！

谢谢你在评论区的反馈，补充两个很棒的插件。

• Tabnine AI 代码完成插入。
• Trailing Spaces 删除尾部空间的插件。

另外两款也不错，但不太推荐。

• rong-notes 添加注释󿀌下载相对较小，2019年1月，最终维护日期，不推荐。
• ClassTree 根据jsx󿀌快速生成dom结构 jsx/vue class结构。还是比较有创意的，下载量太小。

必备的。

我就不说下面这些必要的了。

1. 代码段。

• JavaScript (ES6) code snippets， ES7 React/Redux/GraphQL/React-Native snippets。
• vue, vetur, Vue 3 Snippets。， Vue VSCode Snippets。
  代码段这个东西，您还可以自定义，可以参见。 VSCode创建自定义代码段。

1. 代码检查和格式化。

• ESLint, Prettier - Code formatter, Beautify。

1. 其他。

• open in browser。

由于VSCode自身功能的增强，NPM-Scripts, Change 不需要专门安装Case等插件。

接下来，更精彩的是#xff01;！！， 全程高能动图󿀌请不要分神！

实用高效的工具。

scode-js-debug 利器debug。

内置新版VSCode。

可用于调试Node.js、 Chrome、 Edge、 WebView2、 VS Code 扩展等等�替换。 Debugger for Chrome。插件。
还可以调试Service Worker, Web Worker, 功能异常强大。

以下演示，首先要配置好。launch.json。

Live Server 静态服务器。

本地开发服务器具有静态和动态页面的实时重载特性。

这也是我平时最喜欢的插件之一， 右键一键启动󿀌还支持热等�爽字了得。

Code Runner 代码运行器。

最喜欢的插件，没有之三。，平时写一些测试代码，以及一些逻辑库�快捷键。 Ctrl+Alt+M。, 喝口水，看看结果，悠哉。

一键操作多种语言操作代码片段或代码文件： c，c + + ，Java，JavaScript，PHP，Python，Perl，Perl 6，Ruby，Go，Lua，Groovy，PowerShell，BAT/CMD，BASH/SH，f # Script，f # (。NET 核心) ，c # 脚本，太多了，你想不起来。NET 核心) ，c # 脚本，太多了，你想不到。

Tabnine AI 代码完成插件。

感谢您在评论区的推荐。 这是人工智能代码完成工具，能够以更快的速度完成代码，错误较少， 支持各种语言，还具有记忆功能󿀌真的强大。
我用了，就爱了。

Trailing Spaces 删除尾部空间的插件。

高亮空间󿀌并提供一键删除。

Markdown Preview Enhanced 编辑和预览markdown。

typora？ 其实不需要，这个markdown插件，编辑markdonwn时，让您预览#xff0c;编程体验不比掘金差。

例如，如果需要更多的功能，例如，例如，如果需要更多的功能 TODO, 或同时修改多行等， Markdown All in One。这是个不错的选择。

下面演示一下常用的TODO便签。

Git History 和 GitLens Git历史记录。

谁移动了我的代码？直接在VSCode中，查看Git的历史，搜索，版本对比。 清爽！！

VSCode还内置了时间线功能，但能力还是比较弱。

Gitlens功能更强大c;无缝导航和浏览 Git 存储库。

Image Preview 图片预览。

CSS编写󿀌不再担心写错图片地址！
其支持在。html。和。css。在文件中󿼌使用图片路径时，在左边实现小预览器，一眼就知道对错。

JSON to TS json转为TS申报。

现在的前端，谁还没有写Typescript󿼌但是如何生成声明文件？ 手写，那你太out了。
这个插件，一键生成。

别人的技巧󿀌我在喝茶󿀌笑一个。

vscode-fileheader 和 koroFileHeader 生成文件备注。

某人某天写󿀌某人有一天更新󿀌来的时候留下足迹，一眼就能看穿#xff01;

如果你认为这些信息不够，koroFileHeader 提供更监督的注释， 还支持生成函数注释。

npm Intellisense 智能提示导入npm模块。

那么多npm模块󿀌记忆力差�头脑不快󿀌没关系，这个插件为你分担了烦恼。

Import Cost 依靠包的大小提示。

我们来这么多包󿀌你介绍的费用是多少？？ 早知道成本󿀌交给她，#xff01;

formate: CSS/LESS/SCSS formatter 美化css风格。

CSS格式功能内置于VSCode༌这个支持less， scss，高效美观�如您！

TODO Highlight 亮TODO。

突出显示代码 TODO、 FIXME 还有其他注释。

有时，在将代码发布到生产环境之前，您会忘记检查添加到编码中的内容 todo。

Add jsdoc comments 将JSDoc添加到方法中。

JSDoc添加到自动给方法中， 不要说我不会写注释， 负责我写的每一行代码！！！

DotENV env文件高亮。

今年，谁的配置还没有使用env文件，没有高亮，真丑，这是你的救星。

HTML Snippets html代码段。

该插件可快速输出html代码， 效率是懒惰的，你说得对吗？

Wrap Console Log Lite 输出变量快。

我们经常使用。console.log。输出变量检查执行情况c;这个插件，直接生成书代码，懒惰可以，懒到极致。

Quokka.js 变量结果直接显示。

不需要运行�您可以知道您的代码结果，没有人有这种编程体验，逻辑上多花点时间话费。

REST Client rest请求。

请求某个网站的接口，axios?, express? , No No No , 打开VS 直接发送code请求就好。

这个插件允许您直接发送 HTTP 请求并查看 visualstudio 代码中的响应。

Path Intellisense 引用路径智能提示。

vscode-faker 生成虚假数据。

谁还没有造假数据，就这么简单！xff01就这么简单&#;

Regex Previewer 边写正则边看结果。

写正则󿼌一边看结果󿀌这个调试真的很方便！！！

SVG Viewer SVG文件预览。

预览svg文件󿀌也可以到处成为图片󿀌利器！

Auto Close Tag 标签自动关闭。

自动添加 HTML/XML 关闭标记󿀌与 Visual Studio IDE 或 Sublime Text 相同。

Auto Rename Tag 重命名标签。

自动重命名成对 HTML/XML 标记，与 Visual Studio IDE 相同。

有时候我们总是写错，这样可以降低你犯错后的修复成本。

CSS Peek css定位器。

我的class在哪里定义࿰？c;找不到自己，怎样做࿰？c;请这个！！

Code Spell Checker 拼写检查。

妈妈再也不担心我写错单词了。 可以检查拼写错误，并给予提示，非常好的合作伙伴！

Color Picker 颜色选择器。

那种颜色好看，别担心，调出色板󿀌慢慢选择吧。

Sort Typescript imports 自动排序import。

导入过多的库，眼花撩顺󿀌这个插件使它们有序地排列󿀌 福星，强迫症患者。我记得eslint似乎也有类似的规则。

Bracket Pair Colorizer 2 括号对齐利器。

代码太多，太多的大括号，不知道谁是谁，这个插件给你明示。

vscode-icon 文件图标。

让 vscode 资源树目录加图标，赏心悦目，#xff0101;

npm npm扩展。

这种扩展支持运行 package.json 文件中定义的 npm 脚本，并根据 package.json 中定义的依赖项。验证已安装的模块。是不是很酷？#xff0101;

Project Manager 项目管理利器。

它可以帮助你轻松访问你的项目，不管它们在哪里。不要错过那些重要的项目。。

Live Sass Compiler SASS实时编译。

一个 VSCode 扩展，它可以帮助你实时 SASS/SCSS 文件的编译/传输 CSS ࿰在文件中c;并实时重新加载浏览器。

Todo Tree TODO展示。

用树形结构列出你的TODO事项，永远不要担心忘记点什么。

Markdown PDF 转动markdownPDF。

markdown完成文章，顺便生成pdf， 真的是6啊。

写在最后。

如果你认为它很好，#xff00c;你的赞美和评论是我前进的最大动力。

请到技术交流小组 这里来。
或者添加我的微信 dirge-cloud，一起学习。

引用。

选择！15 个必备的 VSCode 插件（前端类）xff0;
VSCode扩展推荐（#xfff09前端开发;
VSCode前端必备插件，也许你不知道如何使用？
marketplace.visualstudio。

分享让更多人看到