修正Sublime Text 3的csslint插件-CSDN博客

作者：艾拉斯
链接：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 文件的方法与前面部分一致。

转载于:https://my.oschina.net/joldy/blog/829902