sublime插件

 一、安装及安装emmet插件
首先,去sublime官网下载软件：http://www.sublimetext.com/ ，
软件很小，我用的是最新版的text3，大家可以用目前稳定版text2。打开它的官网，我们就可以看到几个动画，演示sublime的强大功能。
其次，软件安装好了之后，我们来安装一个插件，推荐使用package control组件来安装插件，很方便。
安装方法如下：
按快捷键ctrl+~ 调出命名控制行：然后如果是text2输入如下命令：
import urllib2,os,hashlib; h = ‘7183a2d3e96f11eeadd761d777e62404’ + ‘e330c659d4bb41d3bdf022e94cab3cd0’; 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()) ); by = urllib2.urlopen( ‘http://sublime.wbond.net/’ + pf.replace(’ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), ‘wb’ ).write(by) if dh == h else None; print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h) if dh != h else ‘Please restart Sublime Text to finish installation’)
如果是text3输入如下命令：
import urllib.request,os,hashlib; h = ‘7183a2d3e96f11eeadd761d777e62404’ + ‘e330c659d4bb41d3bdf022e94cab3cd0’; pf = ‘Package Control.sublime-package’; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( ‘http://sublime.wbond.net/’ + pf.replace(’ ‘, ‘%20’)).read(); dh = hashlib.sha256(by).hexdigest(); print(‘Error validating download (got %s instead of %s), please try manual install’ % (dh, h)) if dh != h else open(os.path.join( ipp, pf), ‘wb’ ).write(by)
具体安装您也可以查看：https://sublime.wbond.net/installation#st3
最后，有了package control，你就可以安装您想要的插件了!很简单，sublime下面有很多插件，一般编辑器有的，sublime都会以插件的形式出现，下面我们最先介绍Emmet。
打开package control 输入install package 然后找到emmet，点击安装，重启sublime就可以了，具体请看：https://github.com/sergeche/emmet-sublime#readme
第二，sublime常用插件：
1 . Emmet（原名 Zen Coding）
一种快速编写html/css的方法
不得不用的一款前端开发方面的插件，Write less , show more.安装后可直接使用，Tab键触发，Alt+Shift+W是个代码机器。
2.Alignment
代码对齐，如写几个变量，选中这几行，Ctrl+Alt+A，哇，齐了。
3.AutoPrefixr
写 CSS可自动添加 -webkit 等私有词缀，Ctrl+Alt+X触发。
4 . HTML5
支持hmtl5规范的插件包
使用方法：新建html文档>输入Html5>敲击Tab键>自动补全html5规范文档
5.SideBarEnhancements
侧栏右键功能增强，非常实用
6.GBK to UTF8
将文件编码从GBK转黄成UTF8，菜单 – File里面找
7.jQuery
支持JQuery规范的插件包
8.WordPress
集成一些WordPress的函数，对于像我这种经常要写WP模版和插件的人特别有用
9.PHPTidy
整理排版PHP代码
10.YUI Compressor
压缩JS和CSS文件
*11.Ctags插件
有童鞋抱怨Sublime Text不能支持函数的跳转（比如像Eclipse那样，按住Control点击该方法或者对象，即可跳转到定义的地方； Alt+←即可回到原处）。其实Sublime Text也可以借助插件实现之（当然，有些情况下:Can not find defination）毕竟这个也是借助正则来匹配完成的。因此这个也就要求代码很规范。这个插件相对来讲会有些麻烦，具体的可以参见:Sublime Text ctags 的配置.
12.Doc​Blockr
注释插件，生成幽美的注释。标准的注释，包括函数名、参数、返回值等，并以多行显示，省去手动编写。
13 . SublimeLinter
一个支持lint语法的插件，可以高亮linter认为有错误的代码行，也支持高亮一些特别的注释，比如“TODO”，这样就可以被快速定位。（IntelliJ IDEA的TODO功能很赞，这个插件虽然比不上，但是也够用了吧）
14.BracketHighlighter
类似于代码匹配，可以匹配括号，引号等符号内的范围。
15.ColorPicker
通常，如果你想使用一个颜色选择器则可能打开 Photoshop 或 GIMP。而在 Sublime Text 中，你可以使用内置的颜色选择器。安装完成后，只要按下Ctrl / Cmd + Shift + C 快捷键。
16.SublimeREPL
这可能是对程序员很有用的插件。SublimeREPL 允许你在 Sublime Text 中运行各种语言（NodeJS ， Python，Ruby， Scala 和 Haskell 等等）。
17.Sublime Terminal
这个插件可以让你在Sublime中直接使用终端打开你的项目文件夹，并支持使用快捷键。
18.MarkDown Editing
SublimeText不仅仅是能够查看和编辑 Markdown 文件，但它会视它们为格式很糟糕的纯文本。这个插件通过适当的颜色高亮和其它功能来更好地完成这些任务。关于如何在SublimeText下高效些东西可参见文章：sublime text 2(3)下的Markdown写作 抑或是前段时间写下的追寻高效工作的一路折腾㈡
19.SideBarFolders
打开的文件夹都太多了? 来用这个来管理文件夹，世界原来也可以这么美好。
20.SublimeLinter插件
SublimeLinter 是前端编码利器——Sublime Text 的一款插件，用于高亮提示用户编写的代码中存在的不规范和错误的写法，支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。
比如写例如像lua这样的弱语言脚本代码，有这个可以规避掉很多不该有的低级错误吧？当然这也需要你SublimeLinter安装完毕之后再安装一个SublimeLinter-lua即可。具体的使用可以参见：借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码
21.SideBarEnhancements插件
SideBarEnhancements是一款很实用的右键菜单增强插件；在安装该插件前，在Sublime Text左侧FOLDERS栏中点击右键，只有寥寥几个简单的功能；安装了就相当于给其丰了大胸一般。 更强大的是，该插件还能让我们自定义快捷键呼出某个浏览器以预览页面！这样就不用到项目目录下寻找和拖动到特定浏览器中预览了。
安装此插件后，点击菜单栏的preferences->package setting->side bar->Key Building-User，键入以下代码：
[
{ “keys”: [“ctrl+shift+c”], “command”: “copy_path” },
//chrome
{ “keys”: [“f2”], “command”: “side_bar_files_open_with”,
“args”: {
“paths”: [],
“application”: “C:\Users\jeffj\AppData\Local\Google\Chrome\Application\chrome.exe”,
“extensions”:”.*”
}
}
]
22.HTML-CSS-JS Prettify
一款集成了格式化（美化）html、css、js三种文件类型的插件，即便html,js写在PHP文件之内。插件依赖于nodejs，因此需要事先安装nodejs，然后才可以正常运行。插件安装完成后，快捷键ctrl+shift+H完成当前文件的美化操作。插件对html、css文件的美化不是非常满意，但还可以，后面将说明如何修改css美化脚本。本人用起来超级爽的，鉴于篇幅，就不赘述，可以参见这篇介绍。
23.CSScomb CSS属性排序:
有时候看看自己写的CSS文件，会不会觉得属性很乱查找不易维护难？CSScomb可以按照一定的CSS属性排序规则，将杂乱无章的CSS属性进行重新排序。选中要排序的CSS代码，按Ctrl+Shift+C，即可对CSS属性重新排序了，代码从此简洁有序易维护，如果不款选代码则插件将排序文件中所有的CSS属性。当然，可以自己自定义CSS属性排序规则，打开插件目录里的CSScomb.sublime-settings文件，更改里面的CSS属性顺序就行了。因为这个插件使用PHP写的，要使他工作需要在环境变量中添加PHP的路径，具体请看github上的说明。
24.SublimeTmpl 快速生成文件模板
一直都很奇怪为什么sublime text 3没有新建文件模板的功能，像html头部的DTD声明每次都要复制粘贴。用SublimeTmpl这款插件终于可以解脱了，SublimeTmpl能新建html、css、javascript、php、python、ruby六种类型的文件模板，所有的文件模板都在插件目录的templates文件夹里，可以自定义编辑文件模板。
SublimeTmpl默认的快捷键: ctrl+alt+h html
ctrl+alt+j javascript
ctrl+alt+c css
ctrl+alt+p php
ctrl+alt+r ruby
ctrl+alt+shift+p python
25.Javascript-API-Completions:
支持Javascript、JQuery、Twitter Bootstrap框架、HTML5标签属性提示的插件，是少数支持sublime text 3的后缀提示的插件，HTML5标签提示sublime text3自带，不过JQuery提示还是很有用处的，也可设置要提示的语言。
26.SFTP：快速编辑远程服务器文件
在Win下用Xftp 和 WinScp，被这种需要切换点击or F5刷新的手动操作蛋疼到无语；故此一遇见这SFTP，顿觉这世界都美好了许多。当然Sublime下面也有些其他同步插件，比如FtpSnyc，但是配置起来的错误提示一点都不人性化，就毫不留情的舍弃了。Sublime下有SFTP，只要Ctrl+S即可同步本地到服务器，妥妥的爽歪歪有么有？如何配置，请参见在 Sublime Text中使用 SFTP 插件快速编辑远程服务器文件;如欲使用FtpSync可参见Sublime使用及FtpSync远程同步；大道至简，因简而悦；开心垒码，值得折腾。
27.WakaTime – 记录你的Code时间;
WakaTime可以做到精确地统计到你花在某个项目上的时间;WakaTime针对不同的IDE，拥有不同的插件，在Sublime上安装着插件，就能统计到我使用Sublime进行的所有项目的行为。可以高效管理和知晓自己code时间；并且，统计完善, 适合发朋友圈装逼（如果你喜欢的话）~
28.advancedNewFile： 快速创建文件
当我们在 Sublime Text 编辑器里我们可以通过快捷键command+n(win: ctrl+n),来新建一个文件，然后command+s(Win:ctrl+s)进行弹出保存框，填写文件名进行保存。还是老问题，麻烦！！我们接下来就通过安装advancedNewFile插件来提升我们在Sublime Text编辑器下的创建文件速度。
关乎其使用，安装完成之后，运用快捷键command+alt+n(win: ctrl+alt+n)
，Sublime Text底部会弹出输入框；我们只需在这个输入框里输入我们需要新建的文件名回车即可（我们甚至可以带路径,譬如:src/components/perfect.vue;这就会在当前项目目录下，建立该文件；需要注意的是这路径前面不可加 ‘/’, 这会使得建立的路径成为用户目录，而非改项目目录）。默认情况下文件会存储在当前目录，如果当前没有目录，会存储在用户的家目录。
剩下些许其他的可以按需安装的插件，比如：
ConvertToUTF8 支持 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的插件
Bracket Highlighter 用于匹配括号，引号和html标签。对于很长的代码很有用。安装好之后，不需要设置插件会自动生效
DocBlockr 可以自动生成PHPDoc风格的注释。它支持的语言有Javascript, PHP, ActionScript, CoffeeScript, Java, Objective C, C, C++
Emmet(Zen Coding)快速生成HTML代码段的插件，强大到无与伦比:可以超快速编写HTML/CSS/JS，当然这个插件还支持多种编译环境，如常见的：Eclipse/Aptana、Coda、Notepad++、Adobe Dreamweaver、TextMate等，web开发必备！！！。
jsFormat 格式化js代码，懂者自懂；强迫症Coder必备！默认快捷键Ctrl+Alt+F。
phpFormat 格式化php代码，懂者自懂；强迫症Coder必备！
CSS Compact Expand CSS属性展开收缩:写CSS的盆友，喜欢将其写多行还是一行(个人喜欢将其格式化为多行)？如果阅读别人的代码不符合自己的习惯，可以用CSS Compact Expand这个插件将CSS格式化一下，按 Ctrl+Alt+[ 收缩CSS代码为一行显示，按 Ctrl+Alt+] 展开CSS代码为多行显示；强迫症Coder必备！。
Autoprefixer插件：这是一款CSS3私有前缀自动补全插件；该插件使用CanIUse资料库（当然，SublimeText自然也有CanIUse这个插件咯），能精准判断哪些属性需要什么前缀，与CssComb插件一样，该插件也需要系统已安装Node.js环境；使用方法：在输入CSS3属性后（冒号前）按Tab键即可。
YUI Compressor：压缩JS和CSS文件，按F7键后，若压缩当前文件（demo.js），则压缩后的文件（demo.min.js）保存在该文件的同级目录，需要安装java的JDK。使用方法：YUI Compressor
ClickableURLs：可点击的URL
使用小插件ClickableURLs可以让文件中的URL能够点击。
Vue Syntax Highlight: Vue(.vue)高亮插件；于前端而言，使用Vue框架开发，是一个很酷爽的存在，那么此插件也就很有必要拥有；同时Jade, SASS等插件也是很有拥有的必要，谁用谁知道(说到用vue, 这vue-cli就蛮有使用的必要了( Webpack, Eslint, Test等都配置完善，十分贴心); 而写Js代码，于稍大项目 Eslint 就很有使用必要，而 sublime 在针对使用 Eslint 的 .vue文件，目测还没有很好格式化插件，坐等诞生��)。
终极王道：自己编写专用的Sublime Text插件。虽然说各个方面比如移动端，Web前段，服务器端，非Coder的Writer所需要的方便已经被集成在了不同的插件中。但譬如，需要快捷打开PC端的某个模拟器，便捷的进行某些校验，只要你想的到的基本都可以将其在插件内，以快捷键处理之。至于如何编写SublimeText插件，请参看这里编写自己的Sublime Text2 插件

最后是关于.SubLime Text3 快捷操作
ctrl+N：快速创建
ctrl+p：find anything查找框 输入@查找元素
ctrl+shift+p：切换语言
ctrl+L：选中一行
ctrl+D：光标选中多行操作 也是替换功能 这时ctrl+k：掉过一行也可以ctrl+d选中后 按alt+f3 全选 也可以按住shift+鼠标右键拖拽
ctrl+shift+D：复制换行
Ctrl+L 选择整行（按住-继续选择下行）
Ctrl+KK 从光标处删除至行尾
Ctrl+Shift+K 删除整行
Ctrl+Shift+D 复制光标所在整行，插入在该行之前
Ctrl+J 合并行（已选择需要合并的多行时）
Ctrl+KU 改为大写
Ctrl+KL 改为小写
Ctrl+D 选词 （按住-继续选择下个相同的字符串）
Ctrl+M 光标移动至括号内开始或结束的位置
Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号）
Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果）
Ctrl+Shift+/ 注释已选择内容
Ctrl+Z 撤销
Ctrl+Y 恢复撤销
Ctrl+M 光标跳至对应的括号
Alt+. 闭合当前标签
Ctrl+Shift+A 选择光标位置父标签对儿
Ctrl+Shift+[ 折叠代码
Ctrl+Shift+] 展开代码
Ctrl+KT 折叠属性
Ctrl+K0 展开所有
Ctrl+U 软撤销
Ctrl+T 词互换
Tab 缩进 自动完成
Shift+Tab 去除缩进
Ctrl+Shift+↑ 与上行互换
Ctrl+Shift+↓ 与下行互换
Ctrl+K Backspace 从光标处删除至行首
Ctrl+Enter 光标后插入行
Ctrl+Shift+Enter 光标前插入行
Ctrl+F2 设置书签
F2 下一个书签
Shift+F2 上一个书签

1、主题  Theme-Spacegray  （我最喜欢的主题）

2、快捷生成模板   sublimeTmpl    ctrl+alt +h 

3、View In Brower  在浏览器打开

4、localization

5、Csscomb

6,、ChinseLocalizations

7、AutoFileName

8、Emmet

9、javaScript Completions

 

 

1.emmet ———— 前端自动补全，提供快捷补全方式

2.ColorPicker ———— sublime 调色板   供HTML选取颜色

 

 

1. emmet ———— 前端自动补全，提供快捷补全方式 

    

   例1：

    只需要输入一个 a 按下tab键就可以实现

    

   例2：

   ul>li{$}*3     $表示数字 从1开始     按下tab键

      

   • 1

      

   • 2

      

   • 3

   具体还有非常多快捷生成方式可以参考emmet官网的文档

   https://docs.emmet.io/cheat-sheet/

2. ColorPicker ———— sublime 调色板   供HTML选取颜色

    

   ctrl+shift+p  打开插件管理中心

    

   输入colorpicker  然后回车  会弹出调色器

    

   热键( ctrl+shift+c )  注意热键冲突   是按不出来的

    

   出现调色板之后后面的sublime不允许操作的  会假死在哪 这是正常现象

   需要选择一个颜色 或 cancel 取消

3. SublimeTmpl ———— sublime的模板

     

   安装之后 File —— sublimeTmpl 会有很多模板的生成选项

      

   以及快捷键 ctrl+alt+h 生成 HTML模板

     

   修改模板  在Preferences 菜单下第一个选项 Browser Package浏览包

    

   在打开的文件目录进入

   SublimeTmpl ———— templates ———— html.tmpl

    

   把html.tmpl用sublime打开编辑模板

    

   还有很多这里不在阐述 

    

   $表示  新建完一次模板后   按tab键 切换的地方  按顺序

    

   修改完按下ctrl+alt+h 试试 如果不行  可能与别的软件热键冲突

    

   需要重新配置热键    在下方

   

4. view in browser —————— 用快捷键打开相应的浏览器进行调试

   配置较复杂 

   参考官网：https://packagecontrol.io/packages/View%20In%20Browser

   简单介绍：

   安装之后插件之后

   1.  Preferences —— View In Browser —— Settings-Default 

   打开然后这个配置是更改不了的 我们把  "nt":{...} 复制下来

   2. Preferences —— View In Browser —— Settings-User

   {

   "nt": {

   "win32": {

   "firefox": "G:\\Program Files (x86)\\Mozilla Firefox\\firefox.exe",

   "iexplore": "C:\\Program Files\\Internet Explorer\\iexplore.exe",

   "chrome": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",

   "chrome64": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",

   "safari": "D:\\Program Files (x86)\\Safari\\Safari.exe",

   "yandex": "%Local AppData%\\Yandex\\YandexBrowser\\browser.exe"

   }

   },

   "browser": "chrome"

   }

   检查浏览器的正确路径 每一级目录是要用两个反斜杠  \\    (转义一个斜杠)

   记住语法是标准的JSON格式 

   1. 双引号

   2. 键也需要使用双引号

   配置完成保存关掉

   默认快捷键  浏览器开头字母

   Chrome —— ctrl+alt+c  和  sublimeTmpl 的css模板创建冲突

   Safari     —— ctrl+alt+s   Safari打开所编写的网页进行调试

   Opera    —— ctrl+alt+o  Opera打开所编写的网页进行调试

   IE           —— ctrl+alt+i    IE打开所编写的网页进行调试

   Firefox   —— ctrl+alt+f   用NS4+  火狐浏览器打开所编写的网页进行调试

   …………

    

    

   最重要的谷歌居然快捷键冲突了 

   这里需要重新配置下快捷键

   Preferences —— KeyBindings 打开热键配置

   他是一个列表

   [

       { "keys": [ "ctrl+alt+f" ], "command": "view_in_browser", "args": { "browser": "firefox" } },

       { "keys": [ "ctrl+alt+e" ], "command": "view_in_browser", "args": { "browser": "chrome" } },

       { "keys": [ "f12" ], "command": "view_in_browser", "args": { "browser": "chrome" } },

       { "keys": [ "ctrl+alt+i" ], "command": "view_in_browser", "args": { "browser": "iexplore" } },

       { "keys": [ "ctrl+alt+s" ], "command": "view_in_browser", "args": { "browser": "safari" } },

       { "keys": [ "ctrl+shift+alt+s" ], "command": "view_in_browser", "args": { "browser": "safari" } },

       { "keys": [ "ctrl+alt+shift+j" ], "command": "sublime_tmpl", "args": { "type": "js" }}

   ]

   keys 快捷按键    

   command所对应的插件名字  空格使用下划线

   args 参数   需要通过default配置来查看  (我也是通过控制台来看到的一些参数)

   args：html  可以更改 模板的快捷键

       { "keys": [ "ctrl+shift+alt+h" ], "command": "sublime_tmpl", "args": { "type": "html" }

   还需了解更多的详情配置查看  翻译的sublime文档：

   http://sublime-text.readthedocs.io/en/latest/

5. CSS3 —— 高亮显示CSS3的样式

   Color Highlighter ———— CSS颜色 出现一个下标的提示    有的会与文字相糊

   JavaScript Completions ———— 原生javascript 代码提示

6. Sublime-Better-Completion  

   可自选开启代码提示，支持jQ、js、bootstrap、php、sql ...

   packagecontrol是没有这个插件的 

   需要通过github 克隆下载 扔进 浏览包的目录里    重开sublime 

   加载插件 然后进行使用

   github仓库：https://github.com/Pleasurazy/Sublime-JavaScript-API-Completions

    

7. Live Reload 实时刷新  只要在sublime里按下ctrl+s  浏览器那边会自动刷新在多屏的时候是非常好用的  谷歌浏览器也需要安装插件 并且

   谷歌浏览器也需要安装插件  开启允许访问文件网页

    

   配置文件：

    

    

   {

        "enabled_plugins": [// 开启插件

         "SimpleReloadPlugin",// 开启实时刷新功能

         "SimpleRefresh"// 开启实时刷新功能

        ]

   }

    

   然后 用谷歌浏览器打开之后  

    

   按下谷歌的插件上面由空心圆变为实心圆 OK

    

   ctrl+s  试试

   

   

8. Emmet Live Style  浏览器样式调试栏与sublime编辑器双向绑定  

    

   在浏览器F12开发者调试工具中  调动样式

     

   subliem 编辑器的css文件也会跟着发生改变 

    

   在sublime 里编辑样式的文件中按住CTRL+↑ 改变样式数值  

    

   谷歌浏览器也会实时改变并刷新

    

   谷歌浏览器也需要安装插件 并且开启允许访问文件网址

    

   还需要安装一个软体

    

   http://livestyle.io/

   

9. 编辑器汉化插件 一秒变高富帅

    

   ChineseLocaliztions  安装之后需要等待一段时间大约三四分钟内

    

   会自动汉化   如果之前已经安装过  或者更改别的语言  需要在

    

   help —— Language —— 更改的语言选项

   

   

10. Live Reload    和  Emmet Live Style  不能一起使用   会导致Emmet Live Style    不能实时刷新 样式只能  ctrl+s 保存刷新 

     

    最后这里不支持空白换行不能腾出格式 见谅~

     

    我觉得我这一篇是比较详细的   还不明白 或者还有些问题的朋友可以加下

    QQ群495155119   我会一一解答

 

 

ColorPicker ———— sublime 调色板   供HTML选取颜色

转载于:https://www.cnblogs.com/wangshengli520/p/7809184.html