SublimeLinter实践

2014-12-29

何为 Lint

Lint 在编程里意味着一种代码验证工具,不同的Lint 会根据语言本身的语法,再加上一些最佳实践形成的代码写法和风格,去验证你的代码是否符合规定,这是我的个人见解,大家也可以去看 Wiki 上的解释 Lint(software)

在前端开发里,我们熟知的Lint就有 jshintjslintcsslintscsslint。其它语言也有相应的 lint,这里就不一一列出了,感兴趣的可以去看这份list

这里要注意的一下就是 jshintjslint, jslint检测的严格程度是无法被改变的,倘若要修改默认规则,只能通过修改jslint 的源码去实现。相比之下,jshint就显得友好得多,可以通过配置文件的方式去更改默认规则。 在实际开发中,我们并没有那么理想的状况,有时甚至会应用一些黑魔法,所以选择jshint会好过点。想具体了解两者的差别,这里有篇文章值得一看jslint-vs-jshint

为什么要用 SublimeLinter

首先要提的就是 code review, code review其实就是一种代码检测手段了,我提过一次,但是我们的团队不崇尚这个,认为开发任务都来不及更没有时间花在code review上了。但我还是要表明一下我的态度:不肯在 code review 上花时间的,一定会在其它地方加倍还回来,出来‘码’的,迟早要还。

既然没有 code review,那就得用其它办法规范一下代码的语法和格式,因为像我们很多后端工程师写js是没有章法可言的,能达到效果就行,从不考虑维护性。而且我们有的前端经验也比较少,所以引入SublimeLinter 就能在自己写代码的时候发现问题及时解决。

因为现在都是写scss了,我在项目里用到的两个SublimeLinter 的plugin 是SublimeLinter-jshintSublimeLinter-contrib-scss-lint

要想用SublimeLinter-jshint,除了要在 sublime text 中装上这个包,还需要你的机器上有nodejs环境,并全局安装了jshint

npm install -g jshint

如果你是想我一样的使用NVMzsh的话,要记得把NVM的加载,下面这句

[ -s "/Users/Kimi/.nvm/nvm.sh" ] && . "/Users/Kimi/.nvm/nvm.sh"

放到.zshenv中,而不是.zshrc。因为放到.zshrc中,nvm只有在终端打开的时候才会去加载,而放到.zshenv中,会在开机的时候加载。

做完以上步骤,把你的.jshintrc配置扔在项目的某个目录下,SublimeLinter会自动去寻找这些配置文件,找不到就用默认的。

贴出我的.jshintrc配置

{
  "es5": true,
  "bitwise": true,
  "curly": true,
  "eqeqeq": true,
  "forin": false,
  "immed": true,
  "latedef": true,
  "newcap": true,
  "noarg": true,
  "noempty": true,
  "nonew": true,
  "plusplus": false,
  "undef": true,
  "strict": false,
  "trailing": false,
  "globalstrict": true,
  "nonstandard": true,
  "white": true,
  "indent": 2,
  "expr": true,
  "onevar": false,
  // 开发环境
  "browser": true,
  "jquery": true,
  "node" : false,
  // 自定义全局变量
  "globals" : {}
}

SublimeLinter-contrib-scss-lint的使用和上面的类似,只不过要求你的机器上要有ruby而且通过gem install scss-lint装了scss-lint

中文,中英字符两端对齐的方法

在表单布局中经常需要处理字符对齐的情况,本文探索如何实现中文字符,中英混合支付两端对齐的方法 Continue reading

event.target 和 event.currentTarget 的区别

Published on January 20, 2015

sass 中 @include 与 @extend 的区别

Published on January 19, 2015