美文网首页ngx 修仙之路让前端飞Web前端之路
前端开发神器Brackets的那些秘密

前端开发神器Brackets的那些秘密

作者: 全栈弄潮儿 | 来源:发表于2017-06-19 14:21 被阅读293次

    那些神秘强大的bracket插件

    1.代码格式化插件:Beautify

    直接打开Brackets 插件管理器,搜索安装beautify。

    或者通过url下载:https://github.com/brackets-beautify/brackets-beautify

    安装完毕后,选择菜单上的编辑→beautify(或使用快捷键ctrl+alt+L)完成代码格式化

    2.HTML代码编辑:Emmet

    最强大的HTML和CSS快速编辑插件

    直接打开Brackets 插件管理器,搜索安装Emmet

    或者通过url下载:https://github.com/emmetio/brackets-emmet

    3.CSS和JS压缩插件:Minify

    很强大的插件,集成了CSS和JS的压缩,会在同个目录下自动生成*.min.*格式的文件。

    直接打开Brackets 插件管理器,搜索安装Minify

    或者通过url下载:https://github.com/abagshaw/brackets-minifier

    4.css3代码自动补全插件:auto prefix

    使用CanIUse上的css3数据,自动补全css3前缀和浏览器兼容,不过可能有些新了。有一些旧版本的浏览器会被抛弃掉。

    5.代码折叠插件:brackets-code-folding

    安装URL:https://github.com/thehogfather/brackets-code-folding

    默认不支持代码的可折叠功能。通过此扩展的安装,对代码添加可折叠功能。

    6.当关闭编辑器时自动保存所有打开未保存的文件:Autosave Files on Window Blur

    类似Sublime Text2、phpstorm / webstorm的风格,之前提到的不足全部解决了。

    7.Brackets主题:theme

    安装URL:https://github.com/MiguelCastillo/Brackets-Themes

    该扩展为一个用于使用基于CodeMirror的主题集的扩展。安装该扩展后应用程序菜单中出现“Themes”菜单,开发者可以为应用程序界面从中选用一个主题。

    8.JS调试(JSHint)

    搜索JSHint即可安装

    9.QuickDocsPHP

    内嵌的php函数文档,包括语法,值和规则。

    10.CSSLint

    CSS语法调试

    11.Markdown Preview

    markdown preview是一款支持markdown的实时预览的插件,对于经常写项目文档的用户,算是一个福音。

    12.Brackets Color Palette

    支持直接在图片上吸取颜色的小插件,切图利器。

    13.brackets-snippets

    搜集代码片段用的,方便快速编辑。

    14.html-designer

    专门为设计师提供的一款可实时预览设计的插件,让我想起了DW.

    15.Popup Menu Brackets

    支持鼠标右键,可以选择复制或者剪切功能。

    16.AngularJS for Brackets

    Angular 的一款扩展插件

    17.Brackets Vue

    一款支持 VUE语法高亮的插件

    更多请登录官网:https://ingorichter.github.io/BracketsExtensionTweetBot/

    常用快捷键

    Ctrl/Cmd+Shift+H 可以呼出与关闭文件树

    Ctrl/Cmd + E 快速预览/编辑 css样式/javascript函数

    Ctrl/Cmd + +/- 放大缩小编辑区字体大小

    Ctrl/Cmd + 0 重置编辑区字体大小

    Ctrl/Cmd + Alt + P 打开即时预览功能

    Ctrl/Cmd + / 行注释

    Ctrl/Cmd + Alt + / 块注释

    注:css代码、html代码注释时只能使用块注释快捷键

    下载地址

    官网下载地址:http://brackets.io/ 但好多人下载特慢或者下载不下来原因是有一道墙!!!

    所以小编放在了安全的地方,大家可以关注微信公众号"全栈弄潮儿",回复:brackets,即可获取下载链接。


    更多angular1/2/4、ionic1/2/3、react、vue、微信小程序、nodejs等技术文章、视频教程和开源项目,请关注微信公众号——全栈弄潮儿

    微信公众号

    相关文章

      网友评论

        本文标题:前端开发神器Brackets的那些秘密

        本文链接:https://www.haomeiwen.com/subject/jubgqxtx.html