为前端而生的编辑器Brackets及配置推荐
原文:http://laker.me/blog/2015/10/28/15_1028_brackets_intro/
欢迎交换友链 Laker's Blog--进击的程序媛
Github:https://github.com/younglaker
微博: 江小湖Laker
关于
该编辑器是用HTML/CSS/JavaScript开发的,所以前端工程师可以能很容易读懂并进行改进。
早在两年前刚起步时我就开始关注了,但鉴于功能还不完善、社区不够活跃,一直保持观望状态。最近重装电脑,索性把一直用的Sublime放到一边,试着用Brackets。
初体验
用惯Sublime,初次使用Brackets的时候总会不自觉的进行比较。感觉Brackets更像干净的白纸,等着开发者去图画。Brackets要靠插件来完成Sublime很多基本功能。
特别的功能
在HTML里编辑CSS
在HTML文件里,鼠标放到一个要编辑样式的标签上,快捷键CTL + E
,就可以看到有个下拉编辑框,这里显示了与这个标签有关的样式,直接修改后,相应的样式文件也会改变。
可以看到,这个样式定义在style.css
文件里,你还可以new rule
新建样式。
预览颜色
用取色器编辑颜色
文件地址提示
图片预览
主题
更换主题
在网上找的你喜欢的主题,我用的是一个基于 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 <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
,可以看到文件所在目录。
找到后打开编辑,保存重启即可。
为前端而生的编辑器Brackets及配置推荐相关推荐
- brackets作为html编辑器,为前端而生丨编辑器 Brackets 及配置推荐
更换主题 在网上找的你喜欢的主题,我用的是一个基于 Sublime Monokai 的主题.GIthub 的地址是 https://github.com/Brackets-Themes/Monokai ...
- asp代码在dwearwear转换成html格式怎么转,为前端而生的编辑器Brackets及配置推荐
关于 Brackets 号称是懂web设计的开源编辑器.之所以这样说,是因为它是为前端工程师准备的,在前端开发方面做了很多特别设计.比如 可以在HTML里面直接跨文件编辑标签所涉及的CSS.PSD生成 ...
- web前端开发---弃Hbuilder编辑器到Atom插件推荐,快捷键,快速编辑html 使用
1 ATOM atom编辑器是Github专门为程序员推出的一个开源跨平台文本编辑器.具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言.它支 ...
- bracket怎么新建HTML,Adobe Brackets如何安装 网页前端编辑器Brackets怎么用
Adobe Brackets如何安装和使用?网页前端编辑器Adobe Brackets好用吗?Brackets是编程工具,是很多初学者喜欢使用的网页前端编辑工具,能安装插件,让用户在编辑界面上边编辑边 ...
- mac文本编辑器Brackets
绿色安全免费的Brackets for Mac你值得拥有! mac文本编辑器有什么推荐?Brackets for Mac是一款可靠,直观且易于使用的macOS应用程序,可用作HTML,CSS和Java ...
- CP Editor 编辑器(为竞赛而生的编辑器)的安装与配置
CP Editor 编辑器(为竞赛而生的编辑器)的安装与配置 1. CP Editor 编辑器的下载 2. 配置环境变量 3. 配置个人化的 CP Editor 4. 配置完成测试 1. CP Edi ...
- 前端应届生如何做一个职业规划
前端的兴起 前端真正兴起和开始频繁出现在大家的视线里,大概是在十年前.彼时的 Web 开发基本是由后端主导,前端能做的只是校验一下数据.操作一下 DOM.(其中数据检验是 JS 产生的根本原因:当时网 ...
- 给前端应届生的职业规划建议
林洋,YMFE 资深前端工程师,负责去哪儿网 Hybrid(Hy).React Native(QRN)等移动端方案架构.开发和推进,负责一系列基于 Node 的开源平台(YIcon.YApi 等).开 ...
- 写给前端应届生的职业规划建议
林洋,YMFE 资深前端工程师,负责去哪儿网 Hybrid(Hy).React Native(QRN)等移动端方案架构.开发和推进,负责一系列基于 Node 的开源平台(YIcon.YApi 等).开 ...
最新文章
- 彻底搞懂感受野的含义与计算
- 商务英语如何利用计算机思维,如何更好的运用商务英语
- Opportunity Sales org F4 value help data source
- 一次面试总结(记录)
- CAP定理(CAP theorem)
- Python之数据分析(Numpy数据可视化:等高线图、热力图、饼图)
- log4j的使用 slf4j简单介绍
- LINUX编译java3d/j3d
- Mppt光伏最大功率点跟踪控制matlab仿真
- solidworks图纸模板添加_solidworks工程图模板制作教程(中)
- 计算机启动时硬盘指示灯不亮,电脑启动时没有自检声,硬盘指示灯不亮
- python 写命令行_一个用python写的用命令行看糗百的小工具
- windows,远程开机,远程唤醒(WOL,Wake-on-LAN)
- 程序员转公务员之Hello World
- CF-Educational Codeforces Round 44 (Rated for Div. 2)-A-Chess Placing
- OpenCV框架与图像插值算法
- Android闹钟制作过程图,小学闹钟手工制作步骤详解(配图)
- 288. Unique Word Abbreviation
- ResNet详细介绍
- 《实战数据库营销——大数据时代轻松赚钱之道》新书试读+文摘
热门文章
- 已解决 selenium.common.exceptions.NoSuchWindowException: Message: no such window
- 接口测试常用工具及测试方法(新手篇)
- 播放列表php代码,【求助】如何直接在Discuz! 代码 FLASH代码中添加优酷播放列表...
- mysql s索引 树_mysql 学习 - B+树索引
- ffmpeg create a video from 4th image and and slow down the play speed
- CondenseNet: An Efficient DenseNet using Learned Group Convolutions
- Sparse Modeling of Intrinsic Correspondences
- FCN数据预处理(code)
- 数据挖掘实践(金融风控)——task1:赛题理解
- 利用lightgbm做learning to rank 排序,解析模型中特征重要度