作为前端工程师的你们平时主要使用什么IDE,atom、webstorm、sublime还是vscode?

今天介绍一款比较小众的IDE,Adobe的开源项目Brackets,提供Windows和OS X平台支持。Brackets的特点是简约、快捷,没有很多的视图或者面板,笔者感觉前端开发使用它会省去很多额外的操作。比如快要被按坏的F5键!支持实时预览,避免浏览器与IDE之间来回切换。

官网地址:http://brackets.io/  因为项目是在github上所以下载速度看人品吧!

官方提供了简体中文的支持,但是好像字体支持不是很好。在菜单栏处选择debug->language->simple chinese就可更换为简体中文版本。

右边栏从上至下依次是快速预览,支持ctrl+s保存后浏览器自动更新查看效果。但目前该功能只支持Chrome浏览器。接下来是扩展管理器,这里主要是下载或者是查看需要的一些插件,但目前支持的比较少,不过该有的都有后面我会列出一些常用的。接着是快速格式化工具,作用类似于beautify插件,可以快速将html、css、 js的格式进行优化,方便阅读。

格式化后:

最后一个为html格式快速生成工具,有别于sublime该工具支持选择性的加入内容。

Brackets快捷键

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

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

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

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

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

Ctrl/Cmd + / 行注释

Ctrl/Cmd + Alt + / 块注释

Brackets常用插件

1.代码格式化插件:Beautify

直接打开Brackets 插件管理器,搜索安装beautify。
安装完毕后,选择菜单上的编辑→beautify(或使用快捷键ctrl+alt+L)完成代码格式化。

2.HTML代码编辑:Emmet

最强大的HTML和CSS快速编辑插件,前端应该都知道!

3.CSS和JS压缩插件:Minify

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

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

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

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

类似sublime、phpstorm / webstorm的风格。

6.Brackets主题:theme

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

不知道这款IDE合不合你的口味呢?

介绍一款小众的IDE的更多相关文章

  1. Linux下介绍一款不错的HTML编辑器

    编写HTML文档需要编辑器,在windows平台上我们可以用NotePad++,下面介绍一款Linux下的编辑器Komodo Edit,这是一款免费,开源的编辑器. 他对HTML的支持有其独到之处,我 ...

  2. 《介绍一款开源的类Excel电子表格软件》续:七牛云存储实战(C#)

    两个月前的发布的博客<介绍一款开源的类Excel电子表格软件>引起了热议:在博客园有近2000个View.超过20个评论. 同时有热心读者电话咨询如何能够在SpreadDesing中实现存 ...

  3. 介绍4款json的java类库 及 其性能测试

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. 它基于JavaScript Programming Lan ...

  4. 介绍一款替代SSMS的sqlserver管理工具 toad for sqlserver5.7

    原文:介绍一款替代SSMS的sqlserver管理工具 toad for sqlserver5.7 toad for sqlserver5.7 虽然SSMS很好很强大,不过有时候使用一些第三方工具可以 ...

  5. 介绍两款Linux文件恢复工具,ext3grep与extundelete https://www.cnblogs.com/lazyfang/p/7699994.html

    介绍两款Linux文件恢复工具,ext3grep与extundelete,可能在关键时刻会有所帮助.ext3grep仅对ext3文件系统有效,extundelete对ext3与ext4文件系统都有效  ...

  6. 介绍一款“对话框”组件之 “artDialog”在项目中的使用

    在实际开发项目中经常会用到对话框组件,提示一些信息.其实有很多,例如:在项目中常用到的“Jquery-UI.Jquery-EasyUI”的.Dialog,他们也很强大,Api文档也很多.今天就介绍一款 ...

  7. 介绍两款常用的“图表统计图"的插件

    一.相信朋友们在开发的过程中都会使用到“数据统计”的功能,图表的统计更为直观,在这里就介绍两款插件:fusionChart.DataVisualization. 1.fusionChart实际项目中用 ...

  8. 介绍一款好用的命令行工具Cmder

    一.Cmder的介绍: 在大多数情况下,我们都想复制命令行窗口中的命令行,但是cmd复制粘贴大家都懂得:有没有更好的工具替代呢? 答案是肯定的,今天我将为大家介绍一款工具--Cmder. Cmder可 ...

  9. 推荐一款小众且好用的 Python 爬虫库 - RoboBrowser

    1. 前言 大家好,我是安果! 今天推荐一款小众轻量级的爬虫库:RoboBrowser RoboBrowser,Your friendly neighborhood web scraper!由纯 Py ...

随机推荐

  1. php-elasticsearch bulk批量插入数据

    1.单条插入 <?php include '../vendor/Elasticsearch/autoload.php'; $a['hosts'] = array( #需要用户名时 http:// ...

  2. Android 开发者文档 -- 应用基础知识

    https://developer.android.com/guide/components/fundamentals 应用基础知识 Android 应用采用 Java 编程语言编写.Android ...

  3. 断电后gitlab报500错误启动出错

    异常断电后,gitlab报500错误,重启无效 通过sudo gitlab-ctl reconfigure启动时, 提示 [execute] pgsql:could not connect to se ...

  4. Windows搭建Go语言环境·

    对于Windows用户,Go语言提供两种安装方式(源码安装除外): .MSI安装:程序会自动配置你的安装 .ZIP安装:需要你手动设置一些环境变量 一.MSI安装 1.下载安装包(根据操作系统选择相应 ...

  5. 认识CSS中高级技巧之元素的显示与隐藏

    前端之HTML,CSS(八) CSS高级技巧 元素的显示与隐藏 CSS中有三个属性可以设置元素的显示于隐藏,分别是:display.visibility和overflow. display 隐藏元素: ...

  6. thinkPhP + Apache + PHPstorm整合框架

    最近在学习使用 ThinkPhP,网上很多都是用一些整合好的服务框架,为了学习,在这里我简单的对Apache.PHP做一个原生的整合,希望对你有帮助. 步骤: ①下载 thinkPHP.PHP.Apa ...

  7. hive Tutorial

    hive数据单元按照粒度从大到小,依次为 1.数据库database:可以用show databases; 命令查看所有的数据库,并用use d1; 命令来选中d1数据库,接下来就可以操作d1数据库中 ...

  8. C++程序设计

    C++程序设计 之前学过C++课程,但是时间有点久,忘了很多,这里做一个简单的回顾. 网站推荐: C++在线编译器 学习C++之前,您可以先了解C语言. c++的扩展名一般为cpp(cplusplus ...

  9. VS2013诡异问题,虚方法、泛型,通通躺枪

    最近在调代码,发现一个很诡异的问题,简单复原一下 创建4.0控制台项目 以下代码 class Program { static void Main(string[] args) { var item ...

  10. unity 工具开发基础

    using System.Collections; using System.Collections.Generic; using System.IO; using System.Text; usin ...