## SublimeText - 編碼利器  打造趁手的兵器。 * * * * * ### SublimeText常用快捷鍵/技巧 | 序號 | 鍵 | 作用 | | --- | --- | --- | |1.| `Ctrl + F3` | 全選選中的內容 | |2.| `ctrl + /` | 注釋 | |3.| `按住鼠標滑輪 + (垂直)拖動` | 選擇多個光標/垂直選中代碼段| |4.| `按住Ctrl + 單擊` | 可以插入多個光標 | |5.| `tab` | 快速補全標簽（多功能觸發鍵，很多插件都用到它） | |6.| `tab （+選中代碼段）` | 向右格式移動代碼 | |7.| `shift + tab（+選中代碼段）` | 向左格式移動代碼 | |8.| `ctrl + m`：| 格式化html/css/js（我配置的插件格式化）| |9.| `shift + 方向` | 選中代碼 | |10.| `ctrl + 左右方向` | 快速移動光標到字符邊界 | |11.| `shift + ctrl + 左右方向` | 快速的選中代碼 | |12.| `shift + ctrl + 上下方向` | 上下移動行 | |13.| `雙擊` | 選中代碼（可以配置`-`也能選中） | |14.| `ctrl + d` | 刪除整行 | |15.| `ctrl + x` | 剪切整行 | |16.| `ctrl + c` | 復制選中代碼 | |17.| `ctrl + v` | 在光標處粘貼 | |18.| `alt + F3` | 全選所有高亮的代碼（千萬別按成F4了） | |19.| `ctrl + p` 輸入@fun | 可定位到函數 | （說明：版本不同，配置不同，部分快捷鍵可能和你的略有差別） > 快捷鍵的爽，說出來你也不懂，實際操作感受一下你就知道了。 附上我使用的Sublime Text 3：[Sublime Text 3 最新集成插件 2017-12-23 180530](https://pan.baidu.com/s/1pKM2iJx) >[tip] 注意設置下 查看 > 行尾 > Unix 。不然 編寫 linux 腳本時可能有問題。 * * * * * ### SublimeText常用插件 **最好用的字體**：`Consolas` **DocBlockr：** 文檔注釋 [Emmet](https://www.w3cplus.com/tools/emmet-cheat-sheet.html)：html,css代碼補全 **HTML-CSS-JS Prettify：** 前端必備代碼格式化插件 [**SublimeTextTrans**](https://github.com/vhanla/SublimeTextTrans )：SublimeText 透明插件 **jQuery：** jQuery **TAG html：** HTML/XML標簽縮進、補全、排版和校驗工具（前端提高效率必備） **TrailingSpace：** 高亮多余空格，強迫癥的福音 ``` [ { "keys": ["ctrl+alt+d"], "command": "delete_trailing_spaces" }, { "keys": ["ctrl+alt+o"], "command": "toggle_trailing_spaces" } ] ``` **Alignment：** 對齊等號 **SublimeTmpl：** 模板 **ConvertToUTF8：** gbk轉碼成utf-8，有效解決亂碼問題。 **cssrem：**[使用Flexible實現手淘H5頁面的終端適配_雙11前端技術連載, Layout, mobile 教程_w3cplus](http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html)、[flashlizi/cssrem: 一個CSS值轉REM的Sublime Text插件](https://github.com/flashlizi/cssrem) [**SublimeLinter**](https://segmentfault.com/a/1190000000389188)：代碼檢測工具，支持PHP、HTML、JS、CSS、C/C++、Java等大部分語言的檢查。 [**phpfmt**](https://github.com/nanch/phpfmt_stable)：php代碼規范格式化，PHPer必備 [ESLint](https://segmentfault.com/a/1190000010191802)（代碼質量控制工具，在編碼的時候就可以實時檢測前端項目代碼規范性。ESLint 是一個有效的代碼質量控制工具，它可以根據預先制定的代碼規范來避免低級代碼錯誤的出現，以及保證代碼樣式風格的統一。） （至此，代碼規范，風格要求，語法檢查，質量保證，格式化/美化，自動修正/fix，補全，聯想等插件都全了） ~~~ phpfmt 插件參數： { "autocomplete": true, "enable_auto_align": true, "format_on_save": false, "indent_with_space": true, "psr1_naming": false, "psr2": true, "version": 4 } 沒有使用保存格式化，不然每次Ctrl+S都要卡一下，使用Ctrl+F11即可格式化當前文件代碼，再按Ctrl+S保存即可。 高級用法：[Sublime Text 的 phpfmt 插件如何實現批量格式化 php 代碼？](https://www.zhihu.com/question/49124741/answer/114372052) ~~~ **配置無干擾模式：** 設置 》更多》無干擾模式-用戶： `Ctrl+Shift+P ， view:` 快捷鍵操作打開菜單等 ```json { "wrap_width": 160, "line_numbers": true, "gutter": true, } ``` ---- * * * * * 更多關于Sublime Text的技巧，使用方法，可自行在網上找資料。如果你有好的經驗，不妨分享出來。 * * * * * ### 擴展 [sublimeText3之碼上有愛 - 掘金](https://juejin.im/post/5a005392518825295f5d53c8) [【轉】右鍵使用Sublime Text打開文件夾 - CSDN博客](http://blog.csdn.net/vvfish119/article/details/78615570) [Sublime Text 查找時排除指定的文件夾或文件 - CSDN博客](http://blog.csdn.net/gulingeagle/article/details/51098873) [sublime text 全局搜索 - CSDN博客](http://blog.csdn.net/Adam040606/article/details/50223999) [Sublime Text3下配置SublimeLinter進行PHP代碼檢查 - poplar - CSDN博客](http://blog.csdn.net/qq_29945729/article/details/53126887) [在sublime text中設置某種擴展名文件的默認語法](https://www.wanweiwang.cn/faq/view/713.html) > 直接設置記不住，寫在配置文件里面就能記住了。 [JS Linter 進化史](https://zhuanlan.zhihu.com/p/34656263?utm_source=wechat_session&utm_medium=social&from=singlemessage) [程序開發中的linter是什么意思？ - 知乎](https://www.zhihu.com/question/28421865) > 檢查代碼風格/錯誤的小工具，作用是提高代碼質量、讓你方便的發現一些typo。 [為什么你不能缺少Linter（以及代碼美化工具）](https://sdk.cn/news/7182) > Prettier并不是用于報錯，因為它只是一個美化工具，但這并不影響你使用一個Linter和一個類似Prettier的格式化工具來規范你的代碼。而實際上，采用Standard + Prettier這樣的組合，會讓你現有的工具如虎添翼，展現出兩者的結果。 [【IT好望角】12 款炫酷的 Sublime Text 插件推薦](https://mp.weixin.qq.com/s/6oO4U2fFhwqlOuC9bwModA) * * * * * ### 使用問題 [Sublime Text 3出現無法保存文件的奇怪現象及幾種解決方法 - 簡書](https://www.jianshu.com/p/d1fb66deb69e)（任何時候遇到權限問題，無法保存時試一試） 谷歌瀏覽器的 **Workspace** ，真是好用（360的有問題），可以在瀏覽器里面調css代碼，直接就能保存應用到目標文件，所見即所得，再也不用編輯器中改一下，再切換到瀏覽器刷新一下看效果，多個窗口切來切去的那么麻煩了。 但是這帶來一個問題，這幾天一直是這樣，估計是權限沖突問題。關閉 `atomic_save` 暫時解決有時無法保存的問題。 [Sublime Text 3出現無法保存文件的奇怪現象及幾種解決方法 - 簡書](https://www.jianshu.com/p/d1fb66deb69e)（解決win10下出現的權限問題，導致C盤下文件無法修改） * * * * * 最后再放幾張dribbble上的Sublime Text設計美圖欣賞一下。           * * * * * last update：2018-6-5 12:48:17