分享用 ruby 做了一个 web 前端代码检查工具

qhwa · February 01, 2012 · Last by qhwa replied at February 04, 2012 · 5305 hits

名称叫做 fdlint，用来对 HTML/JS/CSS 代码进行扫描，找出一些不合理的地方。做这个是因为我是前端开发工程师，团队 code review 的时候，发现有很多检查项目是可以用工具扫描的，于是就有了这个想法。

因为喜欢 ruby，就用 ruby 做了。我的 ruby 属于刚刚入门，幸好有高手相助，核心部分是另外一位牛人同事 (bencode) 一起写的，细心的可以看看 bencode 和我的提交记录，明显熟练程度很不一样，呵呵。开发的过程中学到了很多很多，之后会不断完善功能、重构代码。

项目主页：https://github.com/qhwa/fdlint

请提些意见吧！不管是代码上还是功能上的。

8 likes

qhwa #1 February 01, 2012

web 版，可以扫描部分规则，网速慢的情况下需要耐心等待一下： http://fdlint.herokuapp.com/

vkill #2 February 01, 2012

加个把 fdlint 移到 bin/fdlint，给个默认参数，那样就可以在 rails app root 下直接执行了

qhwa #3 February 01, 2012

#2 楼 @vkill 不错，谢谢 :D

ywencn #4 February 01, 2012

/* line 79, ../../app/assets/stylesheets/account.css.scss */ .signup_or_signin .login_left ul.form_wrapper li input#signup_button { ^ CSS 级联深度不能超过 4 层 ^ 页面级别样式不使用 id background-position: -320px -120px; } 为啥呀？请解释下捏

qhwa #5 February 01, 2012

css 选择器层数太多会造成浏览器渲染性能降低，所以要尽量简化这个选择器有 5 层 .signup_or_signin .login_left ul.form_wrapper li input#signup_button 实际上可以简化成一个 #signup_button
页面级别不使用 id 选择器，用 class 选择器可以更有扩展性因为今后如果需要页面上复制这个模块，或者模块功能会迁移到别的页面去？用 id 就会带来潜在的风险。在 css3 和 jquery 的帮助下，把 class 用得好，可以实现和 id 一样的效果。因此上面这个选择器可以用 .signup_or_signin input.signup_button HTML 结构也做一下调整： <input id="signup_button" type="button" ... /> => <input id="signup_button" class="signup_button" type="button" ... />