VSCODE常用扩展工具

AGEE
362 阅读3分钟
  • 1.Beautify 格式化代码，可美化JS、JSON、CSS、Sass、HTML（其他类型的文件不行） Shift+Alt+F（不同的电脑可能不一样）
  • 2.Auto Rename Tag 自动修改匹配的 HTML 标签
  • 3.Auto Close Tag 自动添加HTML / XML关闭标记
  • 4.A-super-translate 英语小白必备悬浮翻译
  • 5.Bracket Pair Colorizer 给嵌套的各种括号加上不同的颜色
  • 6.carbon-now-sh 将代码生成漂亮图片展示
  1. 【Windows：Ctrl + Shift + P】
  2. 【Mac：Cmd + Shift + P】
  3. 输入Carbon，回车
  • 7.Chinese (Simplified) Language Pack for Visual Studio Code vscode中文语言包
  • 8.Code Runner 代码一键运行，支持超过40种语言
  1. 键盘快捷键 Ctrl+Alt+N
  2. 快捷键 F1 调出 命令面板, 然后输入 Run Code
  3. 在编辑区，右键选择 Run Code
  4. 在左侧的文件管理器，右键选择 Run Code
  5. 右上角的运行小三角按钮
  • 9.Code Spell Checker 代码拼写检查
  • 10.Color Highlight 代码高亮
  • 11.Color Info 提供在 CSS 中使用颜色的相关信息。只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
  • 12.Community Material Theme 推荐主题
  • 13.CSS Peek 可以追踪至样式表中 CSS 类和 ids 定义的地方。当在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会发送样式设置的 CSS 代码。
  • 14.Debugger for Chrome 在vs中启动chrome控制台进行调试
  • 15.filesize 会在左下角显示文件大小
  • 16.Git History 可以查看Git log, file, 和line 历史记录，方便查看版本号，文件对比等等，也就是小乌龟的功能它都有！
  • 17.Git Project Manager Git项目经理
  • 18.GitLens — Git supercharged 增强Visual Studio代码中内置的Git功能。它帮助您通过Git blame注解和代码镜头直观地显示代码作者，无缝地导航和探索Git存储库，通过强大的比较命令获得有价值的见解。 简单是来说，就是可以让你知道这段代码是谁提交的，方便你定位责任人，这对团队代码开发和协作有着重要意义！
  • 19.Go Go开发插件
  • 20.Green Tree Theme 绿色主题（护眼）
  • 21.Highlight Matching Tag 高亮显示匹配标签
  • 22.HTML Boilerplate HTML 模版插件，可以摆脱为 HTML 新文件重新编写头部和正文标签的苦恼。 只需在空文件中输入 html，并按 tab 键，即可生成干净的文档结构。也可以输入！，然后按tab键或者enter键来生成初始干净的文档结构。
  • 23.Icon Fonts VsCode中的图标插件，可以控制vscode中的文件管理的树目录显示图标
  • 24.Image preview 图片预览，它会根据路径在代码栏显示图片
  • 25.indent-rainbow 可以使得对齐更加具有可读性
  • 26.Material Icon Theme 主题
  • 27.Material Theme 主题
  • 28.Material Theme Icons 主题图标
  • 29.Minify 手动压缩JS, CSS, HTML
  • 30.Path Intellisense 路径提示器
  • 31.php cs fixer 使用php-cs-fixer和PHP Formatter 插件规范化PHP代码
  • 32.PHP Debug 调试代码
  • 33.PHP Formatter 代码自动格式化
  • 34.PHP IntelliSense php扩展，进行代码追踪
  • 35.Prettier - Code formatter 代码格式化
  • 36.Project Manager 项目管理
  • 37.px to rem px转rem
  • 38.Python Python开发插件
  • 40.Rainbow Brackets 可以给代码的缩进提供颜色上提示，和 Rainbow Brackets 这搭配使用，可以在代码层级较多时，也能看起来很清晰，一目了然。
  • 41.Regex Previewer 使用正则校验测试，在预览面板增加需要测试的正则串
  • 42.SVG Viewer 预览SVG
  • 43.Todo Tree 标识一些未完成的事件，可参考这个：www.pianshen.com/article/490…
  • 44.Trailing Spaces 高亮那些冗余的空格，可以快速删掉
  • 45.View In Browser 在浏览器中查看
  • 46.VS Code Counter 统计代码行数
  • 47.vscode-icons Icon集合
  • 48.Docker Docker扩展插件
  • 49.MySQL Mysql扩展插件
  • 50.SFTP SFTP上传插件
  • 51.npm Intellisense 可以在导入语句自动补全npm模块名称
  • 52.live server 一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。
avatar
文章
阅读
粉丝