我的 sublime 常备插件

首先声明，我用的是 sublime 3
sublime 每次安装时，左下角都有个 [ = ] 形状的图标，中间等号在滑动，若安装成功则消失
以下插件基本都是亲测有效的，我自己就是这么安装的
sublime 3 小技巧：缩进在右下角的tabSize 或 space

安装插件之前的准备工作：

1、打开Sublime 3，然后按 ctrl+` 或者在View → Show Console（如若是用的中文版，那就是：视图 ——> 显示/隐藏控制台）
2、在打开的窗口里黏贴这个网站上的代码（注意: Sublime 2和3所黏贴的代码不一样，注意选择）
链接：https://packagecontrol.io/installation
3、安装完成后，按 Ctrl+Shift+p (Windows) / Command+Shift+p (Mac), 输入'Install Packages'，之后Sublime会自动下载插件列表，然后弹出一个小的下拉菜单让你填写想要下载的插件名称。

常用的插件：

0、ChineseLocalization：汉化包语言包
（1）、安装package control：打开sublime，使用快捷键：Ctrl+“~”调出console，然后复制如下代码并粘贴上去；最后回车即可安装好package control，安装好后需要重启sublime编辑器。

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; 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://packagecontrol.io/' + 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)

（2）、安装汉化包：使用快捷键：Ctrl+shift+p（或者：菜单 – Tools – Command Paletter），输入package control install，然后回车并等待弹出另一个窗口，之后输入Chinese，之后选择ChineseLocalization(回车或者鼠标单击击)。
（3）、选择help->language->简体中文

1、emmet：通过一套简单的语法让你快速生成大量的HTML代码（比如输入英文的 !，点击 tab 键自动完成 html 页面样式代码）
链接：http://docs.emmet.io/abbreviations/syntax/
安装：Ctrl+Shift+P → Package Control: Install Package → Emmet

2、HTML-CSS-JS Prettify：代码格式化（Sublime Text 自带代码格式化功能，见下文备注）
   （编辑HTML, CSS, JS时，经常会出现缩进不对，代码行不对其的情况。装了这个插件之后，只要按下Ctrl+Shift+h (Windows), Command+Shift+h (Mac), 你的文档就会被整理干净。）
   链接：https://packagecontrol.io/packages/HTML-CSS-JS%20Prettify
安装：https://www.cnblogs.com/yuanbo88/p/6065773.html（此链接中讲解详细并配有图片，若此链接不可用，则见下文）
  步骤一：Ctrl+Shift+P → Package Control: Install Package → HTML-CSS-JS Prettify
步骤二：查看本地安装的NodeJS配置环境路径（在dos命令下，输入where node并回车，得到路径如：E:\nodejs\node.exe）。
步骤三：在编辑器的任意一个html/js/css文件中，右击，出现如下图所示，选择Set Plugin Options，sublime 3 选择 Plugin Options - Default 。
步骤四：将上述步骤2中的NodeJS本地路径保存到步骤3中打开的文件中，保存位置是‘node_path'中的’windows'，将其替换。
步骤五：使用，无论是 html/css/js 其中哪种文件需要格式化，右击选择 html/css/js prettify，再选择 prettify code 即可。
备注：Sublime Text 自带代码格式化功能，不必安装插件，位置在[Preferences]->[Key Bindings]->[User]中, 中文版的位置在 [首选项]->[按键绑定-用户]，弹出的页面中。添加如下代码，为其设置快捷键：Ctrl+Shift+r。我亲测之后发现效果并不好，

    {
	 	"keys": ["ctrl+shift+r"],
	 	"command": "reindent", 
	 	"args": {
	    	"single_line": false
	    }
	}

3、livestyle：同步 Chrome 调试的 css 样式到 css 文件
（这货太神奇了。在调试页面的样式时，经常会打开Chrome自带的开发者工具，然后编辑CSS，等满意了再把CSS代码黏贴回Sublime里。这货允许你在Chrome里修改CSS，然后相对应的在Sublime里的CSS文件就自动更新了！（你更新Sublime里的CSS并保存，打开的网页也会自动更新）
链接：http://livestyle.emmet.io/
安装：需要安装两个插件，一个是Sublime的插件，一个是Chrome的插件。
Sublime插件: Ctrl+Shift+P → Package Control: Install Package → LiveStyle
Chrome插件: https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg
注意：先重启你的Sublime，然后打开一个CSS文件。然后在Chrome里打开包含这个CSS的HTML页面 → 打开Chrome的开发者工具，工具栏的最后会多出一个 LiveStyle选项：看下方File mapping里被HTML页面引用的CSS文件会自动和Sublime里打开的同名CSS文件关联起来。如果名字都对的话你就可以在Elements里开始编辑CSS了。编辑好后看下Sublime，该CSS文件会被自动更新。

4、Bracket Highlighter：高亮各种括号的起始和结尾
链接：https://github.com/facelessuser/BracketHighlighter
安装：Ctrl+Shift+P → Package Control: Install Package → BracketHighlighter

5、Sidebar Enhancement：让Sublime的侧边栏多出许多必备功能，如在浏览器中打开，改名，复制文件链接等等
链接：https://github.com/titoBouzout/SideBarEnhancements
安装：Ctrl+Shift+P → Package Control: Install Package → SideBarEnhancements

6、CSS3：支持CSS3里的语法高亮。(Sublime3里自带的CSS高亮不够用)。安装后, 打开一个CSS文件，然后按照下面GIF操作，将CSS3高亮作为CSS文件的默认高亮）（这里我也没有那个 GIF 图，我也不确定我现在的高亮是哪一种）
链接：https://github.com/y0ssar1an/CSS3
安装：Ctrl+Shift+P → Package Control: Install Package → CSS3

7、Sidebar Enhancement：让Sublime的侧边栏多出许多必备功能，如在浏览器中打开，改名，复制文件链接等等
链接：https://github.com/titoBouzout/SideBarEnhancements
安装：Ctrl+Shift+P → Package Control: Install Package → SideBarEnhancements

8、Color Picker：内置调色板，选择相应的颜色，获取颜色码并输入在光标处
安装：Ctrl+Shift+P → Package Control: Install Package → ColorPicker
   使用：在页面内右击，选择 insert color with color picker，调色板就打开了。
（查看已安装插件：
   1、中文版：首选项 ——> 浏览插件目录
   2、英文版：preference ——> Browse Packages）
   我在查看我的电脑时并未发现里面有 ColorPicker 插件，但是我还是可以通过以上使用方法使用，原因暂且不明）

9、less：使用 less 编写 css 代码（建议这段话看不明白的小伙伴可以看一遍以下视频教程的第一章内容，很短十分钟左右）
视频教程：https://www.imooc.com/learn/102
  安装：Ctrl+Shift+P → Package Control: Install Package → less
   很多用户都需要安装 less2css（把 less 文件转为 css 文件的插件），并且下载 lessc 安装包到某指定位置，再将 lessc 的路径添加到环境变量 PATH 的路径中，如此链接所讲的：https://blog.csdn.net/c_cyoxi/article/details/36947569。
  但我个人用的是 koala 软件（把 less 文件转为 css 文件的软件，下载地址：http://koala-app.com/），我不需要安装 less2css 和 lessc 就可以把 less 转换为 css 文件。
注意：在安装 less 后，如果之前就有书写了的 less 文件，不仅要把 sublime 退出重启，还要把之前的 less 文件关闭再次打开才有语法高亮。

10、提示类名：关于这一点，在以下链接有很好的教程，图文并茂，精简详细：https://blog.csdn.net/illa123/article/details/80568754
注意：这个插件并不能提示书写 css 文件时的 url（）中的路径，亲测。

以上是我目前会用到的插件，希望对大家有所帮助。

最后，我有个疑问，希望有人能在下面留言回复，非常感谢。
（疑问是：每次安装插件都需要 Package Control: Install Package 这一步吗，因为第一次安装时，这个就已经安装了。所以能不能第一次之后的安装插件，直接用：Ctrl+Shift+P → 插件名的方法？？？求解中）

我个人对以上疑问的理解是：每次安装都要先 install Package 回车，这是要先找到可以安装的插件的列表，已安装的插件在 install package 这一步后再在哪个输入框中输入该插件名字，就不会出现了。同样，在卸载插件的时候，步骤如下：Ctrl+Shift+P → Package Control: Remove Package → 插件名字

我的 sublime 常备插件

猜你喜欢