Web前端開發(fā)-SublimeText2使用心得

《Web前端開發(fā)-SublimeText2使用心得》由會員分享，可在線閱讀，更多相關(guān)《Web前端開發(fā)-SublimeText2使用心得（19頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

1、Yan.ju 1 、 開 發(fā) 工 具 Html Css javaScript2 、 三 要 素 Notepad+ Sublime Text 2 1 、 Sublime Text 2 前 言 作 為 一 個(gè) 前 端 ， 有 一 款 好 的 開 發(fā) 利 器 是 必 不 可 少 的 ， editplus、 notepad+都 是 不 錯(cuò) 的 工 具 ， 體 積 輕 巧 ， 啟 動(dòng) 迅 速 （ dw太 浮 腫 了 ） 。 最 近 ， 又 有 一 款 新 的編 輯 器 誕 生 ， 席 卷 前 端 界 ， 惹 得 無 數(shù) 喜 愛 ， 不 少 前 端 er紛 紛 拋 棄 用 了 數(shù) 年 的 “ 伙伴 ” ，

2、 投 入 了 她 的 懷 抱 Sublime Text2。 Sublime Text2是 一 款 跨 平 臺 的 編 輯器 ， 再 也 不 用 為 換 平 臺 而 找 不 到 合 適 的 、 熟 悉 的 編 輯 器 擔(dān) 憂 了 。 目 前 ， 還 是 beta 版 中 ， 不 過 功 能 已 經(jīng) 很 強(qiáng) 大 了 ， 更 新 也 很 快 ， 目 前 最 新 是 bulid2181。 ST2不 是免 費(fèi) 的 ， 但 可 以 永 久 免 費(fèi) 使 用 ， 只 是 在 保 存 的 時(shí) 候 ， 偶 爾 會 彈 出 要 你 購 買 注 冊 的對 話 框 ， 僅 此 而 已 。 官 網(wǎng) 地 址 ： http:

3、/ 功 能 Sublime Text2 是 一 款 具 有 代 碼 高 亮 、 語 法 提 示 、 自 動(dòng) 完 成 且 反 應(yīng) 快 速 的編 輯 器 軟 件 ， 不 僅 具 有 華 麗 的 界 面 ， 還 支 持 插 件 擴(kuò) 展 機(jī) 制 。 界 面從 上 到 下 ： 標(biāo) 題 欄 、 菜 單 欄 、 tab控 制 欄 、 編 輯 區(qū) 、 狀 態(tài) 欄從 做 到 右 ： 分 別 是 邊 欄 、 編 輯 區(qū) 、 MiniMap菜 單 欄 ： 各 種 命 令 ， 各 種 設(shè) 置 。 Tab欄 ： 很 多 編 輯 器 都 有 的 ， 如 果 文 件 編 輯 過 未 保 存 ， 右 上 角 有 個(gè) 小 圓

4、點(diǎn) 提 示 保 存 ， 如 果 未 保 存 關(guān)了 也 不 用 害 怕 ， ST2很 貼 心 ， 會 幫 我 們 自 動(dòng) 保 存 。編 輯 區(qū) ： 這 是 我 們 主 要 的 工 作 區(qū) 域 ， ST2支 持 代 碼 自 動(dòng) 縮 進(jìn) ， 代 碼 折 疊 功 能 。介 紹 幾 個(gè) 常 見 的 功 能 ：自 動(dòng) 完 成 ： 自 動(dòng) 完 成 的 快 捷 鍵 是 Tab， 如 果 在 html文 件 中 ， 輸 入 cl按 下 tab， 即 可 自 動(dòng) 補(bǔ) 全 為class=” ”多 列 編 輯 ： 按 住 ctrl點(diǎn) 擊 鼠 標(biāo) ， 會 出 現(xiàn) 多 個(gè) 閃 爍 的 光 標(biāo) ， 這 時(shí) 可 同 時(shí) 修

5、改 多 處 或 者 按 住 鼠 標(biāo) 中 鍵 拖 拽 ， 代 碼 注 釋 功 能 ： ctrl+/、 ctrl+shift+/分 別 未 行 注釋 和 塊 注 釋 ， 再 按 一 下 就 能 去 掉 注 釋 ， ST2能夠 自 動(dòng) 識 別 是 html、 css還 是 js文 件 ， 給 出 不 同類 型 的 注 釋 。行 操 作 ： ctrl+alt+、 ctrl+alt+向 上 或 者 向 下 交換 兩 行 ， ctrl+enter， 光 標(biāo) 后 插 入 空 行 ， ctrl+d選 擇 相 似 ， 可 以 參 考 后 面 的 快 捷 鍵 列 表 。右 鍵 功 能 ： 前 3個(gè) ， 大 家 都

6、 知 道 ， 第 4個(gè) ， show unsaved changes， 顯 示 未 保 存 的 修 改 ， 紅 色 減號 表 示 刪 去 的 內(nèi) 容 ， 綠 色 加 號 表 示 新 增 的 內(nèi) 容 Open Containing Folder ， 打 開 包 含 此 文 件 的 文 件 夾 ， 這 個(gè) 很 方 便 找 到 相 關(guān) 的 文 件Copy File Path， 復(fù) 制 文 件 路 徑 ， 方 便 我 們 復(fù) 制 路 徑 到 瀏 覽 器 中 查 看Auto-Format Tags on Selection 格 式 化 選 中 的 文 檔 ， 方 便 我 們 更 清 晰 的 查 看 代

7、碼 結(jié) 構(gòu) ，雖 然 ST2有 自 動(dòng) 縮 進(jìn) 功 能 ， 但 是 當(dāng) 我 們 粘 貼 進(jìn) 一 段 沒 有 格 式 化 過 的 代 碼 ， 就 需 要 這 個(gè) 能 了 ，這 個(gè) 功 能 要 安 裝 了 Tag這 個(gè) 插 件 才 會 出 現(xiàn) 。人 性 化 設(shè) 計(jì) ： ST2雖 然 還 是 beta版 中 ， 但 是 有 很 多 設(shè) 計(jì) 細(xì) 節(jié) 還 是 值 得 稱 贊 的 ， 比 如 點(diǎn) 擊 一個(gè) 標(biāo) 簽 或 者 括 弧 ， 會 在 起 始 處 顯 示 下 劃 點(diǎn) 線 ， 方 便 看 清 代 碼 結(jié) 果 ， 每 一 層 嵌 套 代 碼 間 都 有豎 線 ， 起 到 視 覺 輔 助 的 作 用 。

8、Sublime text2 在 bulid2181后 ， 對 【 設(shè) 置 】 進(jìn) 行 了 合 并 ， 現(xiàn) 在只 有 兩 個(gè) 選 項(xiàng) ， 分 別 是 系 統(tǒng) 設(shè) 置 和 快 捷 鍵 設(shè) 置 。一 般 我 們 修 改 設(shè) 置 的 話 ， 最 好 復(fù) 制 出 來 在 user里 修 改 ， 以 免 以 后升 級 default被 覆 蓋 掉 。Settings： 在 此 文 件 里 ， 可 以 修 改 很 多 東 西 ， 比 如 主 題 ， 字 體 ，字 號 ， 是 否 顯 示 行 號 、 自 動(dòng) 縮 進(jìn) 、 自 動(dòng) 完 成 。 很 多 都 默 認(rèn) 選 中 了 ，我 另 外 修 改 了 兩 個(gè) 地

9、方 ：98行 顯 示 縮 略 圖 邊 框 101行 光 標(biāo) 當(dāng) 前 行 高 亮 顯 示有 助 于 我 們 快 速 找 到 光 標(biāo) 位 置 。Key Bindings： 快 捷 鍵 設(shè) 置 ， ST2的 快 捷 鍵 很 多 ， 改 的 時(shí) 候 注 意 不 要 覆 蓋 了 。 因 為 快 捷鍵 眾 多 ， 所 以 有 下 面 這 種 組 合 快 捷 鍵 ， 先 按 下 ctrl+k， 松 開 k， 再 按 下 j就 可 以 展 開 全 部代 碼 了 。 三 、 設(shè) 置 Ctrl+L 選 擇 整 行 （ 按 住 -繼 續(xù) 選 擇 下 行 ）Ctrl+KK 從 光 標(biāo) 處 刪 除 至 行 尾Ctrl+

10、Shift+K 刪 除 整 行Ctrl+Shift+D 復(fù) 制 光 標(biāo) 所 在 整 行 ， 插 入 在 該 行 之 前Ctrl+J 合 并 行 （ 已 選 擇 需 要 合 并 的 多 行 時(shí) ）Ctrl+KU 改 為 大 寫Ctrl+KL 改 為 小 寫Ctrl+D 選 詞 （ 按 住 -繼 續(xù) 選 擇 下 個(gè) 相 同 的 字 符 串 ）Ctrl+M 光 標(biāo) 移 動(dòng) 至 括 號 內(nèi) 開 始 或 結(jié) 束 的 位 置Ctrl+Shift+M 選 擇 括 號 內(nèi) 的 內(nèi) 容 （ 按 住 -繼 續(xù) 選 擇 父 括 號 ）Ctrl+/ 注 釋 整 行 （ 如 已 選 擇 內(nèi) 容 ， 同 “ Ctrl+S

11、hift+/” 效 果 ） Ctrl+Shift+/ 注 釋 已 選 擇 內(nèi) 容Ctrl+Z 撤 銷Ctrl+Y 恢 復(fù) 撤 銷Ctrl+M 光 標(biāo) 跳 至 對 應(yīng) 的 括 號 擴(kuò) 展 主 要 快 捷 鍵 列 表 Alt+. 閉 合 當(dāng) 前 標(biāo) 簽Ctrl+Shift+A 選 擇 光 標(biāo) 位 置 父 標(biāo) 簽 對 兒Ctrl+Shift+ 折 疊 代 碼Ctrl+Shift+ 展 開 代 碼Ctrl+KT 折 疊 屬 性Ctrl+K0 展 開 所 有Ctrl+U 軟 撤 銷Ctrl+T 詞 互 換Tab 縮 進(jìn) 自 動(dòng) 完 成Shift+Tab 去 除 縮 進(jìn) Ctrl+Shift+ 與 上 行

12、 互 換Ctrl+Shift+ 與 下 行 互 換Ctrl+K Backspace 從 光 標(biāo) 處 刪 除 至 行 首Ctrl+Enter 光 標(biāo) 后 插 入 行Ctrl+Shift+Enter 光 標(biāo) 前 插 入 行Ctrl+F2 設(shè) 置 書 簽F2 下 一 個(gè) 書 簽Shift+F2 上 一 個(gè) 書 簽 擴(kuò) 展 主 要 快 捷 鍵 列 表 ST2是 支 持 插 件 擴(kuò) 展 的 ， 首 先 ， 我 們 需 要 安 裝 Package Contro， ctrl+調(diào) 出 命 令 行 工 具 ， 輸 入 import urllib2,os;pf=Package Control.sublime-pa

13、ckage;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() 回 車 即 可 。點(diǎn) 擊 Preferences Package Control， 顯 示 以 下 彈 窗 ： 四 、 擴(kuò) 展 n Disable Package ： 禁 用 插 件n enable Package ： 啟 用 插 件n Install Pac

14、kage ： 安 裝 插 件n List Package ： 查 看 已 安 裝 插 件 列 表n Remove Package ： 移 除 插 件n Upgrade Package ： 升 級 插 件 插 件 推 薦 ZenCoding： 前 端 必 備 ， 快 速 開 發(fā) HTML/CSS輸 入 div.wrapperdiv.header+div.main+div.footer 按 下 Tab， 立 刻 變 成 或 者 按 下 ctrl+alt+enter， 激 發(fā)zencoding控 制 臺 ， 可 看 到 整個(gè) 動(dòng) 態(tài) 的 過 程 。 JsFormat， 格 式 化 js代 碼 ， 這

15、 個(gè) 插 件 很 有用 ， 我 們 有 時(shí) 在 網(wǎng) 上看 到 某 些 效 果 ， 想 查看 是 怎 么 實(shí) 現(xiàn) 的 ， 但是 代 碼 被 壓 縮 過 ， 很難 閱 讀 ， 不 用 怕 ， 用ST2打 開 ， 按 下ctrl+alt+5（ 這 是 我設(shè) 置 的 快 捷 鍵 ） ， 即 可 讓 代 碼 還 原 。 Tag 格 式 化 標(biāo) 簽 ， 讓 亂 七 八 糟 的 代 碼 ，瞬 間 整 齊 清 晰 。BracketHighlighter， 括 弧 高 亮 顯 示Clipboard History， 剪 切 板 歷 史 ， 可以 保 存 多 個(gè) 復(fù) 制 信 息 ， 按 下ctrl+alt+v，

16、可 以 選 擇 歷 史 剪 切 板 Goto-CSS-Declaration， 跳 轉(zhuǎn) 到 css文 件 該 class的 聲 明 處 ， 方 便 修改 查 看 ， 如 圖 下 所 示 ， 注 意 對 應(yīng) 的 css文 件 要 同 時(shí) 打 開 才 行 。GotoRecent， 打 開 最 近 的 文 件 ， 系 統(tǒng) 有 這 個(gè) 功 能 ，但 只 能 看 最 近 8個(gè) ， 有 點(diǎn) 不 爽 ， 按 ctrl+e， 選 擇即 可 。SCSS， 支 持 scss的 語 法 高 亮 ， 里 面 附 帶 了 好 多 CSS Snippet， 無 論 現(xiàn) 用 或 者 改 造 成 ， 都 可 節(jié) 省不 少 時(shí)

17、 間 。還 有 很 多 插 件 ， jquery語 法 提 示 ， jsHint等 等 。 總 而 言 之 ， Sublime Text2是 一 款 不 錯(cuò) 的 代 碼 編寫 工 具 ， 有 好 看 的 ui， 人 性 化 的 細(xì) 節(jié) 設(shè) 計(jì) ， 全 面 的 功能 和 擴(kuò) 展 機(jī) 制 ， 如 果 你 還 沒 用 過 ， 請 試 一 下 ， 不 會 讓你 失 望 的 。 如 果 說 有 什 么 缺 點(diǎn) 的 話 ， ST2目 前 對 ANSI、GBK的 漢 字 顯 示 不 正 常 ， （ 使 用 utf8編 碼 就 沒 問 題 ，package control里 有 一 個(gè) gbk插 件 ） 。 五 、 結(jié) 語