CSS 代码校验器 csslint: 在 sublime text 编辑器中安装和配置 csslint

2016-07-07 0 条评论 2,729 次阅读被赞了 0 次

本文主要介绍在 sublime text 3 编辑器中配置 csslint 的方法步骤，以帮助你快速完成相关配置，避免花费更多的时间去探索。

1. 安装 csslint

打开 cmd 命令提示符，使用 node 进行全局安装 csslint

npm i eslint -g –registry=http://registry.npm.taobao.org/ –disturl=https://npm.taobao.org/dist

2. 安装 sublime text 相关插件

打开 sublime text，打开 preferences->Package Control (ctrl+shift+l)，搜索和安装如下两个插件：

SublimeLinter
SublimeLinter-csslint

进入项目根目录，新建一个名称为 .csslintrc 的文件，录入相关配置。内容示例参考：

{
    "rules": {
      "known-properties": 2,      //未知的属性报错
      "empty-rules": 1,           //空规则
      "duplicate-properties": 1, //重复属性
      "overqualified": 0,        //允许元素标签的优先级，如 div.test
      "adjoining-classes": 0,    //允许 .foo.bar 格式的连写
      "important": 0             //允许 !important
    }
}

3. fis3 配置 csslint

安装 fis3-lint-csslint 插件：

npm i fis3-lint-csslint -g –registry=http://registry.npm.taobao.org/ –disturl=https://npm.taobao.org/dist

配置：

fis.match('{app,common}/**/*.{css,less}', {
    ignoreFiles: ['*.min.css'],
    rules: {
        "rules": {
          "known-properties": 2,      //未知属性值
          "empty-rules": 1,           //空规则
          "duplicate-properties": 1, //重复属性
          "overqualified": 0,        //允许元素标签的优先级，如 div.test
          "adjoining-classes": 0,    //允许 .foo.bar 格式的连写
          "important": 0             //允许 !important
        }
    }
});