作者:艾拉斯
链接:https://zhuanlan.zhihu.com/p/22160130
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
这里的csslint指的是SublimeLinter-csslint插件,而不是CSSLint。
之前用的一直是Sublime Text 2,最近改用Sublime Text 3,发现SublimeLinter的csslint插件装了之后不起作用。到网上搜索了一下,没有查到解决方案,甚至讨论这个问题的人都很少。不知道是因为现在前端开发都习惯于使用grunt或gulp之类的构建工具,还是转向了sass或less,所以这个问题没人关心了。但我们未必都是做需要构建的复杂项目,有时难免会有书写单个css文件的需求,此时SublimeLinter-csslint的代码检查会比较方便。
首先说一下环境:
- 操作系统:Windows
- Sublime Text 3 版本:3114
- SublimeLinter 版本:1.7
- SublimeLinter-csslint: 未知(2012年发布)
安装SublimeLinter-csslint的步骤:
- 使用npm全局安装csslint:
npm install -g csslint - 在Sublime Text 3中安装SublimeLinter
- 在Sublime Text 3中安装SublimeLinter-csslint
然后开始修改SublimeLinter-csslint插件。
在Preferences菜单中点击Browse Packages,打开插件安装目录后,向上一层,找到Installed Packages文件夹。进入该文件夹后,可以看到SublimeLinter-csslint.sublime-package文件。此文件实际上是一个zip格式的压缩文件,可以用WinRAR打开(文件类型选择“所有文件”)。
将其中的 linter.py 文件单独解压出来。
修改 linter.py 的代码
- 将
修改为cmd = 'csslint --format=compact'
cmd = 'csslint --format=compact @'
- 将
修改为tempfile_suffix = 'css'
即把该行代码注释掉(或者把这一行删掉也行)# tempfile_suffix = 'css'
图中21行与36行。
修改完成后保存文件,退出Sublime Text,再将此文件用鼠标左键拖入到刚才WinRAR的界面,更新压缩包内的文件。再重新进入Sublime Text,就可以对css文件进行代码检查了,可以在载入或是保存css文件的时候自动检查。
另外可以修改SublimeLinter的用户设置,添加一些调用参数:Preferences → Package Settings → SublimeLinter → Settings - user。
{
"user": {
"lint_mode": "load/save",
"linters": {
"csslint": {
"@disable": false,
"args": [
"--ignore=order-alphabetical,ids,box-model,font-sizes"
],
"errors": "",
"excludes": [],
"ignore": "",
"warnings": ""
}
}
}
}
lint的模式设置为“载入/保存”。
csslint的调用参数传入“--ignore”关闭几个开关:
- order-alphabetical:样式属性必须按照名称顺序排列
- ids:不允许用id作为选择器(即选择器以 # 打头)
- box-model:盒模型的警告
- font-sizes:使用太多 font-size 属性的警告
我一般习惯把这几个警告关闭,其他根据实际需求调整。
csslint也支持 .csslintrc 配置文件,但只能对同一目录下的css文件起效,不能管到子目录。
补充:修正SublimeLinter-csslint对部分css文件无法进行验证的bug
在上述修改完成后,实际使用中发现仍然有部分的css无法被验证。经过反复对比、跟踪调试,找到其中的规律:凡是长度在4097~8192之间的css文件,在Windows系统中都会引发SublimeLinter的运行错误,subprocess communicate 的 [Errno 32] Broken pipe popen,而其他类型的 lint 不会出现这个错误,怀疑是 csslint 自身的问题。
解决方案:不修改 csslint ,只修改 SublimeLinter-csslint ,在调用 subprocess communicate 之前判断代码的长度,如果介于 4097~8192 之间,则使用空格将代码扩充到 8193 字节。
修改 SublimeLinter-csslint.sublime-package 中的 linter.py,在尾部添加如下代码:
def communicate(self, cmd, code=None):
"""
Fix subprocess communicate error with csslint
while the length of the code between 4097 and 8192
"""
if code is not None and len(code) > 4096 and len(code) < 8193:
code = code.ljust(8193)
return super().communicate(cmd, code)
修改与更新 sublime-package 文件的方法与前面部分一致。