Brackets功能还是很强大的。

官网:brackets.io
常见问题解决:https://github.com/adobe/brackets/wiki/Troubleshooting
快捷键:https://github.com/adobe/brackets/wiki/Brackets-Shortcuts

首次打开Brackets

首次打开有一个默认页面,右上角的波浪按钮用来预览,被打开的文件出现在左上角的Working Files选项下,Working Files同行右侧还有一个排序按钮,点击左上角Getting Started右侧的下拉按钮可以打开另外的工程,在Getting Started下显示了所有的工程文件,单击工程文件是预览,双击工程文件开始对文件编辑,在右下角可以改变文件的格式,如果文件有语法错误右下角还有一个圆形提示按钮,鼠标放到css文件上的颜色样式还可以预览颜色,如果是图片点击图片可在界面中预览图片以及图片相关信息。

汉化

dubug菜单→language→simple chinese

有关预览页面

● 预览页面显示不全

如果出现这种情况,就在chrome中打开:chrome://flags/, 并启用DirectWrite Windows项,启用之后还需重新启动浏览器。

● 打开预览页面

除了可以点击右上角的预览按钮,还可以用快捷键ctrl+alt+p

● 预览页面,审查某个元素,再此点击Brackets的预览按钮,原先的预览页面就失效了

此时,应该关闭或重新刷新原先的预览页面。

View 菜单项

● Increase Font Size,放大字体,快捷键ctrl++
● Decrease Font Size, 缩小字体,快捷键ctrl+-
● Restore Font Size, 恢复字体,快捷键ctrl+0
● Line Numbers
● Word Wrap
● Hightlight Active Line
● Hide Sidebar, 快捷键ctrl+alt+H
● Themes,右上角的Extension Manager可以获取到更多的themes

打开菜单项

● 快速导航:ctrl+shift+O
● 转到某行:ctrl + G
● 转到定义:ctrl + T
● tab跳转:ctrl + tab 和 ctrl + shift + tab

打开工程和文件

● 打开工程,即文件夹

→ 方法一:点击当前项目右侧,下拉箭头(快捷键ctrl+alt+R),点击"Open Folder"
→ 方法二:点击当前项目右侧,下拉箭头(快捷键ctrl+alt+R),点击选择其他工程,当在不同的工程切换的时候,Working Files会记录下切换前的打开文件
→ 方法三:File菜单下的Open Folder
→ 方法四:把工程文件夹直接拖到软件界面区域

● 打开文件

→ 方法一:打开工程中的文件
→ 方法二:右键文件,选择Brackets这种打开方式
→ 方法三:直接把文件拖动到软件界面区域
→ 方法四:File菜单下的Open

文件相关

● 新建文件:右键左侧面板,New File,或ctrl+N。如果新建一个文件,保存为hello.js,Brackets会自动为我们检测语法错误,右下角的文件类型自动变为JavaScript,
● 重命名:单击文件名进行重命名
● 在资源管理器中打开:右键文件,Show in Explorer
● 快速打开某个文件:ctrl+shift+o
● 在文件中查找关键字:右键文件,Find in
● 在文件中替换:邮件文件,Replace in

插件

→ 点击右上角的"扩展管理器"
→ 搜索emmet
→ 点击"安装",安装成功后,关闭"扩展管理器"
→ 在菜单栏上出现"Emmet"菜单项
  
创建一个文件,保存命名为main.html。输入p,按tab键,就自动补全为<p></p>。输入div.hello按tab键,就自动补全为<div class="hello"></div>。输入span*4,再输入tab,会出现4对span。

常用的插件

● Brackets Git:集成Git
● Code Folding:代码折叠,比如折叠js的function
● Beautify:会出现在"编辑"菜单项下
● Emmet:html,css自动补全
● Documents Toolbar:出现横向的tab
● HTMLHint:有关html的错误提示
● Minimap:界面右侧出现缩略导航

插件更新

当"扩展管理器"出现绿色提示,就说明有安装的插件更新了。

Emmet更多的用法

● ul>li自动补全为:

<ul>
    <li></li>
</ul>

● ul#item>li*4,自动补全为:

<ul id="item">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

● ul.menu>li*4>{Item $},自动补全为:

<ul class="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

● table>tr*4>td+td+td,自动补全为:

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

● p*4>lorem,自动补全为:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure impedit ducimus culpa quisquam eaque veritatis, reprehenderit quia numquam asperiores cupiditate consectetur eligendi libero corporis quibusdam, porro voluptatem, aperiam repellendus vitae!</p>
<p>Dolorem quis laudantium odit modi excepturi officiis amet atque dolor sint, ut officia illum ratione qui aut magni molestias ipsa error assumenda quae voluptas in vero numquam aspernatur. Veniam, commodi?</p>
<p>Totam quibusdam ipsam, assumenda maxime hic repudiandae ipsa, unde sunt. Necessitatibus reiciendis, doloribus nihil quisquam quasi, non voluptas ipsam ducimus dolor pariatur maiores, cum tempora laboriosam dolorem fugit, officiis aspernatur.</p>
<p>Architecto praesentium harum aspernatur nesciunt deleniti quis repellendus, dignissimos facere tenetur provident iure est quae et voluptas numquam iusto minus ab saepe odio vitae soluta cum enim veritatis. Ea, recusandae.</p>

● 在css文件中,m10,自动补全为:

margin: 10px;

● 在css文件中,m10e,自动补全为:

margin: 10em;

● 更多在这里:http://docs.emmet.io/

主题

在"扩展管理器"安装主题,在"视图"菜单下的"主题"中设置。

Lint for css

→ 点击右上角的"扩展管理器"
→ 搜索csslint
→ 点击"安装",安装成功后,关闭"扩展管理器"

其它快捷键

● ctrl+A 全选
● ctrl+S 保存
● ctrl+C 复制
● ctrl+V 粘帖
● // 注释,或快捷键ctrl+/
● 复制行,把鼠标放在行的任意处,ctrl+D
● 复制多个连续字母,拖选要选择的的字母,ctrl+D
● 在文件中查找款关键字:ctrl+F
● ctrl+E, 把光标放在类名或元素上后ctrl+E

使用Brackets的更多相关文章

  1. Brackets

    按下Ctrl + E("编辑")或退出编辑.Brackets将搜索项目下所有CSS文件 Ctrl/Cmd + Alt + P 打开即时预览功能 alt + command + O目 ...

  2. CF380C. Sereja and Brackets[线段树 区间合并]

    C. Sereja and Brackets time limit per test 1 second memory limit per test 256 megabytes input standa ...

  3. Brackets前端开发IDE工具

    Brackets是一个开源的前端开发IDE工具,网页设计师和前端开发人员必备的前端开发IDE工具. 它能够使你在开发WEB网站实时预览你的网页,目前版本只适用于Chrome浏览器可以实时预览效果 支持 ...

  4. POJ 题目1141 Brackets Sequence(区间DP记录路径)

    Brackets Sequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 27793   Accepted: 788 ...

  5. CF149D. Coloring Brackets[区间DP !]

    题意:给括号匹配涂色,红色蓝色或不涂,要求见原题,求方案数 区间DP 用栈先处理匹配 f[i][j][0/1/2][0/1/2]表示i到ji涂色和j涂色的方案数 l和r匹配的话,转移到(l+1,r-1 ...

  6. 前端开发利器-Brackets IDE

    是什么? http://brackets.io/ A modern, open source text editor that understands web design. 现代, 开源的文本编辑器 ...

  7. CodeForces 149D Coloring Brackets

    Coloring Brackets time limit per test: 2 seconds memory limit per test: 256 megabytes input: standar ...

  8. POJ 1141 Brackets Sequence

    Brackets Sequence Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 29502   Accepted: 840 ...

  9. POJ1141 Brackets Sequence

    Description Let us define a regular brackets sequence in the following way: 1. Empty sequence is a r ...

  10. Brackets(区间dp)

    Brackets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3624   Accepted: 1879 Descript ...

随机推荐

  1. ispoweroftwo 判断2的次幂【转】

    转自:https://www.cnblogs.com/troublelost/p/5236391.html 首先结果是: public bool IsPowerOfTwo(int n) { if(n& ...

  2. Linux那些事儿之我是Hub(大结局)挂起自动化【转】

    转自:http://blog.csdn.net/fudan_abc/article/details/1805471 目睹了当今大学校园的素质流氓化,kiss公开化,消费白领化,上课梦游化,逃课普遍化, ...

  3. mydumper安装及使用

    mydumper 官网:https://launchpad.net/mydumper 安装方式: 1.yum install glib2-devel mysql-devel zlib-devel pc ...

  4. VS2017插件开发-项目右键菜单

    1.创建自定义命令 2.更改.vsct中Group节点的id <Group guid="guidPublishOwinPackageCmdSet1" id="MyM ...

  5. Python黑魔法

    1. 赋值 In [1]: x = 1 ...: y = 21 ...: print x, y ...: ...: x, y = y, x ...: print x, y 1 21 21 1 2. 列 ...

  6. spring-mvc集成 swagger

    问题1:spring-mvc集成 swagger, 配置好后界面 404, 原因: dispatcher-servlet.xml 文件中, 要在这上面 <!-- 启用spring mvc 注解 ...

  7. dojo 加载自定义module的路径问题

    因为最近想学学ArcGIS API for JavaScript ,翻了下ESRI的官网guide,发现其是基于dojo框架的,看了两页实在看不懂,于是先来熟悉下dojo框架.人蠢不能怪社会%> ...

  8. 【LOJ】#2278. 「HAOI2017」字符串

    题解 好神仙的题啊 感觉转二维平面能想到,算重复情况的方法真想不到啊 通过扒stdcall代码获得的题解QAQQQQ 我们先把\(p_i\)正串反串建出一个AC自动机来 然后我们把s串放在上面跑匹配, ...

  9. “漂亮的”排序算法 Stooge Sort 如何完成排序

    Stooge Sort 是一种低效的递归排序算法,甚至慢于冒泡排序.在<算法导论>第二版第7章(快速排序)的思考题中被提到,是由Howard.Fine等教授提出的所谓“漂亮的”排序算法. ...

  10. 018.Zabbix维护时间和模板导入

    一 维护时间 在某些正常业务维护期间,不需要进行告警,可添加维护时间. 二 维护时间添加 2.1 维护 参数 描述 Name 维护名称 Maintenance type 两种维护类型可选: With ...