• Brackets 前端编辑器试用


    Brackets编辑器介绍

    "一个现代的,开源的,了解网页设计的编辑器"这是官方的宣传语。也就是说它适用于网页开发,包含了许多亮点功能:实时预览(Live Preview)、内联编辑(Inline Edit)、多行编辑(Multiple Selections)、快速文档(Quick Document)。它是基于Chrominu V8引擎运行的软件,在实际使用过程中偶尔会有卡顿(i5处理器+4G内存+固态硬盘);

    官方网址:http://brackets.io/
    官方使用教程:https://github.com/adobe/brackets/wiki/How-to-Use-Brackets
    多重选择教程:https://github.com/adobe/brackets/wiki/Working-with-Multiple-Selections
    Top100插件:http://brackets.dnbard.com/extensions


    坠入爱河

    实时预览、行内编辑
    神奇的Brackets


    基本使用

    打开一个文件夹就可以作为项目进行开发了,File -> Open Folder就可以进行项目开发了

    编辑(Edit)

    快捷键 功能 详细描述
    ctrl + l 选择行 非选中状态则选择当前行,选中状态执行会添加选中下一行
    ctrl + [ / ] 缩进/反缩进
    ctrl + d 重复当前行 未选中状态,复制当前行;选中状态复制选中区域
    ctrl + shift + d 删除当前行
    ctrl + shift + 上/下箭头 上下移动当前行
    ctrl + / 或 ctrl + shift + / 注释当前或取消注释 非选中状态下,处理当前行;否则处理选中区域
    ctrl + space 显示代码提示 中文输入法占用了此快捷键,可自定义快捷键

    导航(Navigation)

    快捷键 功能 详细描述
    ctrl + alt + [/] 代码折叠或展开
    alt + 1 折叠所有代码
    ctrl + alt + o 文档跳转 跳转到某个文件
    ctrl + g 行跳转 等价于在文档跳转中输入:
    ctrl + T 符号跳转 跳转到定义的符号,比如css选择器,js方法,变量,等价于文档跳转输入@
    ctrl + e 快速编辑 不离开当前文件进行外部文件的查看和修改

    它的美

    多重选择

    多重选择,意味着你可以一次修改的多处代码,Esc键取消多重编辑

    • 分隔选中到行:选中文本状态下,按ctrl + alt + l
      行分隔
      "选中后,按ctrl + alt + l")

    • 连续选择:alt + 鼠标拖动
      连续选择

    • 断续选择:ctrl + 鼠标点击
      断续选中

    实时预览

    Brackets支持两种预览方式,均是基于chrome浏览器提供的开发者调试功能,所以只支持chrome实时浏览,一使用内置的静态服务器,二使用服务器(通常是本地)

    • 内置静态服务器:支持css/html修改,以及less/sess
    • 远程服务器:通常是本地,需要设置File -> project setting指定当前页面的url

    注: 快捷键 ctrl + alt + p

    行内编辑

    不离开上下文即可编辑外部文件,例如在html页面就可以修改某元素的css、css文件内就可以使用取色器修改颜色、js可以修改外部的js文件;

    行内编辑

    注: 快捷键 ctrl + e


    代码提示

    html支持标签和属性的提示,css支持key和value的提示,js提示很好,默认使用Jshit进行代码检测


    插件

    使用包管理器进行插件安装,右侧Extension Manager。在线选中安装、从指定url中安装、本地安装,由于国内网络的原因部分插件可能无法下载;推荐以下插件:

    名称 作用
    名称 功能
    代码编写
    *Emmet 快速编写HTML代码
    Autoprefixer CSS自动补全前缀,实现浏览器兼容
    *Markdown Preview mardkdown实时预览
    代码处理
    *Beautify HTML、CSS、JavaScript代码格式化
    JSLint javaScript检查,brackets已经内置了
    JSHint javaScript检查
    *CSSLint CSS检查
    *HTMLHint HTML检查
    *JS CSS Minifier JS CSS文件压缩
    CanIUse 使用canIUse网站的数据,查看各个浏览器对css的支持程度
    版本控制
    Brackets Git brackets继承git,依然需要安装git才能使用
    外观
    Custom Work 自定工作空间,修改了文本标签为水平
    Minimap 像sublime一样能限时代码的缩略图
    brackets-power-mode 很火的代码输入特效,特效颗粒、闪屏,无声音
    Brackets Icons 文件列表对不同类型的文件前添加图标
    Indent Guides 代码层次的缩进线

    注:插件编写官方教程


    设置

    菜单仅仅能修改少量的设置,如:字体、主题等少量的。更多的设置需要修改json格式的配置文件,软件为中文语言状态下配置文件有中文注释。

    • 菜单Debug -> Open Preferences File进行设置
    • 菜单Debug -> Open User keyMap File进行设置

    总结

    • 跨平台:支持windows、linux、ox系统
    • 外观:Brackets可以说是源代码编辑器中的美人,它是基于浏览器的软件,它的UI就像网页一样绚丽多彩,同时又简洁大方
    • 运行速度:整体运行很流畅,偶尔会有1s左右的延迟
    • 代码处理:html支持标签和属性的提示,css支持key和value的提示,js提示很好,默认使用Jshit进行代码检测
    • 插件:插件丰富,很多功能可以使用插件完成,brackets自带了nodejs对于依赖于nodejs的插件不必额外安装nodejs
    • 发展前景:社区使用比较活跃,js编写插件,文档比较完善
    • 使用建议:做为后端开发人员不推荐长期使用,可以选择sublime做为轻量的源代码编辑器。使用过程中偶尔会有小bug,总之不要被工具左右,而要其为我所用
  • 相关阅读:
    什么是JDBC的最佳实践?
    如何将jquery对象转换为js对象?
    JQuery有几种选择器?
    jQuery 库中的 $() 是什么
    JS 中 == 和 === 区别是什么?
    有两张表;请用SQL查询,所有的客户订单日期最新的前五条订单记录?
    根据你以往的经验简单叙述一下MYSQL的优化?
    数据库MySQL分页时用的语句?
    LeetCode231-2的幂(水题,考察是否粗心)
    LeetCode191-位1的个数(题目有问题)
  • 原文地址:https://www.cnblogs.com/lkqm/p/6434913.html
Copyright © 2020-2023  润新知