## SublimeText - 编码利器 ![](https://cdn.dribbble.com/users/37680/screenshots/1674374/dribbble-sublime-icon.png) 打造趁手的兵器。 * * * * * ### 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) * * * * * ### 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) ~~~ * * * * * 更多关于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这样的组合,会让你现有的工具如虎添翼,展现出两者的结果。 * * * * * ### 使用问题 [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设计美图欣赏一下。 ![](https://cdn.dribbble.com/users/2404/screenshots/2746677/sublime-text-preview.png) ![](https://cdn.dribbble.com/users/30679/screenshots/976695/sublime2.png) ![](https://cdn.dribbble.com/users/291641/screenshots/2028533/dribbble-shot.jpg) ![](https://cdn.dribbble.com/users/1721840/screenshots/3914831/sublime_text_icon.png) ![](https://cdn.dribbble.com/users/75711/screenshots/1195715/icon-dribble.jpg) ![](https://cdn.dribbble.com/users/37680/screenshots/1674374/dribbble-sublime-icon.png) ![](https://cdn.dribbble.com/users/296458/screenshots/1582459/dribbble_shot.png) ![](https://cdn.dribbble.com/users/124397/screenshots/1558516/icon_for_sublime_text.jpg) ![](https://cdn.dribbble.com/users/5068/screenshots/1169778/chrome_sublime.png) ![](https://cdn.dribbble.com/users/17411/screenshots/2247344/dribbble.png) * * * * * last update:2018-6-5 12:48:17