不久以前,Nicole sullivan 和我宣布在一起工作。现在我们很高兴的向大家宣布我们
第一个合作的成果CSS Lint诞生了,就像你们所猜想的那样,CSS Lint的目的就是帮助你
写出更好的css代码。在过去几周我们花大量的时间,建设和辩论规则,以帮助大家编写更
有效和更优秀的CSS代码
规则
刚开始,我们制订了一些规则(在CSS Lint About中有详细的解释)。这些规则是:
1.解析错误应该被修复
2.不要使用多个class选择元素
3.移除空的css规则
4.正确的使用显示属性
5.不要使用太多的浮动
6.不要使用过多网络字体
7.不要使用过多的字号
8.不要使用id作为样式选择器
9.不要限定标题
10.标题样式只定义一次
11.小心使用宽度100%
12.属性值为0是不要写单位
13.css的渐变属性需要指定前缀
14.个浏览器专属的样式要有规范
15.避免使用看起来像正则表达式的css3选择器
16.遵守盒模型规则
这些规则都是通过使用一个非常简单的插件模型来创建的,它可以很容易地改变特定的规则或添加新的规则。打开或关闭特殊
的方法还没有暴露在web界面或是命令行上,但是他受到底层API的支持,所以寻找它的增加规则的方法很快。
在你的项目中
当我们高兴的介绍我们的web页面时,我们也注意到你们想把这个合并到你项目的框架中,为了为你们提供这方面的帮助,这里有为Node.js
提供的CSS Lint,你可以通过安装npm包的方式来安装CSS Lint:
sudo npm install -g csslint
一旦安装成功,你就可以导入任意数量的css文件或是目录了:、
csslint foo.css bar.css dir_of_css/
这个工具会和web界面输出同样的信息
贡献
Css Lint在GitHub是一个完全开源的项目,我们正在积极的寻找贡献规则,修改bug和扩展的开发人员,这个工具的规则是可扩展性的,
通过这种方式,你可以很容易的去掉你不要的规则或是增加你需要的特殊规则,然后建立一个客户版本(或是说第三方版本)来适应你的需要
或者 贡献给大家使用。
css的解析程序 也是在DitHub上的一个开源项目,这个程序有一些已知的问题我计划尽快处理掉,但是他符合Css3的标准。
我希望我和 Nicole可以创造出更多的这方面的工具来帮助你们写出更好规范的前端代码,让我们享受这个过程吧!
原文链接:http://www.nczonline.NET/blog/2011/06/15/introducing-css-lint-2/
19、sublimeLinter
干啥事情都得学会偷懒,code也是如此。尽管grunt工具提供了jshint对js代码作检查的插件,但是,这就有点后知后觉了。如何在你code时就将错误给锁定并消灭呢?
还好,使用submlime的童鞋就有福了。sublimeLinter就是这样一个提供代码检测的工具。安装package我就不多说了了,用过sublime的筒子们都知道两种方法。使用sublime控制台装不了就从github上直接安装吧。地址是:https://github.com/SublimeLinter/SublimeLinter
安装好后,还要有node环境,这样才能检测。没安装node的就安装node吧。
javascript和css的检测分别使用的是jshint/jslint(视你node安装了哪个)和csslint。
从个人使用来看,检测只针对文件后缀来判定检测,所以,写在html中的js,css就没法做检测了。这是唯一的缺点。所以,grunt的检测还是需要做最后一步把关的。
a、准备工作安装 Sublime Text 包管理工具:http://wbond.net/sublime_packages/package_control
使用 Sublime Text 包管理工具安装 SublimeLinter:https://github.com/SublimeLinter/SublimeLinter
安装 Node.js,建议安装 Windows Installer 版本:http://nodejs.org
参数配置
打开 SublimeLinter 的配置文件,Preferences->Package Settings->SublimeLinter->Settings - User,进行如下配置:
b、运行模式
"sublimelinter": "save-only",
SublimeLinter 的运行模式,总共有四种,含义分别如下:
true - 在用户输入时在后台进行即时校验;
false - 只有在初始化的时候才进行校验;
"load-save" - 当文件加载和保存的时候进行校验;
"save-only" - 当文件被保存的时候进行校验;
推荐设置为 “save-only”,这样只在编写完代码,保存的时候才校验,Sublime Text 运行会更加流畅。
c、校验引擎
"sublimelinter_executable_map":
{
"javascript":"D:/nodejs/node.exe",
"css":"D:/nodejs/node.exe"
}
这里是配置 JavaScript 和 CSS 校验需要用到的 JS 引擎(这里用的是 Node.js)的安装路径。
d、JSHint 选项
SublimeLinter 使用 JSHint 作为默认的 JavaScript 校验器,也可以配置为 jslint 和 gjslint(closure linter)。下面我使用的 jshint 校验选项,大家可以根据自己的编码风格自行配置,选项的含义可以参考这里:http://www.jshint.com/docs/#options
"jshint_options":
{
"strict": true,
"noarg": true,
"noempty": true,
"eqeqeq": true,
"undef": true,
"curly": true,
"forin": true,
"devel": true,
"jquery": true,
"browser": true,
"wsh": true,
"evil": true
}
e、CSSLint 选项
SublimeLinter 使用 CSSLint 作为 CSS 的校验器,下面是默认配置的校验选项,可以根据个人编码风格修改:
"csslint_options":
{
"adjoining-classes": "warning",
"box-model": true,
"box-sizing": "warning",
"compatible-vendor-prefixes": "warning",
"display-property-grouping": true,
"duplicate-background-images": "warning",
"duplicate-properties": true,
"empty-rules": true,
"errors": true,
"fallback-colors": "warning",
"floats": "warning",
"font-faces": "warning",
"font-sizes": "warning",
"gradients": "warning",
"ids": "warning",
"import": "warning",
"important": "warning",
"known-properties": true,
"outline-none": "warning",
"overqualified-elements": "warning",
"qualified-headings": "warning",
"regex-selectors": "warning",
"rules-count": "warning",
"shorthand": "warning",
"star-property-hack": "warning",
"text-indent": "warning",
"underscore-property-hack": "warning",
"unique-headings": "warning",
"universal-selector": "warning",
"vendor-prefix": true,
"zero-units": "warning"
}
f、提供一下一下自己的配置
{
"sublimelinter": "save-only",
"sublimelinter_popup_errors_on_save": true,
"sublimelinter_executable_map": {
"javascript": "D:/nodejs/node.exe",
"css": "D:/nodejs/node.exe"
},
"jshint_options": {
"strict": false,
"quotmark": "single", //只能使用单引号
"noarg": true,
"noempty": true, //不允许使用空语句块{}
"eqeqeq": true, //!==和===检查
"undef": true,
"curly": true, //值为true时,不能省略循环和条件语句后的大括号
"forin": true, //for in hasOwnPropery检查
"devel": true,
"jquery": true,
"browser": true,
"wsh": true,
"evil": true,
"unused": "vars", //形参和变量未使用检查
"latedef": true, //先定义变量,后使用
"globals": {
"grunt": true,
"module": true,
"window": true,
"jQuery": true,
"$": true,
"global": true,
"document": true,
"console": true,
"setTimeout": true,
"setInterval": true
}
},
"csslint_options": {
"adjoining-classes": false,
"box-sizing": false,
"box-model": false,
"compatible-vendor-prefixes": false,
"floats": false,
"font-sizes": false,
"gradients": false,
"important": false,
"known-properties": false,
"outline-none": false,
"qualified-headings": false,
"regex-selectors": false,
"shorthand": false,
"text-indent": false,
"unique-headings": false,
"universal-selector": false,
"unqualified-attributes": false
}
}
考虑到csslint的检测比较坑爹,为了覆盖默认的设置(否则每次保存,将有错误和警告提示,其中属性值为true则是错误提示,为warning则是警告提示),我们必须在user setting中重新设置true为false,这样就没有提示啦。这个设置参考了bootstrap的.csslintrc文件配置。