一個超棒的編輯器 -- Sublime Text

以下是 Sublime Text 2 的常見使用方法:


新建文件   Ctrl+N


複製一行   Edit -> Line -> Duplicate Line
刪除一行   Edit -> Line -> Delete Line
多次複製   Ctrl+Shift+D

註釋/解除註釋   Edit -> Comment -> Toggle Comment

在當前行下方插入新行   Edit -> Text -> Insert Line After  (Ctrl+Enter)
在當前行上方插入新行   Edit -> Text -> Insert Line Before  (Ctrl+Shift+Enter)

關閉標籤   Edit -> Tag -> Close Tag  (Alt+.)

選擇整行   Selection -> Expand Selection to Line
選擇整個單詞   Selection -> Expand Selection to Word
(重複執行命令可以實現多選)

查找   Find -> Find…   (回車可以切換查找結果)
查找替換   Find -> Replace… (Ctrl+H)

顯示側邊欄   View -> Side Bar -> Show Side Bar

隱藏側邊欄   View -> Side Bar -> Hide Side Bar


打開目錄結構  File -> Open Folder...


快速導航   Goto -> Goto Anything…  (Ctrl+P)
{
   如輸入":20"可以跳轉到20行;
   如輸入"index.html"可以找到該文件;
   如輸入"@"可以找到CSS文件中的所有選擇器,也可以找到js文件中的所有函數;
   如輸入"#body"可以導航到頁面中的body標籤;
   支持模糊匹配;
}

命令模式   Tools -> Command Palette… (Ctrl+Shift+P)
{
   如輸入"Set Syntax JavaScript"可以把當前的語法模式變成JavaScript;
         另外,切換語法模式也可以通過編輯器右下角的語法選擇區進行選擇;
   如輸入"minimap"可以隱藏/顯示屏幕右上角的minimap;
   支持模糊匹配;
}

默認設置文件   Preferences -> Settings-Default
用戶設置文件   Preferences -> Settings-User

顏色組合   Preferences -> Color Scheme

多行遊標   Ctrl+D     跳過當前遊標   Ctrl+K Ctrl+D
通過選擇所有該單詞產生多行遊標   Alt+F3
通過拆行的方式產生多行遊標   Ctrl+A   Ctrl+Shift+L

通過鼠標拖動產生多行遊標   Shift+鼠標右鍵


退回  Ctrl+Z
不亂格式的粘貼  Ctrl+Shift+V


安裝插件 Package Control

打開官網 https://packagecontrol.io/,點擊 Install Now,
在Sublime中,點擊 View -> Show Console
複製SUBLIME TEXT 3(或2,據自己編輯器的版本而定)下的代碼,粘貼到Console中,回車,等待安裝完成重啓sublime
在命令模式中輸入"Package Control",可以看到很多的命令,如:
      Install Package安裝新插件 List Package列出安裝過的插件 Remove Package刪除插件 Disable Package禁用插件

以下介紹 Package Control 的幾款插件:


Emmet 插件
輸入"!",按"Ctrl+E"可快速生成html5的模板
輸入"ul>.item$*10",按"Ctrl+E"可快速生成類名爲item1-item10的無序列表


安裝主題 點擊Install Package,輸入"theme",在顯示的列表中選擇要安裝的主題,如Theme-Spacegray 插件,通常安裝完成會出現一個配置文件,按其中要求修改個人設置

安裝之前先在Package Control官網上看看主題的樣式,在Labels下點擊theme即可查看

snippets 快速編碼,不同的語言snippets是不同的,以js爲例,
在命令模式中輸入snippet,選擇snippet:Function,回車即產生一個函數模板
以插件形式啓動的snippet,如安裝 JavaScript & NodeJS snippets 插件,然後就可以使用這個插件提供的snippet了

如輸入"gi",就會出現"getElementById"提示


如安裝 jQuery 插件可以簡化jQuery編碼

如安裝 Insert Callback 插件 ,則可以用"Alt+C"快速添加回調函數

管理/更新類庫(如jQuery)
安裝 nettus fetch 插件
在命令模式中輸入Fetch:Manage可以管理類庫
如何使用fetch來快速下載最新版本的jQuery:新建一個空文件jQuery.js,打開它,在命令模式中輸入Fetch:File命令,回車即可下載

快速添加註釋
安裝 DocBlockr 插件
輸入"/*",回車,自動補全註釋塊
輸入"/**",回車,自動補全註釋塊

在函數上方輸入"/**",按Tab鍵,可自動補全描述函數的註釋格式


設置快捷鍵來進行單行註釋和塊註釋

Preferences -> Key Binders - User

添加

{ "keys": ["alt+3"], "command": "toggle_comment", "args": { "block": false } },
{ "keys": ["alt+4"], "command": "toggle_comment", "args": { "block": true } }

即可設置爲 alt+3 爲單行註釋,alt+4 爲塊註釋


HTML-CSS-JS Prettify 插件,格式化代碼

下載安裝 Node.js,官網地址:https://nodejs.org/en/

鼠標右鍵 HTML/CSS/JS Prettify > Set Plugin Options 保證插件路徑與 Node.js 安裝路徑一致,Ctrl+s 保存

鼠標右鍵 HTML/CSS/JS Prettify > Prettify Code 查看效果

如果報錯:Node.js was not found in the default path. Please specify the location,

參考這個:http://jingyan.baidu.com/article/e8cdb32b3f32f237052badfe.html









發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章