Sublime Text3 和Atom相關插件的安裝和使用

Sublime Text3

一、Sublime Text3安裝preap主題

Sublime Text3作爲前端開發的神器，一直備受fer的青睞。下面給Sublime Text3安裝preap主題來替換默認主題。
先上圖：

安裝

1. 通過Package Control安裝，先安裝Package 然後再搜索preap直接安裝。或者直接下載安裝包https://github.com/equinusocio/preap/releases/tag/v1.2.8 ，然後改名“Preap”,放到Packages目錄下。

2. 修改Settings-User文件

用如下配置替換該文件保存，主題替換成功。

{
    "color_scheme": "Packages/User/SublimeLinter/Preap (SL).tmTheme",
    "findreplace_small": true,
    "font_size": 14,
    "ignored_packages":
    [
        "Vintage"
    ],
    "sidebar_default": false,
    "sidebar_font_big": true,
    "sidebar_font_small": false,
    "sidebar_large": true,
    "sidebar_xlarge": false,
    "static_modified_tab": true,
    "tabs_border": false,
    "tabs_medium": true,
    "tabs_small": false,
    "theme": "preap.sublime-theme"
}

文章來源：https://packagecontrol.io/packages/Preap

二、利用 Node.js 添加 JavaScript 控制檯

1. 首先需要安裝node，可以查看這裏！

2. 打開Sublime Text，選擇 Tools > Build System > New Build System
   

   粘貼以下內容並保存爲Node.sublime-build，或者其他名字：

{

"cmd": ["node", "$file"],

"selector": "source.js"

}

在 Tools > Build System 裏選擇剛剛創建好的“Node”，按下Command + B就可以調試了.

三、使用Sublime Text 3的HTML-CSS-JS Prettify插件格式化代碼

1. 這個插件依然基於node，同樣需要先安裝node。
2. 通過package安裝 HTML-CSS-JS Prettify
3. 安裝完後在打開的文件裏面右鍵HTML/CSS/JS Prettify > Set Plugin Options保證插件路徑與Node.js安裝路徑一致，Ctrl+s保存!
   
   然後通過鼠標右鍵HTML/CSS/JS Prettify > Prettify Code格式化代碼。

Atom

最近嘗試了下Atom，感覺相當不錯，這款基於web技術開發的editor，並且擁有github的強大後盾，雖然目前性能上不是太好，但相信以後應該會更出色。
哦，還有完全開源，各種package。。。

related links

• 官網
• 社區
• github
• Downloads

related packages

• https://github.com/kompasim/atom-plugins

Atom 快捷鍵

文件切換
ctrl-shift-s 保存所有打開的文件
cmd-shift-o 打開目錄
cmd-\ 顯示或隱藏目錄樹
ctrl-0 焦點移到目錄樹
目錄樹下，使用a，m，delete來增加，修改和刪除
cmd-t或cmd-p 查找文件
cmd-b 在打開的文件之間切換
cmd-shift-b 只搜索從上次git commit後修改或者新增的文件

導航
（等價於上下左右）
ctrl-p 前一行
ctrl-n 後一行
ctrl-f 前一個字符
ctrl-b 後一個字符
alt-B, alt-left 移動到單詞開始
alt-F, alt-right 移動到單詞末尾
cmd-right, ctrl-E 移動到一行結束
cmd-left, ctrl-A 移動到一行開始
cmd-up 移動到文件開始
cmd-down 移動到文件結束
ctrl-g 移動到指定行 row:column 處
cmd-r 在方法之間跳轉

書籤
cmd-F2 在本行增加書籤
F2 跳到當前文件的下一條書籤
shift-F2 跳到當前文件的上一條書籤
ctrl-F2 列出當前工程所有書籤

選取
大部分和導航一致，只不過加上shift
ctrl-shift-P 選取至上一行
ctrl-shift-N 選取至下一樣
ctrl-shift-B 選取至前一個字符
ctrl-shift-F 選取至後一個字符
alt-shift-B, alt-shift-left 選取至字符開始
alt-shift-F, alt-shift-right 選取至字符結束
ctrl-shift-E, cmd-shift-right 選取至本行結束
ctrl-shift-A, cmd-shift-left 選取至本行開始
cmd-shift-up 選取至文件開始
cmd-shift-down 選取至文件結尾
cmd-A 全選
cmd-L 選取一行，繼續按回選取下一行
ctrl-shift-W 選取當前單詞


編輯和刪除文本

基本操作
ctrl-T 使光標前後字符交換
cmd-J 將下一行與當前行合併
ctrl-cmd-up, ctrl-cmd-down 使當前行向上或者向下移動
cmd-shift-D 複製當前行到下一行
cmd-K, cmd-U 使當前字符大寫
cmd-K, cmd-L 使當前字符小寫

刪除和剪切
ctrl-shift-K 刪除當前行
cmd-backspace 刪除到當前行開始
cmd-fn-backspace 刪除到當前行結束
ctrl-K 剪切到當前行結束
alt-backspace 或 alt-H 刪除到當前單詞開始
alt-delete 或 alt-D 刪除到當前單詞結束

多光標和多處選取
cmd-click 增加新光標
cmd-shift-L 將多行選取改爲多行光標
ctrl-shift-up, ctrl-shift-down 增加上（下）一行光標
cmd-D 選取文檔中和當前單詞相同的下一處
ctrl-cmd-G 選取文檔中所有和當前光標單詞相同的位置

括號跳轉
ctrl-m 相應括號之間，html tag之間等跳轉
ctrl-cmd-m 括號(tag)之間文本選取
alt-cmd-. 關閉當前XML/HTML tag

編碼方式
ctrl-shift-U 調出切換編碼選項

查找和替換

cmd-F 在buffer中查找
cmd-shift-f 在整個工程中查找

代碼片段
alt-shift-S 查看當前可用代碼片段
在~/.atom目錄下snippets.cson文件中存放了你定製的snippets
定製說明

自動補全
ctrl-space 提示補全信息

摺疊
alt-cmd-[ 摺疊
alt-cmd-] 展開
alt-cmd-shift-{ 摺疊全部
alt-cmd-shift-} 展開全部
cmd-k cmd-N 指定摺疊層級 N爲層級數

文件語法高亮
ctrl-shift-L 選擇文本類型

使用Atom進行寫作
ctrl-shift-M Markdown預覽
可用代碼片段 b, legal, img, l, i, code, t, table