Vscode前端精品插件

3,619 阅读4分钟
插件描述
Settings Sync最好用的插件,没有之一,一台电脑配置好之后,其它的几台电脑都不用配置。新机器登录一下就搞定了。再也不用折腾环境了,使用GitHub Gist同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展。
BeautifyBeautify 插件可以快速格式化你的代码格式,让你在编写代码时杂乱的代码结构瞬间变得非常规整,代码强迫症必备,较好的代码格式在后期维护以及他人阅读时都会有很多的便利。插件支持的语言非常多,基本堵盖了目前所有的语言,而且你还可以自定义代码格式化的结构。
Debugger for Chrome从VS Code调试在Google Chrome中运行的JavaScript代码。用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。
Auto Import自动查找、分析,然后提供代码补全,对于Typescript和TSX可以适用
Atuo Rename Tag修改 html 标签,自动帮你完成头部和尾部闭合标签的同步修改
Chinese (Simplified) Language Pack for Visual Studio Code中文(简体)语言包 将界面转换为中文
guides显示代码对齐辅助线,很好用
Path Intellisense自动填充文件名。
Todo Tree此扩展可以快速搜索(使用ripgrep)您的工作区以获取TODO和FIXME等注释标记,并在资源管理器窗格的树视图中显示它们。单击树中的TODO将打开文件并将光标放在包含TODO的行上,找到的TODO也可以在打开的文件中突出显示。
HTML Snippets完整的HTML代码提示,包括HTML5
HTML CSS Support在 html 标签上写class 智能提示css样式
jQuery Code SnippetsjQuery代码提示,超过130个用于JavaScript代码的jQuery代码片段。,只需键入字母'jq'即可获得所有可用jQuery代码片段的列表。
HTMLHinthtml代码检测,支持html5
vetur语法高亮、智能感知、Emmet等
Code Runner如果你需要学习或者接触各种各样的开发语言,那么 Code Runner 插件可以让你不用搭建各种语言的开发环境,直接通过此插件就可以直接运行对应语言的代码,非常适合学习或测试各种开发语言。
Npm用package.json来校验安装的npm包,确保安装包的版本正确,对缺少package.json文件的包或者未安装的包给出高亮提示。
IntelliSense for CSS class names in HTML在 HTML 中调用定义好的样式名时,有时需要经常在 HTML 与 CSS 文件之间切换,来回地查看你已定义好的 CSS 类名。而有了 IntelliSense for CSS class names in HTML 插件后,你可以在 HTML 中需要调用 CSS 类名的地方,此插件会智能地给你已定义 CSS 类名的提示。
Auto Close Tag自动添加HTML / XML关闭标签
Git History以图表的形式查看 git 日志
HTML Boilerplate使用 HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构
HTML Snippets代码自动填充
Image Preview鼠标移到路径里显示图像预览
intelliSense for CSS class names in HTML把项目中 css 文件里的名称智能提示在 html 中
QuokkaQuokka 是一个调试工具插件,能够根据你正在编写的代码提供实时反馈。它易于配置,并能够预览变量的函数和计算值结果。另外,在使用 JSX 或 TypeScript 项目中,它能够开箱即用。
Live Server浏览器实时刷新
Node.js Modules Intellisense可以在导入语句中自动完成JavaScript / TypeScript模块
React Native Tools代码提示、Debugging、集成 RN 的命令。
ES7 React/Redux/GraphQL/React-Native snippetsReact开发必备,代码补全,规范代码样式Vue VSCode SnippetsVue语法高亮,并且依据Vue 2的API添加了代码片段。
Open-In-Browser由于 VSCode 没有提供直接在浏览器中打开文件的内置界面,所以此插件在快捷菜单中添加了在默认浏览器查看文件选项,以及在客户端(Firefox,Chrome,IE)中打开命令面板选项。
project Manager在多个项目之前快速切换的工具,多项目管理插件
FlutterFlutter支持和调试器工具
Awesome Flutter Snippets一个为flutter提供常用函数和代码片段的集合