brackets作为html编辑器,为前端而生丨编辑器 Brackets 及配置推荐

更换主题

在网上找的你喜欢的主题，我用的是一个基于 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.json、 theme.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 (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; }

官方指南