第一次看到这货, 我很惊讶, 何德何能? 竟然能力压群芳: emacs, atom, vscode, sublime, 获得mdn官方推荐?
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software

我的第一印象

工具: mdn官方推荐的是brackets, 简单试用了一下, 颇有独到之处. 稍微看了一下入门的文档, 实话说, 这货太棒了.

  • quick edit 就像再chrome调试一样, 可以直接集合所有本元素生效的css给你编辑, 不仅仅是css, 其他内容也可以.
  • living preview 就像再chrome里面调试一样, 可以直接显示代码的结果.
  • highlight not only code, but also preview. 可以highlight正在编辑的内容.

综合感觉就是, 在这里面开发就仿佛再chrome里面直接调试代码, 太爽了.

第二印象

实际使用中, 我发现这货还是需要一些配置的. 那么, 随着我的使用, 咱们一起来吧.

需要翻墙

这个软件要想正常使用, 需要很多插件, 比如他自身连auto indent都需要插件提供. emmet就更需要安装了. 因此他需要:

  • 全局翻墙
  • 不做全局翻墙, 啥都干不了, 设置于无法加载他的extension manager.
  • 而且以我的经验ss都不大好使, 我最终是用云墙才正常加载插件.
安装和配置
  1. emmet, 惊讶的发现emmet取消收费了, 虽然我曾经购买过lisence.
  2. 为了自动格式化, 装了beautify和indertator.
  3. 并且从菜单可以直接 install command line shortcut, 然后就可以类似 code xxxx , mate xxxx, 这样: brackets xxx. 话说他的shortcut还是有点太长了.
然后发现两个问题:
  1. living preview对于js的改变无效.
  2. 我需要修改快捷键, 我期望brackets的自动格式化和vscode以及sublime保持一致, shift option f.

问题需要一个一个解决, 我们先来: living preview:

  • html的livingpreview是ok的.
  • css也是ok的.
  • 官方文档有说明: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#live-preview
  • 如果不是html, 那么需要保存文件才会刷新展示.
  • 可以通过再次点击view ->living preview highlight, 取消highlight显示.
  • 疼过project setting 可以设置preview通过你自己的后端服务器.
  • 有一个选项experimental preview.
    • 这个是为了多浏览器支持做的.
    • 我开了这个, dev tools里面的source依旧不更新?
  • js 官方是这么说的:
    • For JavaScript and other external file types, when you save your changes, the page is reloaded to reflect your changes. For embedded JS, you will need to reload browser.
    • 好了, 不用纠结了. js还是用正常的调试方式吧. 除非一开始就分开文件写, 但是, 大家都知道js module有多坑, 代码不调好了, 我是不愿意先拆分的, 谁知道出啥事, 调好之后再拆分….. 看来是时候尝试webpack了.
    • 这里说的很清楚:
    • https://github.com/adobe/brackets/wiki/Troubleshooting#-live-preview-isnt-working

然后再解决preview的过程中我发现了文档keybord shortcut

  • https://github.com/adobe/brackets/wiki/Brackets-Shortcuts

    • 这里介绍了系统的快捷键绑定, 并不包括下面两个, 因为下面两个是我自己安装的插件,
    • 本身的快捷键是 ctrl option i
    • beauty的快捷键 shift cmd L

  • https://github.com/adobe/brackets/wiki/User-Key-Bindings

    • 修改快捷键: Debug > Open User Key Map
    • 看上面的官方文档就可以明白怎么改key.

  • 但是这里面有一个问题: extension的command id没有包括在内, 因此我们需要参考:

    • https://github.com/redmunds/brackets-display-shortcuts
    • 然后这货的菜单: help-> show shortcuts

  • 改了之后立马生效, 好爽:

    {
    "documentation": "https://github.com/adobe/brackets/wiki/User-Key-Bindings",
    "overrides": {
        "Opt-Shift-F":     "bb.beautify.beautify"
    }
}

至此不得不评价一句: brackets的菜单组织比较有个性, 他的树逻辑与众不同.

墙裂建议, 看下官方文档
  • https://github.com/adobe/brackets/wiki/How-to-Use-Brackets
  • 他们跟踪issue用的: https://trello.com/b/LCDud1Nd/brackets
关于emmet
  • 这个编辑器如果要使用emmet扩展, 需要先将文件扩展名改为html.
debug菜单

真的是在debug brackets自身:) 比如 show developer tools, 显示的就是brackets自身.

lint

jslint和eslint会莫名的报错:

expected an identifier and instead saw 'const'

官方答复是: jslint和eslint出问题了, 可以替换插件, 本人实测, 替换之后就好了.

"language": {
  "javascript": {
    "linting.prefer": [
      "JSHint"
    ],
    "linting.usePreferredOnly": true
  }
}

从15年到现在(2019)保持open状态, adobe恐怕是要放弃了? https://github.com/adobe/brackets/issues/11632