## 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