为前端而生的编辑器Brackets及配置推荐

关于

Brackets 号称是懂web设计的开源编辑器。之所以这样说,是因为它是为前端工程师准备的,在前端开发方面做了很多特别设计。比如 可以在HTML里面直接跨文件编辑标签所涉及的CSS、PSD生成web文件、实时预览等。

该项目由Adobe创建和维护,并在Github上开源

该编辑器是用HTML/CSS/JavaScript开发的,所以前端工程师可以能很容易读懂并进行改进。

早在两年前刚起步时我就开始关注了,但鉴于功能还不完善、社区不够活跃,一直保持观望状态。最近重装电脑,索性把一直用的Sublime放到一边,试着用Brackets。

初体验

用惯Sublime,初次使用Brackets的时候总会不自觉的进行比较。感觉Brackets更像干净的白纸,等着开发者去图画。Brackets要靠插件来完成Sublime很多基本功能。

下面先介绍Brackets特有的功能,再介绍插件和小技巧。

特别的功能

在HTML里编辑CSS

在HTML文件里,鼠标放到一个要编辑样式的标签上,快捷键CTL + E,就可以看到有个下拉编辑框,这里显示了与这个标签有关的样式,直接修改后,相应的样式文件也会改变。

可以看到,这个样式定义在style.css文件里,你还可以new rule新建样式。

编辑CSS
编辑CSS

预览颜色

在样式文件里,鼠标放到一个颜色属性上,就可以预览颜色

预览颜色
预览颜色

用取色器编辑颜色

在颜色值上按CTRL + E,调出取色器进行编辑:

用取色器编辑颜色
用取色器编辑颜色

文件地址提示

文件地址提示
文件地址提示

图片预览

HTML:

图片预览
图片预览

Markdown:

图片预览
图片预览

主题

更换主题

在网上找的你喜欢的主题,我用的是一个基于 Sublime Monokai 的主题。GIthub 的地址是 https://github.com/Brackets-Themes/Monokai

有几种方法添加:

  • 通过URL
    在右边工具栏找到一个望远镜的图标,点击Install from URL,粘贴地址上去安装。
此处输入图片的描述
此处输入图片的描述
  • 上传压缩包

同样在上图的位置,拖拽zip文件即可

  • 在线搜索

Brackets已经被墙,能用的几率很小。完全无法理解为什么编辑器网站都被墙 = =

  • 复制到插件文件夹
    从菜单Help > Show Extensions Folder > User中进入扩展文件夹,把压缩包解压到这里,或者 git clone 主题项目。重启编辑器即可。重启快捷键是 F5。

创建新主题

创建主题文件

  • 打开编辑器,从菜单Help > Show Extensions Folder > User中进入扩展文件夹
  • 新建一个文件夹,起一个你喜欢的主题名字
  • 在这个文件夹新增文件package.jsontheme.less(CSS也行)

修改package.json

按照以下模板填写,可以参考别人的主题的文件;

{
    "name": "yourname.my-shiny-theme",
    "title": "My Shiny Theme",
    "description": "This theme is so shiny that you'll need to wear shades!",
    "homepage": "https://github.com/yourname/my-shiny-theme",
    "version": "1.0.0",
    "author": "Your Name <your@email> (http://your.url)",
    "license": "MIT",
    "theme": {
        "file": "theme.less",
        "dark": true,
        "addModeClass": true
    },
    "keywords": ["theme"]
}

添加主题

  • 在编辑器菜单View > Themes里添加你的主题
  • 编辑你的theme.less文件,保存后即可生效,在编辑器里看到效果

开发

前面说到,Brackets是用HTML、CSS、JavaScript开发的,所以前端工程师能很轻易掌握开发这个编辑器的技能。

修改编辑器主题,就行开发网页一样。按F12就能看到Development Tool,是不是Chrome的开发者工具的既视感!是不是一下子就对Brackets有很强烈的归属感~

所以你可以审查元素,获得类名,然后到CSS/LESS文件里进行修改。

比如,我找到JS文件里for用到的class是cm-keyword,然后就可以在样式文件里修改。

修改
修改

为不同文件格式设置不同注释样式

在1.1版本之后,在主题package.json 文件里开启 addModeClass 模式,就可以这样为CSS的注释写样式:

.cm-m-css.cm-tag {
    color: #6c9ef8;
}

其他Common modes:

.cm-m-clike: PHP
.cm-m-css: CSS, LESS
.cm-m-javascript: JavaScript
.cm-m-xml: HTML, XML

修改

比起从0开始,还是站在巨人的肩上比较好。这是我在主题上进行的修改,不过牵一发动全身,修改需谨慎:

span.cm-builtin {  /*CSS id*/
    color: #FFFD83;
}
span.cm-header {  /*MD标题*/
    color: #53C0E0;
}
.cm-s-monokai-dark-soda .cm-tag {  /*CSS标签、MD图片标签*/
    color: #F5A14E;
}
.cm-s-monokai-dark-soda .cm-comment {  /*注释、MD文件的代码块*/
    color: #c7d4d6;
}
span.CodeMirror-matchingbracket {  /* 聚焦的括号 */
    color: #F5C04C !important;
    background-color: none; 
}

官方指南

小技巧

自动补全反括号、引号

Sublime是默认开启这个功能,Brackets需要手动打开,刚开始还比较困惑,差点因为没找到这个小功能而放弃Brackets,因为实在容易出错。

开启菜单 Edit--Auto Close Brace

查找解决方案的时候,发现这个功能以前是默认开启的,后来取消了,感觉很不自在。我觉得大多数人都用过Sublime,它的一些好的做法应该保留,这样用户不会产生太大抵触心理。不过ST3也是把很多ST2默认开启的功能改为手动开启,也是烦。

修改文件树字体大小

习惯可能大字了。在Sublime是通过 User Setting 里添加 JSON 信息即可。

通过开发者工具,找到定义文件树的标签和样式定义,可以看到是在style.css文件里的#project-files-container a (注意,我安装的文件树的插件,所以和你所找到的会不一样):

样式定义
样式定义

点击style.css,进入开发者工具的 Source 面板,右键Reveal in navigator,可以看到文件所在目录。

文件
文件

找到后打开编辑,保存重启即可。

修改前
修改前
修改后
修改后

原文:http://laker.me/blog/2015/10/28/15_1028_brackets_intro/
欢迎交换友链 Laker's Blog--进击的程序媛

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容