前端开发神器 - Brackets

做了几年的 .Net 项目开发,后来公司转 Java 语言开发,Java 做了还没一年,公司准备前后端分离开发,而我被分到前端!

Brackets是一款基于web(html+css+js)开发的web前端编辑器。它有许多普通编辑器难以实现的功能,是web前端开发者的神器。

Brackets官网下载:http://brackets.io/

其功能如下:

1、快速编辑
将光标定在颜色上,按下快捷键Ctrl+E即可编辑颜色。

将光标定在标签或者class或者id上,Brackets就会搜索整个目录下的css,列出匹配的项,快速编辑样式,再也不用到处找样式啦!

2、快速文档
文档是英文的,快捷键是Ctrl+K,简单测试得出,可以提示css属性的用法

3、多点编辑
选中一串字符,按Ctrl+B可以连续选择相同的字符一起编辑。或者可以通过按住Ctrl+鼠标左键点击来设定多个编辑点。

4、目录管理
侧边栏分为两块,上面一块工作区,显示当前打开的文档,下面一块是当前目录的文件列表,点击目录名称可以添加新的目录或者切到其它目录(Brackets里叫目录,不叫项目,其实一样)。工作区右边两个按钮,一个是设置排序按钮,一个是分屏按钮,可以将屏幕横切或竖切成两块。

5、实时预览
实时预览,你懂的。用过Sublime Text的应该知道Emmet LiveStyle,但是有许多问题。而Brackets的实时预览是编辑器本身就整合的,使用起来要好的多。点击右侧扩展里的第一个闪电图标打开实时预览。

第二个图标是同步手机端实时预览,手机端需要安装Edge CC。

其实Brackets还有另外一个名字Adobe Edge Code CC,他们的功能几乎一模一样,至于到底什么关系,就等英语学的好的大神们去窥探了。

6、JSLint语法检查
对js文件,内置JSLint语法检查器,它可以检查出一些难以用肉眼发觉的错误,吐槽一下,少个空格你也算个问题?一个alert函数你报了8个问题。。。

7、扩展插件
Brackets也支持插件,点击右侧工具箱的图标,可以打开扩展管理,当然,有时候会被墙一下。

推荐几个常用插件:

Emmet

Minifier

Beautify(代码美化,格式化)

Brackets Snippets(代码片段)

总结
Brackets用着漂亮的UI,还有许多特色功能,它是一款基于web语言开发的编辑器,在编辑器中按F12会在Chrome浏览器中打开控制台,可以看到Brackets的“内脏”。

本人使用的是Sublime Text,由于熟悉了ST的快捷键,自定义了许多代码片段,宏命令等,转到Brackets实在不舍。

目前我发现它也有一些缺点,如下:

1、快速样式编辑因为要搜索整个目录,所以速度会很慢,要用它得配个SSD才行。。。

2、目前没有发现宏功能,不过对宏的需求不是很大。

3、代码片段没有ST好用,快捷键需要设置组合键,其他键按了不是没反应就是触发默认功能了。

4、没有ST那么随心所欲,ST甚至可以修改Tab键、Enter的默认功能,触发顺序等,非常强大。

但对于新手来说,我比较推荐这款编辑器,毕竟除去了习惯的问题,它还是有许多地方做的比Sublime Text要好。

原文地址:https://www.cnblogs.com/xiaxue168/p/10359965.html

时间: 2024-08-02 02:18:56

前端开发神器 - Brackets的相关文章

前端开发神器WebStorm--Grunt 搭建环境(03)

通过上一篇前端开发神器WebStorm--自动化工作流(前言),相信大家都Grunt自动化工具有了初步了解. 接下来我就以WROC3000 web为原型,演示一下如何使用Grunt工具提高工作效率,最大程度压缩代码. 1.首先安装node环境 进入官网 下载安装.(记住安装目录) 检测安装成功方法:打开CMD窗口,输入 node --version 会打印出安装的版本号,说明已经安装成功. 2.安装 Grunt 客户端 在CMD 窗口中,切换到node安装盘符,会自动切换到nodejs安装目录.

Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaScript IDE”等.与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能.

打造属于自己的前端开发神器 -- 给Sublime Text加上Eclipse的光环

打造属于自己的前端开发神器 -- 给Sublime Text加上Eclipse的光环 2013-05-16 14:39:15 将Sublime Text打造成如Eclipse一般的前端开发IDE 1. 快捷键移植篇   从Java开始的梦, 到如痴如醉的Front End, 却始终摆脱不了Eclipse的束缚.   对于Javaer, Eclipse是非常不错的选择, 但对于单纯的前端而言, 是不是觉得略显笨重, 其中各种不想要的东西, 反正是诸多不爽, 曾用过Eclipse来做前端的人应该都有

前端开发神器WebStorm--自动化工作流Grunt(02)

为何要用构建工具? 一句话:自动化 对于需要反复重复的任务,例如压缩(minification).编译.单元测试.linting等,自动化工具可以减轻你的劳动,简化你的工作. 当你正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作. Grunt这货是啥? 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com 为什么使用Grunt? 使 用Grunt的最大好处在于它带给团队的一致性.如果你曾经多人合作完成工作,你就会知道代码中的不一致性是多

前端开发利器-Brackets IDE

是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器, 最懂得web设计. With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. 专注可视化工具

前端开发神器:Emmet

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的神器,让你飞一般地编写HTML和CSS代码. 官网:http://docs.emet.io/ 1. > 表示 后代 ul>li>a <ul> <li><a href=""></a></li> </ul> 2. + 表示 兄弟 div>h2+p <div> <h2></h2> &l

Sublime Text 使用指南 - 前端开发神器

Sublime Text 前端开发的神器 Sublime Text是一个前端开发者必备的编辑器,大量的插件,完善的功能,优越的性能,有非常多的特色,给前端开发提供了一个完善的开发条件. 本文主要介绍的是如何使用sublime Text藏在菜单里的一些功能,这些功能十分强大,却因隐藏的较深不太被大家关注,网上相关的介绍文章也不太多,这里就整理一下. Sublime Text 功能使用介绍,目录: Nodejs build System Multiple Selections Project & W

前端开发工具Brackets介绍,安装及安装Emme插件时踩过的坑

对于前端开发的园友来说有可能IDE工具有很多,层次不穷,还有每个人的喜好及习惯也不一样,因为我是一名后端开发的.Net程序员,但是大家都知道,现在都提倡什么全栈工程师,所以也得会点前端开发,所以我对于前端来说可能是个菜鸟,大神绕过,勿喷!我刚接触程序,开发网站时主要用Dreamweaver,后来也用过WebStorm和Sublime2,不过在学习Bootstrap3的时候偶然的机会接触到Brackets就个人比较喜欢他,就不想用别的IDE了,我这里不做这些工具的比较,说哪一个更好,我觉得各有所爱

前端开发神器sublime Text

实用的sublime插件集合 – sublime必备插件 前言 入前端领域开始,就学着使用sublime,一直用起来很顺手,速度是我最欣赏的,快的没有编辑器可以匹敌.还是废话不多扯,入正题.好多有多少,用了就知道了. 插件介绍 Package Control 功能:安装包管理 简介:sublime插件控制台,提供添加.删除.禁用.查找插件等功能 使用:https://sublime.wbond.net/installation 安装方法: CTRL+` ,出现控制台 粘贴以下代码至控制台 ST2