sublime3在mac环境下安装linter

说明

sublime是轻量级的编辑器，简单易用，功能强大，比运行运行庞大IDE要流畅。今天来说说在mac环境下如何给sublime3安装语法检测插件，以安装js，css，html语法检测插件（分别是jshint、CSSLint、htmlhint）为例子，其他语法检测器操作步骤相识，可以自行尝试。

PS：本文只是针对mac环境下sublime3的配置，在windos环境下或者在sublime2下的配置会略有不同。

一.安装packect control

1.按CTRL+`调出console

2.粘贴以下代码到底部命令行并回车：

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())

3.重启Sublime Text 3

如果在Perferences->package settings中看到package control这一项，则安装成功。

PS：顺便贴下Sublime Text2 的代码

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')

二、通过packect control安装其他插件

packect control安装完成后，按下Ctrl+Shift+P调出命令面板

输入Install Package，然后在列表中选中要安装的插件。

其他一些常用 list package 查看已安装的插件

enable package 启用已安装的插件

enable package 禁用已安装的插件

upgrade package 升级已安装的插件

remove package 移除已安装的插件

其他更多的命令可以自己在命令面板查看

三、安装linter的依赖

由于CSSLint,jshint,htmlhint都是依赖node-js的，所以要先安装node-js，安装了brew的同学可以直接在Terminal使用以下命令

brew install node

没有安装brew的可以自行google一下nodejs的安装方法。

node安装完成后，然后在Terminal输入

npm install -g csslint
npm install -g jslint
npm install -g htmllint

安装完应该会自动加入到环境路径中，找个文件测试一下

csslint test.css
jshint test.js
htmlhint test.html

如果有返回结果，说明安装成功了。

如果显示command not found:说明还没安装成功，检测一下上面步骤是否有错。

四、安装SublimeLinter及相应Linter

1.安装SublimeLinter

Ctrl+Shift+P->Install Package->SublimeLinter

2.安装SublimeLinter-CSSLint

Ctrl+Shift+P->Install Package->SublimeLinter-CSSLint

3.安装SublimeLinter-jshint

Ctrl+Shift+P->Install Package->SublimeLinter-jshint

4.安装SublimeLinter-htmlhint

Ctrl+Shift+P->Install Package->SublimeLinter-htmlhint

安装成功后就可以到sublime里测试了，右键SublimeLinter->Show All Erroes，就会有提示了。

SublimeLinter的详细配置可以查看SublimeLinter官方说明文档

提示

如果在Terminal能检测出结果，sublime没有检测出来，可以在通过下面操作打开调试模式，

1.在sublime下右键->SublimeLinter->勾上Debug Mode

2.按下CTRL+`调出console

打开调试模式后就能在console看到运行的结果了，看下是否报错，根据错误提示应该就能找到解决方法了。

输出的log如下图

注意

SublimeLinter是一个linter管理器，本身并不包含有linter，需要什么linter要自行安装，linter的名字统一为SublimeLinter-‘linter name’，都是带有SublimeLinter前缀的如css linter的名字是SublimeLinter-CSSLint。

jslint,CSSlint这些没有SublimeLinter前缀的与有前缀的不一样的，那些都是独立的linter，不需要通过SublimeLinter来管理。 两者的实现的功能是相识的，区别单独的linter你跑不同的文件要调用不同的linter来检测，而使用SublimeLinter的话，都是调用SublimeLinter即可，它会判断你当前的文件类型来使用不用的linter，更加方便一些。

所以还是推荐大家使用SublimeLinter，可以统一管理统一配置，也方便使用，笔者试过用jslint,CSSlint，检测结果都是输出在命令行，不够直观，而SublimeLinter是在有问题行前面做标记，更加清晰。（笔者只试过这2个linter，或许有其他linter也能以标记形式提示，没有研究，就不做说明了。）

jslint的结果

SublimeLinter-jshint的结果

最近访问

    Table of Contents