ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
# Sublime 的常用插件 ## 1.自动补全注释(支持函数注释) 插件名:`DocBlockr` >[success]DocBlocker 是在Sublime平台上开发一款注释自动补全代码插件,支持JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust. >**在function上一行输入`/**`,然后按Tab就自动补全注释** ### 自定义`DocBlockr`信息补全 1. 打开Preferences -> Package Settings -> DocBlockr->Settings - User 并新建一个User配置文件,也可以直接将配置文件保存到"Default Settins" 2. 建议代码保存到新建的User配置文件中.,如果是保存在“Default Settins”里则需要将覆盖默认的配置(不建议在默认的配置中进行更改) ![](https://box.kancloud.cn/5e20c6e3e8b32f7c6519d515672cd94f_1103x344.png) 最图效果: ![](https://box.kancloud.cn/94866db1ee180f942271970547cb9868_923x416.png) ## 2.Emmet >[success]可以快速编写html/css。 注意:安装Emmet的同时,也会自动安装其依赖PyV8 binary库,安装PyV8库会用较长时间,可以在Sublime左下角看到安装进程状态 ## 3.HTML5 >[success]支持hmtl5规范的插件包,与Emmet插件配合使用,效果更好 使用方法:新建html文档>输入HTML5>敲击Tab键>自动补全html5规范文档 ## 4.SublimeLinter >[success]一个支持lint语法的插件,可以高亮linter认为有错误的代码行,也支持高亮一些特别的注释,比如“TODO”,这样就可以被快速定位。 ## 5.JSFormat >[success]js代码格式化插件。 使用方法:使用快捷键ctrl+alt+f ## 6.BracketHighlighter >[success]代码匹配,可以匹配括号,引号等符号内的范围。 使用方法:点击某个标签或括号之类,会高亮显示出另一个标签或括号所在的位置。 ## 7.Alignment >[success]代码对齐,注意不是格式化喔。 使用方法:如写几个变量,选中这几行,Ctrl+Alt+A,就会左对齐。 ## 8.Doc​Blockr >[success]注释插件,生成幽美的注释。 /*:回车创建一个代码块注释 /**:回车在自动查找函数中的形参等等。 它会生成 JSDoc 格式的注释。 ![](https://box.kancloud.cn/ec223326b90074cf13a02e63df95338c_504x300.png) ## 9.SideBarEnhancements 一个可以自定义打开方式快捷键的工具包。他可以定义不同的快捷键打开不同的浏览器。使用方法参考下面链接: http://www.w3cfuns.com/notes/13810/d9b9ed2fb80785dae88a5344ef0f30d4.html ## 10.ColorPicker >[success]通常,如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中,你可以使用内置的颜色选择器。安装完成后,只要按下Ctrl / Cmd + Shift + C 快捷键。 注意:有时候按下Ctrl / Cmd + Shift + C 快捷键唤不出颜色选择器,多半是与其它软件快捷键冲突了,可以Preferences-Browse Packages找到ColorPicker文件夹,打开之后会看到下面几个文件 >[success]这是对应不同系统 的,大家可以根据自己的系统修改对应文件里的快捷键,我的是修改为ctrl+shift+a 如下所示: 这里写图片描述 ## 11.AutoFileName >[success]功能:快捷输入文件名 简介:自动完成文件名的输入,如图片选取 使用:输入”/”即可看到相对于本项目文件夹的其他文件 ![](https://box.kancloud.cn/ce802195cebb5ee7741276d55961556a_539x272.png) ## 12.jQuery >[success]支持jQuery规范的插件包。 ## 13.AdvancedNewFile >[success]假设有文件夹file。我们正在输入代码,又想在新的子目录下新建html文件的话用传统方式得很多步,新建目录,新建文件,保存等等等。 但是有了该插件之后,事情就变得简单了许多,只需要按下Ctrl+Shift+N,输入文件夹以及文件名,你就会看到如下效果:(回车,你会发现已经子目录下的文件已经新建完成了!) 这里写图片描述 ## 14.JavaScript Next >[success]完美支持ECMAScript 6。 JavaScript Next 提供了比默认javascript Package更好的语法高亮,而且他完美支持ECMAScript 6。 建议完全使用 JavaScript Next代替JavaScript Package。 ## 15.CSS3 >[success]提供语法高亮。默认情况下是一片白色的纯文本,很难看。 ## 16.Color Highlighter >[success]CSS颜色高亮,会检测CSS文件中的颜色码,不论是Hex码或者RGB码都能很好的显示,很是牛逼! Color Highlighter能够设置成用背景色或者边框提示颜色,我一般在Settings里做这样的设置: ~~~ { "ha_style": "filled", "icons": false } ~~~ 效果如下: ![](https://box.kancloud.cn/6871fc538c594fe02df9138de7a97ad9_524x188.png) ## 17.CSScomb >[success]CSS属性排序。 CSS属性的顺序一般不重要,因为无论何种顺序浏览器都能正确渲染。但排序所有的属性还是有助于代码的整洁。在Sublime Text中,选中CSS属性后按F5就可以按字母顺序排序,或者右键Run CSScomb。 ## 18.CSS Format >[success]CSS格式化。 使用方法:右键-》CSS format-》Expanded >[info]还有其他功能,如右键-》CSS format-》Compact可以将css都紧凑在一行,效果如下: 这里写图片描述 ## 19.ConvertToUTF8 >[success]GBK编码兼容。 ## 20.Auto Close HTML Tags >[success]功能:写HTML代码时,输入“>”就会自动产生相应的闭合标签</>。 ## 21.Nodejs >[success]功能:node代码提示 教程:https://sublime.wbond.net/packages/Nodejs ## 22.A File Icon >[success]美化文件前面的图标,效果如下: ![](https://box.kancloud.cn/b733c5da593ce19e57cce27b55484ed2_230x187.png) ## 23.HTMLBeautify >[success]格式化HTML代码。 使用方法:选中代码,然后按下快捷键ctrl+alt+shift+f或者Edit->Beautify HTML ## 24. sublimeCodeIntel >[success]CSS属性值自动提示 > # 快捷键的使用——让你键步如飞 >[success]Alt+F3 选中文本后按下快捷键,即可一次性选择全部的相同文本(如变量名、函数名等)进行同时编辑。 >[success]Ctrl+c、Ctrl+v 光标停留在某一行时,按下Ctrl+c即可复制一整行,然后Ctrl+v就粘贴到下一行了。