Web前端开发-SublimeText2使用心得

Yan.ju 1 、 开 发 工 具 Html Css javaScript2 、 三 要 素 Notepad+ Sublime Text 2 1 、 Sublime Text 2 前 言 作 为 一 个 前 端 ， 有 一 款 好 的 开 发 利 器 是 必 不 可 少 的 ， editplus、 notepad+都 是 不 错 的 工 具 ， 体 积 轻 巧 ， 启 动 迅 速 （ dw太 浮 肿 了 ） 。 最 近 ， 又 有 一 款 新 的编 辑 器 诞 生 ， 席 卷 前 端 界 ， 惹 得 无 数 喜 爱 ， 不 少 前 端 er纷 纷 抛 弃 用 了 数 年 的 “ 伙伴 ” ， 投 入 了 她 的 怀 抱 Sublime Text2。 Sublime Text2是 一 款 跨 平 台 的 编 辑器 ， 再 也 不 用 为 换 平 台 而 找 不 到 合 适 的 、 熟 悉 的 编 辑 器 担 忧 了 。 目 前 ， 还 是 beta 版 中 ， 不 过 功 能 已 经 很 强 大 了 ， 更 新 也 很 快 ， 目 前 最 新 是 bulid2181。 ST2不 是免 费 的 ， 但 可 以 永 久 免 费 使 用 ， 只 是 在 保 存 的 时 候 ， 偶 尔 会 弹 出 要 你 购 买 注 册 的对 话 框 ， 仅 此 而 已 。 官 网 地 址 ： http:/ 功 能 Sublime Text2 是 一 款 具 有 代 码 高 亮 、 语 法 提 示 、 自 动 完 成 且 反 应 快 速 的编 辑 器 软 件 ， 不 仅 具 有 华 丽 的 界 面 ， 还 支 持 插 件 扩 展 机 制 。 界 面从 上 到 下 ： 标 题 栏 、 菜 单 栏 、 tab控 制 栏 、 编 辑 区 、 状 态 栏从 做 到 右 ： 分 别 是 边 栏 、 编 辑 区 、 MiniMap菜 单 栏 ： 各 种 命 令 ， 各 种 设 置 。 Tab栏 ： 很 多 编 辑 器 都 有 的 ， 如 果 文 件 编 辑 过 未 保 存 ， 右 上 角 有 个 小 圆 点 提 示 保 存 ， 如 果 未 保 存 关了 也 不 用 害 怕 ， ST2很 贴 心 ， 会 帮 我 们 自 动 保 存 。编 辑 区 ： 这 是 我 们 主 要 的 工 作 区 域 ， ST2支 持 代 码 自 动 缩 进 ， 代 码 折 叠 功 能 。介 绍 几 个 常 见 的 功 能 ：自 动 完 成 ： 自 动 完 成 的 快 捷 键 是 Tab， 如 果 在 html文 件 中 ， 输 入 cl按 下 tab， 即 可 自 动 补 全 为class=” ”多 列 编 辑 ： 按 住 ctrl点 击 鼠 标 ， 会 出 现 多 个 闪 烁 的 光 标 ， 这 时 可 同 时 修 改 多 处 或 者 按 住 鼠 标 中 键 拖 拽 ， 代 码 注 释 功 能 ： ctrl+/、 ctrl+shift+/分 别 未 行 注释 和 块 注 释 ， 再 按 一 下 就 能 去 掉 注 释 ， ST2能够 自 动 识 别 是 html、 css还 是 js文 件 ， 给 出 不 同类 型 的 注 释 。行 操 作 ： ctrl+alt+、 ctrl+alt+向 上 或 者 向 下 交换 两 行 ， ctrl+enter， 光 标 后 插 入 空 行 ， ctrl+d选 择 相 似 ， 可 以 参 考 后 面 的 快 捷 键 列 表 。右 键 功 能 ： 前 3个 ， 大 家 都 知 道 ， 第 4个 ， show unsaved changes， 显 示 未 保 存 的 修 改 ， 红 色 减号 表 示 删 去 的 内 容 ， 绿 色 加 号 表 示 新 增 的 内 容 Open Containing Folder ， 打 开 包 含 此 文 件 的 文 件 夹 ， 这 个 很 方 便 找 到 相 关 的 文 件Copy File Path， 复 制 文 件 路 径 ， 方 便 我 们 复 制 路 径 到 浏 览 器 中 查 看Auto-Format Tags on Selection 格 式 化 选 中 的 文 档 ， 方 便 我 们 更 清 晰 的 查 看 代 码 结 构 ，虽 然 ST2有 自 动 缩 进 功 能 ， 但 是 当 我 们 粘 贴 进 一 段 没 有 格 式 化 过 的 代 码 ， 就 需 要 这 个 能 了 ，这 个 功 能 要 安 装 了 Tag这 个 插 件 才 会 出 现 。人 性 化 设 计 ： ST2虽 然 还 是 beta版 中 ， 但 是 有 很 多 设 计 细 节 还 是 值 得 称 赞 的 ， 比 如 点 击 一个 标 签 或 者 括 弧 ， 会 在 起 始 处 显 示 下 划 点 线 ， 方 便 看 清 代 码 结 果 ， 每 一 层 嵌 套 代 码 间 都 有竖 线 ， 起 到 视 觉 辅 助 的 作 用 。 Sublime text2 在 bulid2181后 ， 对 【 设 置 】 进 行 了 合 并 ， 现 在只 有 两 个 选 项 ， 分 别 是 系 统 设 置 和 快 捷 键 设 置 。一 般 我 们 修 改 设 置 的 话 ， 最 好 复 制 出 来 在 user里 修 改 ， 以 免 以 后升 级 default被 覆 盖 掉 。Settings： 在 此 文 件 里 ， 可 以 修 改 很 多 东 西 ， 比 如 主 题 ， 字 体 ，字 号 ， 是 否 显 示 行 号 、 自 动 缩 进 、 自 动 完 成 。 很 多 都 默 认 选 中 了 ，我 另 外 修 改 了 两 个 地 方 ：98行 显 示 缩 略 图 边 框 101行 光 标 当 前 行 高 亮 显 示有 助 于 我 们 快 速 找 到 光 标 位 置 。Key Bindings： 快 捷 键 设 置 ， ST2的 快 捷 键 很 多 ， 改 的 时 候 注 意 不 要 覆 盖 了 。 因 为 快 捷键 众 多 ， 所 以 有 下 面 这 种 组 合 快 捷 键 ， 先 按 下 ctrl+k， 松 开 k， 再 按 下 j就 可 以 展 开 全 部代 码 了 。 三 、 设 置 Ctrl+L 选 择 整 行 （ 按 住 -继 续 选 择 下 行 ）Ctrl+KK 从 光 标 处 删 除 至 行 尾Ctrl+Shift+K 删 除 整 行Ctrl+Shift+D 复 制 光 标 所 在 整 行 ， 插 入 在 该 行 之 前Ctrl+J 合 并 行 （ 已 选 择 需 要 合 并 的 多 行 时 ）Ctrl+KU 改 为 大 写Ctrl+KL 改 为 小 写Ctrl+D 选 词 （ 按 住 -继 续 选 择 下 个 相 同 的 字 符 串 ）Ctrl+M 光 标 移 动 至 括 号 内 开 始 或 结 束 的 位 置Ctrl+Shift+M 选 择 括 号 内 的 内 容 （ 按 住 -继 续 选 择 父 括 号 ）Ctrl+/ 注 释 整 行 （ 如 已 选 择 内 容 ， 同 “ Ctrl+Shift+/” 效 果 ） Ctrl+Shift+/ 注 释 已 选 择 内 容Ctrl+Z 撤 销Ctrl+Y 恢 复 撤 销Ctrl+M 光 标 跳 至 对 应 的 括 号 扩 展 主 要 快 捷 键 列 表 Alt+. 闭 合 当 前 标 签Ctrl+Shift+A 选 择 光 标 位 置 父 标 签 对 儿Ctrl+Shift+ 折 叠 代 码Ctrl+Shift+ 展 开 代 码Ctrl+KT 折 叠 属 性Ctrl+K0 展 开 所 有Ctrl+U 软 撤 销Ctrl+T 词 互 换Tab 缩 进 自 动 完 成Shift+Tab 去 除 缩 进 Ctrl+Shift+ 与 上 行 互 换Ctrl+Shift+ 与 下 行 互 换Ctrl+K Backspace 从 光 标 处 删 除 至 行 首Ctrl+Enter 光 标 后 插 入 行Ctrl+Shift+Enter 光 标 前 插 入 行Ctrl+F2 设 置 书 签F2 下 一 个 书 签Shift+F2 上 一 个 书 签 扩 展 主 要 快 捷 键 列 表 ST2是 支 持 插 件 扩 展 的 ， 首 先 ， 我 们 需 要 安 装 Package Contro， ctrl+调 出 命 令 行 工 具 ， 输 入 import urllib2,os;pf=Package Control.sublime-package;ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),wb).write(urllib2.urlopen(http:/ ,%20).read() 回 车 即 可 。点 击 Preferences Package Control， 显 示 以 下 弹 窗 ： 四 、 扩 展 n Disable Package ： 禁 用 插 件n enable Package ： 启 用 插 件n Install Package ： 安 装 插 件n List Package ： 查 看 已 安 装 插 件 列 表n Remove Package ： 移 除 插 件n Upgrade Package ： 升 级 插 件 插 件 推 荐 ZenCoding： 前 端 必 备 ， 快 速 开 发 HTML/CSS输 入 div.wrapperdiv.header+div.main+div.footer 按 下 Tab， 立 刻 变 成 或 者 按 下 ctrl+alt+enter， 激 发zencoding控 制 台 ， 可 看 到 整个 动 态 的 过 程 。 JsFormat， 格 式 化 js代 码 ， 这 个 插 件 很 有用 ， 我 们 有 时 在 网 上看 到 某 些 效 果 ， 想 查看 是 怎 么 实 现 的 ， 但是 代 码 被 压 缩 过 ， 很难 阅 读 ， 不 用 怕 ， 用ST2打 开 ， 按 下ctrl+alt+5（ 这 是 我设 置 的 快 捷 键 ） ， 即 可 让 代 码 还 原 。 Tag 格 式 化 标 签 ， 让 乱 七 八 糟 的 代 码 ，瞬 间 整 齐 清 晰 。BracketHighlighter， 括 弧 高 亮 显 示Clipboard History， 剪 切 板 历 史 ， 可以 保 存 多 个 复 制 信 息 ， 按 下ctrl+alt+v， 可 以 选 择 历 史 剪 切 板 Goto-CSS-Declaration， 跳 转 到 css文 件 该 class的 声 明 处 ， 方 便 修改 查 看 ， 如 图 下 所 示 ， 注 意 对 应 的 css文 件 要 同 时 打 开 才 行 。GotoRecent， 打 开 最 近 的 文 件 ， 系 统 有 这 个 功 能 ，但 只 能 看 最 近 8个 ， 有 点 不 爽 ， 按 ctrl+e， 选 择即 可 。SCSS， 支 持 scss的 语 法 高 亮 ， 里 面 附 带 了 好 多 CSS Snippet， 无 论 现 用 或 者 改 造 成 ， 都 可 节 省不 少 时 间 。还 有 很 多 插 件 ， jquery语 法 提 示 ， jsHint等 等 。 总 而 言 之 ， Sublime Text2是 一 款 不 错 的 代 码 编写 工 具 ， 有 好 看 的 ui， 人 性 化 的 细 节 设 计 ， 全 面 的 功能 和 扩 展 机 制 ， 如 果 你 还 没 用 过 ， 请 试 一 下 ， 不 会 让你 失 望 的 。 如 果 说 有 什 么 缺 点 的 话 ， ST2目 前 对 ANSI、GBK的 汉 字 显 示 不 正 常 ， （ 使 用 utf8编 码 就 没 问 题 ，package control里 有 一 个 gbk插 件 ） 。 五 、 结 语