从 Sublime Text 过渡到 Brackets

自3164版本开始，轻巧美观的 Sublime Text 不注册就无法使用了，网络上所流出的激活码基本上也都已经被封殆尽。要想再使用它基本上也就只有两种方法了，付费与破解(偷偷提示一下：其实用版本2的注册码来注册版本3依然有效，且版本2的激活码很多都没有被封，只不过顶部会提示“LICENSE UPGRADE REQUIRED”)。不过就目前这趋势，倒不如早点投向 Brackets 、VS Code 或者 Atom 这几款免费的编辑器中去来的靠谱。

这三款软件都有接触过，总的来说都非常不错。但就我个人而言，Brackets 算是是用得比较舒服的。下面就来介绍介绍一下 Brackets。

安装及配置

Brackets 是 Adobe 旗下的一款代码编辑器，风格和其兄弟软件 Dreamweaver 有很多相似之处。不过 Brackets 是开源免费的，且提供多平台支持。 👉 前往官方下载

切换软件语言

Brackets 本身提供多语言配置，默认语言为英文，你可以在 Debug > Switch Language 中切换到你需要的语言来显示。

Brackets 扩展

Brackets 扩展的安装方法有两种：

从软件的扩展管理器中直接搜索、安装。
从官网Brackets Extension Registry 或者 Github 上搜索下载对应的 zip 压缩文件，然后直接拖到软件的扩展管理器中即可安装。

虽然官网上 Brackets 软件本身的下载源用的是https://github.com/adobe/brackets/releases/，但官网扩展以及软件扩展管理器中扩展的下载源都用的是https://s3.amazonaws.com/extend.brackets/。这个下载源在国内多数情况是被屏蔽状态，所以你可能需要翻-墙。

不想或没办法翻-墙的话，你就只能在 Github 上搜索下载 zip格式压缩包再安装。漫无目的地一个一个找可能比较麻烦，这个网站可以帮到你 👉 http://ingo-richter.io/BracketsExtensionTweetBot/ 虽然已经久未更新了。

下面是我的一些扩展：

VSCode Dark 算是用过的最舒服的一个主题了。
Brackets Markdown Preview 提供 markdow 文件实时预览功能。一栏编辑，一栏显示。
Beautify 从排版格式上美化你的代码，使之易于阅读。
Indent Guides 在每个标签的起始处与闭合处添加一条辅助线，辅助阅读。
Emmet 快速编码神器。
Autoprefixer 自动补全兼容前缀，让CSS适配不同浏览器。
W3C Validation (by Umoxfo) 检测代码是否合乎 W3C 标准。
HTML5 Template 再页面内插入 HTML5 模板（带有响应式相关标签）
Color Highlighter 将 css 等样式文件中的色彩值以其自生色彩颜色为背景高亮显示。
Smart JSDoc Comment
ColorKeeper 在界面底部自定义一个色板，方便快捷取得预定义色彩。
Display Shortcuts 提供了一个快捷键对应表以供显示。
bracket-color-finder
AEM Brackets Extension 详细说明见AEM Brackets Extension
Brackets Outline List 在侧边栏显示节点树，可快速定位到某行对应的代码。
Brackets Vue
BracketstoIX
Brackets SASS

快捷键配置

👉 官方 WIKI - User Key Bindings

参考以上 Wiki 中的配置说明，你可以轻松的将你的 Brackets 快捷键配置成 Sublime Text 的使用风格。

同时，上文中的 Display Shortcuts 扩展提供了显示快捷键表格的功能，通过 help > Show Shortcuts 可以调出快捷键表格。

特色内置功能

快速编辑(Quick Edit)功能

快速编辑Ctrl+E相当于一个功能集合，主要包括四个方面的功能： 取色器、HTML、JavaScript、CSS(CSS/LESS/SCSS)

取色器
取色器对任意类型文件*(只要该文件中存在任意格式的颜色值[包括：hex / rgb / rgba / hsl / hsla];如若没有，你可以先随便写入一个)*都有效。
只需将光标移入颜色值上，然后按下快捷键 Ctrl+E 即可调取任意颜色。
HTML
可针对 HTML 文件中的 标签名、id属性、class属性 来调出某个元素标签与这三种选择符对应的 css样式。
只需将光标移入以上三者任一之上，然后按下快捷键 Ctrl+E 即可编辑操作。

如果某个元素标签匹配多种选择符，其所有样式规则都会以对应的组合选择符在右侧列出。
如果还没有样式，单击新建规则(New Rule)按钮或者Ctrl+Alt+N可以创建新的样式。

JS
可以针对 JS 文件中的函数名称调出该函数主体（即使它是在其他js文件中创建的也可以）。
CSS(CSS / LESS / SCSS)
可以针对样式文件中的过度时间函数cubic-bezier()或steps()，调出其转换曲线的图形化编辑器。预先定义的时间函数 ease，ease-in，ease-out，ease-in-out，step-start，和 step-end 也是有效的作用点。

快速文档(Quick Docs)

快速文档Ctrl+K功能就相当于一个 HTML 与 CSS(CSS/LESS/SCSS) 的知识文档储备库。

当你对某个标签元素或属性/属性值不熟悉的时候，只需将光标移至其上，然后按下快捷键 Ctrl+K，即可在该行代码下面显示出相关文档的相关知识点。

实时预览

对于实时预览功能而言，普通使用基本无需配置。如果想要在 SASS / LESS 样式环境下依然有效，则需要以下扩展来完成。相应的，你需要按装 Brackets SASS 或者 LESS AutoCompile。

其他

关于 JSLint 与 ESLint

Brackets 自带 JSLint 与 ESLint 扩展，作为 js 与 es6 的代码质量检测工具。

在 JSLint 中将 console 和 alert、prompt、confirm 视为 development 方法，需要我们打开 development 模式才允许使用，打开方式是使用规则：devel:true；否则会有错误提示。

同类型的检测工具还有 JSHint 与 ESHint, 与前两者的区别请参考 👉 JSHint 与 JSLint 的区别与选择

Contents