从 Sublime Text 过渡到 Brackets
tags:
- Brackets
- Code Editor
- 编辑器
- Sublime Text3
自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
image
快捷键配置
👉 官方 WIKI - User Key Bindings
参考以上 Wiki 中的配置说明，你可以轻松的将你的 Brackets 快捷键配置成 Sublime Text 的使用风格。
同时，上文中的 Display Shortcuts 扩展 提供了显示快捷键表格的功能，通过 help > Show Shortcuts 可以调出快捷键表格。
特色内置功能
快速编辑(Quick Edit)功能
image
快速编辑<kbd>Ctrl+E</kbd>相当于一个功能集合，主要包括四个方面的功能： 取色器、HTML、JavaScript、CSS(CSS/LESS/SCSS)
-
取色器
取色器对任意类型文件(只要该文件中存在任意格式的颜色值[包括：hex / rgb / rgba / hsl / hsla];如若没有，你可以先随便写入一个)都有效。
只需将光标移入颜色值上，然后按下 快捷键 <kbd>Ctrl+E</kbd> 即可调取任意颜色。
-
HTML
可针对 HTML 文件中的标签名、id属性、class属性来调出某个元素标签与这三种选择符对应的 css样式。
只需将光标移入以上三者任一之上，然后按下 快捷键 <kbd>Ctrl+E</kbd> 即可编辑操作。
如果某个元素标签匹配多种选择符，其所有样式规则都会以对应的组合选择符在右侧列出。
如果还没有样式，单击新建规则(New Rule)按钮或者<kbd>Ctrl+Alt+N</kbd>可以创建新的样式。
-
JS
可以针对 JS 文件中的函数名称调出该函数主体（即使它是在其他js文件中创建的也可以）。
-
CSS(CSS / LESS / SCSS)
可以针对样式文件中的过度时间函数cubic-bezier()或steps()，调出其转换曲线的图形化编辑器。
预先定义的时间函数 ease，ease-in，ease-out，ease-in-out，step-start，和 step-end 也是有效的作用点。
快速文档(Quick Docs)
image
快速文档<kbd>Ctrl+K</kbd>功能就相当于一个 HTML 与 CSS(CSS/LESS/SCSS) 的知识文档储备库。
当你对某个 标签元素 或 属性/属性值 不熟悉的时候，只需将光标移至其上，然后按下快捷键 <kbd>Ctrl+K</kbd>，即可在该行代码下面显示出相关文档的相关知识点。
实时预览
对于实时预览功能而言，普通使用基本无需配置。如果想要在 SASS / LESS 样式环境下依然有效，则需要以下扩展来完成。 相应的，你需要按装 Brackets SASS 或者 LESS AutoCompile。
其他
关于 JSLint 与 ESLint
image
Brackets 自带 JSLint 与 ESLint 扩展，作为 js 与 es6 的代码质量检测工具。
在 JSLint 中将 console 和 alert、prompt、confirm 视为 development 方法，需要我们打开 development 模式才允许使用，打开方式是使用规则：devel:true；否则会有错误提示。
同类型的检测工具还有 JSHint 与 ESHint, 与前两者的区别请参考 👉 JSHint 与 JSLint 的区别与选择
