zoukankan      html  css  js  c++  java
  • 使用Brackets

    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

  • 相关阅读:
    干货 | 日均流量200亿,携程高性能全异步网关实践 https://mp.weixin.qq.com/s/JdbPf_H4pn5PnPH2LIKQlw
    go获取机器的mac地址和ip
    扫清障碍和风险
    如何优雅地记录操作日志
    WebSocket 基础与应用系列(一
    pytest测试框架
    两个循环依赖的类中都有@Async 报错问题
    jvm 分析常用笔记
    Qt5.2~5.8下载地址
    windows的bat脚本中文乱码或者文件中文乱码
  • 原文地址:https://www.cnblogs.com/darrenji/p/4831046.html
Copyright © 2011-2022 走看看