使用SublimeLinter检查Javascript与CSS代码

  • A+
所属分类:开发者工具

 

1.什么是linter?

linter是用来检查代码是否符合规则的工具,例如检查Javascript代码的jshint工具,你可以设置其规则"eqeqeq":true,那么如果在你的代码文件中使用了==而不是===,那么检查的时候就会给出提示。

2.什么是Sublime Linter

SublimeLinter是SublimeText的插件,它只是一个进行代码检查的框架,可以包括其他代码检查插件。

SublimeLinter可以容纳许多linter插件,如SublimeLinter-jshint、SublimeLinter-csslint。

SublimeLinter相当于一个插件容器,而具体的插件则负责调用具体的linter工具进行代码检查,如jshintcsslint

对于不同的代码文本,SublimeLinter可以使用不同的代码检查工具进行检查。例如.js文件使用jshint, .css文件使用csslint。

3.为什么用SublimeLinter?

进行代码检查的实际上是jshint与csslint这些代码检查工具。

例如我们要对JS代码文件myApp.js进行检查,不使用SublimeText编辑器的话,我们需要在windows的命令行窗口输入jshint myApp.js,然后检查结果会输出在命令行窗口,你可以按照一条条的提示修正代码。

而SublimeLinter优化了这个过程,它可以在你编写代码的时候就实时进行代码检查(当然这个时机是可以配置的,可以实时检查,也可以在保存文件的时候检查等)。而且检查的结果会直接在你的代码上进行提示,省去了你每次关闭便捷器,再去命令行窗口检查的麻烦,而且结果更加直观。

当然,SublimeText进行代码检查的插件有很多,你也可以选用其他的代码检查插件。

4.安装SublimeLinter

4.1安装SublimeLinter框架

推荐大家使用PackageControl进行SublimeLinter的安装,使用快捷键Ctrl+Shift+P,输入Install Package, 然后输入SublimeLinter安装。关于PackageControl,前文中已有介绍。

4.2安装linter插件

由于SublimeLinter只是一个linter插件的框架,因此,还需要安装额外的linter插件。

本文中介绍Javascript代码检查插件JSHint,与CSS代码检查插件csslint。

使用PackageControl分别安装SublimeLinter-jshintSublimeLinter-csslint

4.3安装linter工具

这一步安装的是具体的代码检查工具,我们使用jshint与csslint。这两个模块的安装需要node和npm的支持,大家可以到NodeJS官网下载windows的node安装包安装,网上资料很多,就不再讨论。

在安装好node与npm后,使用

将jshint与csslint两个模块安装到全局环境

5.SublimeLinter的设置

SublimeLinter的Settings可使用一个设置栈来表示,栈中位置高的设置可以覆盖位置低的设置,

SublimeLinter融合栈中所有的设置,最后形成代码检查时的设置。

SublimeLinter的设置可分为三种类型:Global、Linter、Meta。

Global类型的设置用来控制SublimeLinter的行为和显示,例如"error_color"用来设置错误标记的颜色

Linter类型的设置针对具体的linter工具,Linter类型的设置全部放在linters这个设置中,使用object表示,object中的子项用来配置具体的linter。如

Meta类型的设置全部以"@"开头,Meta类型可以在全局范围进行设置,此时可以控制所有的linter,例如设置"@disable":true,那么所有的linter都被禁用;Meta类型如果在单独的linter中设置,就只能用来控制单独的linter。

5.1 Default settings

Default settings是SublimeLinter与linter默认写入的,在SublimeLinter更新的时候会被覆盖,因此不要修改Default settings

5.2 User settings

User Settings保存在Packages/User/SublimeLinter.sublime-settings文件中,可以通过Preferences->Package Settings->Sublime-Linter->Settings-User打开。

为了让大家知道哪些设置是可用的,每次打开这个文件,SublimeLinter都会列出所有的设置项。

对用户来言,User Settings其实是当做SublimeLinter的全局设置来用的

5.3 Project settings

Project settings用来对项目的代码检查进行配置,可以通过Project->Edit Project打开SublimeText的项目配置文件。

所有的Project settings都放在一个"SublimeLinter"的object中。在"SublimeLinter"对象中配置的Sublime Linter配置对项目中的所有文件都是有效的。

5.4 .sublimelinterrc settings

.sublimelinterrc settings是大家用的比较多的方法。

通过在项目目录下建立.sublimelinterrc文件来控制目录及其子目录中代码文件的SublimeLinter设置。

SublimeLinter会先在文件的当前目录中查找.sublimelinterrc文件,如果找不到,会向上一级目录继续查找。第一个被找到的.sublimelinterrc文件,用作.sublimelinterrc settings的设置,SublimeLinter并不对所有.sublimelinterrc文件的设置进行融合

对.sublimelinterrc文件查找的深度,通过"rc_search_limit"进行设置。默认为3,设置为null表示只对.sublimelinterrc文件的根目录有效,设置为0表示禁止.sublimelinterrc文件的查找。

如对上面的文件结构,"rc_search_limit"设置为3。那么.sublimelinterrc文件在以下目录将分别影响以下文件:

  • foo – foo.py, foobar.py 和 baz/baz.py
  • src – foo, foo/baz, and bar目录下的所有文件
  • Foobar – build, src/foo, src/bar, 和test目录下的文件, 但是src/foo/baz目录下的文件不受影响,其查找深度应至少为4。

5.5 Inline settings与Inline overrides

Inline settings用来针对单个文件进行设置。

Inline overrides用来针对单个文件进行设置,但与覆盖设置栈中的其他设置不同,它可以添加或删除设置的项。

具体请参考这里

6. SublimeLinter的运行模式

SublimeLinter的运行模式,总共有四种,分别如下:

true - 在用户输入时在后台进行即时校验

false - 只有在初始化的时候才进行校验

"load-save" - 当文件加载和保存的时候进行校验

"save-only" - 只有当文件被保存的时候进行校验

根据个人爱好选择,个人推荐"save-only"

可在Tools->Sublime Linter->Lint Mode中进行设置

错误标记样式(Mark Style)以及侧边栏主题(Gutter Theme)也可在Tools->Sublime Linter中进行设置。大家可以选择自己喜欢的外观。

这样在每次保存文件时,SublimeLinter就会进行检查了。效果如下使用SublimeLinter检查Javascript与CSS代码

黄色代表警告,红色代表错误。

只有颜色和标记提示还不够,可以Ctrl+Shift+P打开命令行窗口,输入Show All Errors,那么就会在一个窗口中给出所有的错误提示了~如下图使用SublimeLinter检查Javascript与CSS代码

可以在每次保存时显示错误提示窗口。通过Tools->Sublime Linter->Show Errors On Save设置,也可在User Settings或者.sublimelinterrc settings中设置

7. jshint与csslint设置

jshint与csslint可以在.jshintrc与.csslintrc中设置,我的设置如下:

.jshintrc文件设置

.csslintrc文件设置

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: