Sublime常用插件介绍

    首先，你要看的是在preference选项下有没有package control这个选项，如果没有的话，就表示你没有Package Control 插件（一个方便 Sublime text 管理插件的插件），这时，你就要从菜单 View - Show Console 或者 ctrl + ~ 快捷键，调出 console。将以下 Python 代码粘贴进去并 enter 执行，不出意外即完成安装

    sublime text3

1

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

    sublime text2

1

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

    完成了这步之后,再重新打开我们的sublime, ctrl+shift+p，并输入install，选择你需要的插件再在按Enter就可以安装了。

    

     常用的命令：Install Package（安装扩展）
                         List Package（列出全部扩展）
                         Package（移除扩展）
                         Upgrade Package（升级扩展）

1、Emmet插件

     Emmet插件可以说是使用Sublime Text进行前端开发必不可少的插件。

     基本用法：输入标签简写形式，然后按Tab键。这份速查表，可以帮你快速记忆简写形式

     安装不上的解决办法：链接

     

2、SublimeTmpl 快速生成文件模板

     SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板，所有的文件模板都在插件目录的templates文件夹里，可以自定义编辑文件模板。

     SublimeTmpl默认的快捷键:

ctrl+alt+h htmlctrl+alt+j javascriptctrl+alt+c cssctrl+alt+p phpctrl+alt+r rubyctrl+alt+shift+p python

3、SublimeCodeIntel插件

     这是一款代码提示插件，支持多种编程语言。安装该插件后需要根据您使用的编程语言进行配置,以配置JavaScript语言的代码提示功能为例。

    通过路径 Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut

[html] view plain copy

1. "codeintel_language_settings": {  
2.         "Python3": {  
3.             "python3": "/usr/local/bin/python3.3",  
4.             "codeintel_scan_extra_dir": [  
5.                 "/Applications/Sublime Text.app/Contents/MacOS",  
6.                 "~/Library/Application Support/Sublime Text 3/Packages/SublimeCodeIntel/arch",  
7.                 "~/Library/Application Support/Sublime Text 3/Packages/SublimeCodeIntel/libs"  
8.             ],  
9.             "codeintel_scan_files_in_project": true,  
10.             "codeintel_selected_catalogs": []  
11.         },  
12.         "JavaScript": {  
13.             "codeintel_scan_extra_dir": [],  
14.             "codeintel_scan_exclude_dir":["/build/", "/min/"],  
15.             "codeintel_scan_files_in_project": false,  
16.             "codeintel_max_recursive_dir_depth": 2,  
17.             "codeintel_selected_catalogs": ["jQuery"]  
18.         },  
19.         "PHP": {  
20.             "php": "/Applications/MAMP/bin/php/php5.5.3/bin/php",  
21.             "codeintel_scan_extra_dir": [],  
22.             "codeintel_scan_files_in_project": true,  
23.             "codeintel_max_recursive_dir_depth": 15,  
24.             "codeintel_scan_exclude_dir":["/Applications/MAMP/bin/php/php5.5.3/"]  
25.         }  
26.     }  

    找到"JavaScript"代码段，将

[html] view plain copy

1. "codeintel_selected_catalogs": ["jQuery"]  

   改为：

[html] view plain copy

1. "codeintel_selected_catalogs": ["JavaScript"]  

    关闭重启Sublime，写JavaScript代码，发现自动补全已经生效。

    

4、Autoprefixer 插件

     功能：CSS3私有前缀自动补全插件

     简介：该插件使用CanIUse资料库，能精准判断哪些属性需要什么前缀，该插件需要系统已安装Node.js环境

      使用方法：在输入CSS3属性后（冒号前）按Tab 键，如下图示

      

5、CSScomb 插件

      CSScomb可以按照一定的CSS属性排序规则，将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码，按Ctrl+Shift+C，即可对CSS属性重新排序了，代码从此简洁有序易维护，如果不款选代码则插件将排序文件中所有的CSS属性。当然，可以自己自定义CSS属性排序规则，打开插件目录里的CSScomb.sublime-settings文件，更改里面的CSS属性顺序就行了。

6、BracketHighlighter 插件

     功能：代码匹配
     简介：可匹配[], (), {}, “”, ”, <tag></tag>，高亮标记，便于查看起始和结束标记
     使用：点击对应代码即可

      

7、jQuery 插件

     功能：jQ函数提示
     简介：快捷输入jQ函数，是偷懒的好方法

     

8、AutoFileName 插件

     功能：快捷输入文件名
     简介：自动完成文件名的输入，如图片选取
     使用：输入”/”即可看到相对于本项目文件夹的其他文件

9、Color​Picker 插件

     功能：调色板
     简介：需要输入颜色时，可直接选取颜色
     使用：快捷键Windows: ctrl+shift+c

     安装ColorPicker后快捷键无效，有的人说是和convertToUTF8冲突了，我并没有安装convertToUTF8同样不能用，不过可以确定的是快捷键冲突导致的，修改方法是打开Sublime Text –> Preferences –> Browse Packages，找到ColorPicker文件夹并进入，找到对应操作系统的Default.sublime-keymap文件，直接修改快捷键为ctrl+shift+alt+c

10、HTML/CSS/JS Prettify 插件

       功能：美化 HTML、CSS、JS、JSON

       简介：需要安装node.js环境

       使用：快捷键Windows: ctrl+shift+h

11、SideBarEnhancements插件

       该插件还能让我们自定义快捷键呼出某个浏览器以预览页面，这样就不用到项目目录下寻找和拖动到特定浏览器中预览了。安装此插件后，点击菜单栏的preferences->package setting->side bar->Key Building-User，键入以下代码：

      { "keys": ["ctrl+shift+c"], "command": "copy_path" },    {         "keys": ["f12"],         "command": "side_bar_files_open_with",         "args": {            "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",            "paths": [],            "extensions": ".*"        }     }

       按F12即可在Chrome浏览器预览效果(如果需要的话，也可以根据自己的需要为Firefox，Safari，IE等加上，浏览器路径要以自己电脑里的文件路径为准，点击浏览器快捷方式，右键属性即可查看路径)。

       这里设置按Ctrl+Shift+C是复制文件路径

       

如果以上内容仍不满足您的需求，您还可参考此篇链接