sublime text3常见插件的安装

原文:http://blog.csdn.net/tsingsn/article/details/52186670 

使用Package Control组件安装

也可以安装package control组件，然后直接在线安装：
按Ctrl+` 调出console

代码看：https://packagecontrol.io/installation
粘贴以下代码到底部命令行并回车：

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 Text 3。

按下Ctrl+Shift+P调出命令面板
输入install 调出 Install Package 选项并回车，然后在列表中选中要安装的插件。

接下来以安装检测js语法的SublimeLinter为例

按下 

Ctrl+Shift+p

 进入
Command Palette
输入

install

进入
Package Control: Install Package
输入

SublimeLinter

。进行安装.

安装完成后可以看到这样一段话：

Package Control Messages
========================

SublimeLinter
-------------

  
    ____        _     _ _                _     _       _
   / ___| _   _| |__ | (_)_ __ ___   ___| |   (_)_ __ | |_ ___ _ __
   \___ \| | | | '_ \| | | '_ ` _ \ / _ \ |   | | '_ \| __/ _ \ '__|
    ___) | |_| | |_) | | | | | | | |  __/ |___| | | | | ||  __/ |
   |____/ \__,_|_.__/|_|_|_| |_| |_|\___|_____|_|_| |_|\__\___|_|
  
  
  Welcome to SublimeLinter, a linter framework for Sublime Text 3.
  
                   * * * IMPORTANT! * * *
  
          SublimeLinter 3 is NOT a drop-in replacement for
          earlier versions.
  
          Linters *NOT* included with SublimeLinter 3, 
          they must be installed separately.
  
          The settings are different.
  
                  * * * READ THE DOCS! * * *
  
  Otherwise you will never know how to install linters, nor will
  you know about all of the great new features in SublimeLinter 3.
  
  For complete documentation on how to install and use SublimeLinter,
  please see:
  
  http://www.sublimelinter.com   
  
                   _   _      _       _
                  | | | | ___| |_ __ | |
                  | |_| |/ _ \ | '_ \| |
                  |  _  |  __/ | |_) |_|
                  |_| |_|\___|_| .__/(_)
                               |_|
  
  
  Hundreds of hours have been spent writing and documenting SublimeLinter
  to make it the best it can be — easy to use, easy to configure,
  easy to update, easy to extend. If you use SublimeLinter and feel
  it is making your coding life better and easier, please consider
  making a donation to help fund development and support.
  
  To donate: https://github.com/SublimeLinter/SublimeLinter3#share-the-love   
  Thank you!

可以看到具体的
Linters 组件不被包含在
SublimeLinter 3 中，所以我们要额外独立安装组件。 
可以针对不同的语言安装不同的组件。

安装 SublimeLinter-jshint

为了让 JavaScript 代码有语法检查，我们安装 SublimeLinter-jshint 

同样的方法，我们安装 SublimeLinter-jshint
按下 

Ctrl+Shift+p

 进入
Command Palette
输入

install

进入
Package Control: Install Package
输入

SublimeLinter-jshint

。进行安装.

如下图



安装完成后我们可以看到下面的一段话

SublimeLinter-jshint
-------------------------------
This linter plugin for SublimeLinter provides an interface to jshint.

** IMPORTANT! **

Before this plugin will activate, you *must*
follow the installation instructions here:
 https://github.com/SublimeLinter/SublimeLinter-jshint

安装 nodeJS 和 jshint

在插件开始工作之前，我们必须再看一下上述插件的安装说明 

通过 SublimeLinter-jshint 的说明 我们可以看到，这个组件依赖于 nodeJS 下的 jshint，所以我们安装 nodeJS 环境和 nodeJS
下的 jshint。
安装 Node.js
通过 npm 安装

jshint

在命令行下输入如下代码，完成安装

npm install -g jshint

安装完成后命令行中出现如下的信息

C:\Users\Administrator\AppData\Roaming\npm\jshint -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\jshint\bin\jshint
jshint@2.6.3 C:\Users\Administrator\AppData\Roaming\npm\node_modules\jshint
├── strip-json-comments@1.0.2
├── underscore@1.6.0
├── exit@0.1.2
├── shelljs@0.3.0
├── console-browserify@1.1.0 (date-now@0.1.4)
├── htmlparser2@3.8.2 (domelementtype@1.3.0, entities@1.0.0, domhandler@2.3.0, readable-stream@1.1.13, domutils@1.5.1)
├── minimatch@1.0.0 (sigmund@1.0.0, lru-cache@2.5.0)
└── cli@0.6.6 (glob@3.2.11)

可以查看 jshint 版本，已确认安装完成。

C:\Users\Administrator>jshint -v
jshint v2.6.3

现在，恭喜你，我们使用 Sublime 编辑 JavaScript 文件，就会有语法检查了！

在编辑过程中，会有如下提示



点击提示点后，Sublime 状态栏也会有相应的说明

css 语法检查

与 jshint 同理，SublimeLinter-csslint 也是基于 nodeJS 下的 csslint 的插件，实际上 SublimeLinter-csslint 调用了 nodeJS 中 csslint 的接口来进行语法检查的。

安装 SublimeLinter-csslint

同样的方法。
按下 

Ctrl+Shift+p

 进入
Command Palette
输入

install

进入
Package Control: Install Package
输入

SublimeLinter-csslint

。进行安装.

如下图



安装完成后我们可以看到下面的一段话

SublimeLinter-csslint
-------------------------------
This linter plugin for SublimeLinter provides an interface to csslint.

** IMPORTANT! **

Before this plugin will activate, you *must*
follow the installation instructions here:
 https://github.com/SublimeLinter/SublimeLinter-csslint

在使用插件之前，必须遵循上述网址中的安装说明

在 nodeJS 下安装 csslint

进入上述的 GitHub 地址，csslint 的说明页。我们知道了和 jshint 一样，csslint 也是基于 nodeJS 下的 csslint 来使用的。

这里安装 nodeJS 过程省略。 

只需用 npm 安装 csslint 即可。

在命令行中输入

npm install -g csslint

安装完成后命令行中出现如下的信息

C:\Users\Administrator\AppData\Roaming\npm\csslint -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\csslint\cli.js
csslint@0.10.0 C:\Users\Administrator\AppData\Roaming\npm\node_modules\csslint
└── parserlib@0.2.5

可以查看 csslint 版本，已确认安装完成。

C:\Users\Administrator>csslint --version
v0.10.0

现在，恭喜你，我们使用 Sublime 编辑 css 文件，就会有语法检查了！

在编辑过程中，会有如下提示



点击提示点后，Sublime 状态栏也会有相应的说明



ps：

Sulbime Text3 常用插件
1、Emmet
提高HTML &
CSS3编写速度。

1）、 !号，tab键，自动产生HTML5代码
2、Theme – Soda
一直用的一款皮肤
3、sideBarEnhancements
侧边栏右键增效插件，提高页面处理速度。
4、HTML5
Sublime Text3支持Html5
5、Sass
Sublime Text3支持Sass
6、Less
Sublime Text3支持Less
6、All Autocomplete
检查全部打开文件，相似自动补全插件
7、SublimeCodeIntel
代码提示工具
8、BracketHighlighter
成对匹配增强，并修改括号等的颜色
9、jQuery
Sublime Text3支持jQuery
10、DocBlockr
快速注释
11、ColorPicker
颜色获取
12、ConvertToUTF8
UTF8转换
13、FileDiffs
查找文档不同
14、LiveStyle
配合插件实时调试样式使用grunt watch已经不需要这个插件了。
15、Alignment
等号对齐 快捷键会有冲突 重新在Alignment > Key Bindings – User 配置快捷键 ctrl+alt+f
16、SublimeTmpl
快速格式化代码
17、Gutter Color
颜色提示 需要imageMagick支持
18、Can I Use
可以直接调整到caniuse看到当前属性的浏览器支持情况。快捷键
19、InsertDate
插入时间，项目文件存在CDN的时候，需要改变时间戳才会看到效果，这个是个好东西。
20、Git
Git插件，提供Git常用的命令集合。
21、AutoFileName
自动提示路径插件