snippets vscode 配置_重装VS Code推荐的必备插件

为了使文章方便阅读，插件的具体使用 gif 图就不贴出来了，感觉图太多不方便浏览，大家可以点击插件名称跳转后查看插件的具体使用。

下面给大家介绍一些前端的常用的 VS Code 扩展插件（提示：点击插件名称跳转）。

字体

• Fira Code：带编程连体字的等宽字体。
• Cascadia Code：微软为程序员专门打造了一款新的免费开源编程字体（目前在用）。

界面主题

• One Dark Pro：Atom 编辑器中流行的 One Dark 主题

图标主题

文件和文件夹图标，可以很容易地让你知道代码文件的类型。

• vscode-icons
• Material Icon Theme

自动补全

• Auto Close Tag：自动闭合标记。
• Auto Rename Tag：自动重命名标记。
• Auto Complete Tag：结合自动重命名和自动闭合标记的功能。
• Path Intellisense：可自动填充文件名。

代码格式化

• Beautify：语法高亮显示，根据内容设置缩进、换行和其他细节。
• Prettier：一个代码格式化工具。

代码检查

• ESLint：检查js语法规范。

代码片段

很多框架和类库都有代码片段插件，对应名称+Snippets 搜索即可，如：Javascript，React，Redux，Angular，Vue，Jest等框架和类库。

Git增强

• GitLens：它包含了许多强大的功能，例如通过跟踪代码显示的代码作者，提交搜索，历史记录和GitLens资源管理器。
• Git History：方便查看 Git 提交历史。

其它推荐

• Debugger for Chrome：在代码、watches 和控制台中设置断点，对代码进行调试。
• Code Runner：可以在编辑器里直接运行代码，查看结果。支持多种语言，如C，C ++，Java，JavaScript，PHP，Python，Perl，Perl 6等。
• Open-In-Browser：选择浏览器打开预览 HTML 文件。
• React Native Tools：React Native Tools是必不可少的扩展。
• Bracket Pair Colorizer 2：可以对匹配括号的对代码着色，可以非常直观地确定函数的开始和结束位置。
• Indent-Rainbow：为每个缩进层级用四种不同颜色交替着色。
• Todo Highlighter：TODO 高亮，以鲜艳的颜色突显 TODO、FIXME 或其它自定义的注释，还支持搜索 TODO 等。
• REST Client：完成与 Postman 一样的功能，发送 HTTP 请求并查看响应。
• Project Manager：项目管理工具。
• Indenticator：在视觉上突出显示当前的缩进深度，可以轻松区分在不同层次缩进的各种代码块。
• Live Server：一个具有静一个具有静态和动态页面的实时重新加载功能的本地开发服务器。
• Bookmarks：它可以帮助您在代码中导航，轻松快速地在重要位置之间移动。不再需要搜索代码。它还支持一组选择命令，允许您选择书签线和书签线之间的区域。它对日志文件分析非常有用。
• Settings Sync：允许您在 Gist 中保存用户设置，扩展名和快捷键绑定，以便您在不同电脑上同步 VSCode 配置。
• Change Case：可以方便改变变量的命名方式，如 fooBar=>foo_bar。
• Color Info：鼠标悬停在颜色上可以查看多种颜色格式。

好了，暂时先推荐这些，有补充的同学可以在评论区留言哈~