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
快捷键配置
👉 官方 WIKI - User Key Bindings
参考以上 Wiki 中的配置说明,你可以轻松的将你的 Brackets 快捷键配置成 Sublime Text 的使用风格。
同时,上文中的 Display Shortcuts
扩展 提供了显示快捷键表格的功能,通过 help > Show Shortcuts
可以调出快捷键表格。
特色内置功能
快速编辑(Quick Edit)功能
快速编辑<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)
快速文档<kbd>Ctrl+K</kbd>功能就相当于一个 HTML 与 CSS(CSS/LESS/SCSS) 的知识文档储备库。
当你对某个 标签元素 或 属性/属性值 不熟悉的时候,只需将光标移至其上,然后按下快捷键 <kbd>Ctrl+K</kbd>,即可在该行代码下面显示出相关文档的相关知识点。
实时预览
对于实时预览功能而言,普通使用基本无需配置。如果想要在 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 的区别与选择