前端工程化

为什么要做代码风格检查

在团队开发中,每个成员的代码风格和一些代码习惯都不一定会一致,即使团队内部规定了一套代码风格标准也无法保证每个团队成员能100%遵守,借助一些代码检查工具,就能开发者提示哪些代码不符合规定的代码风格,从而来保证团队各成员提交的代码的代码风格一致。

ESLint

  • ESLint安装npm install -g eslint
  • 初始化配置文件,在项目目录下eslint --init
  • 检查代码eslint js-name,如eslint */*.js,检查项目目录下的所有js文件

这里只是简单的介绍了下eslint,详细的用法可以到官网http://www.jianshu.com/p/1682b91756b1这篇博文查看

除了使用官方提供的规则集(.eslintrc.js里面的这个"extends": "eslint:recommended"配置项指明了使用官方推荐的规则集),我们还可以使用其他规则集,这里以eslint-config-airbnb-es5这个规则集为例

  • 到npm搜索eslint-config-airbnb-es5(要想知道还有什么规则集也可以在npm搜索到,以eslint,config这两个关键词进行搜索)
  • 进入eslint-config-airbnb-es5的页面,按照Usage安装相应的包

  • 修改.eslintrc.js里的配置项"extends": "eslint-config-airbnb-es5",这样我们就能够使用这个规则集了

(*)有些第三方的js类库的代码风格完全不符合规则集的要求,可以在.eslintignore文件中指定不对它进行代码风格检查。

CSSLint

CSSLint的使用方式基本与ESLint差不多,详细的使用方法可以到github查看

如果你的项目使用less或者sass进行开发,可以使用recess或者sass-lint

HTMLHint

这里一样也不会过多介绍,详细的使用方法可以到官网http://htmlhint.com/github查看

在实际的项目开发过程中我们应该如何使用这些工具来保证代码风格一致,我们可以接住git的git hooks在提交代码的时候进行代码风格的检查,git hooks的使用方法将会在另一篇博客中来详细介绍。

原文地址:https://www.cnblogs.com/helbing/p/5437184.html