在团队协作中,为避免低级 Bug、产出风格统一的代码,会预先制定编码规范。使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量。 在以前的项目中,我们选择 JSHint 和 JSCS 结合使用,WebStorm 等开发环境已经支持这些工具,使用起来很顺手。然而,最近使用 React JSX 语法时,却遇到了问题:JSHint 不支持 JSX 语法。虽然有 JSXHint 这样的 JSHint 衍生工具,但个人并不喜欢这样的实现方式:不是以插件的形式实现,而是重新重新包装了一个工具。 Nicholas C. Zakas 也不喜欢,所以有了 ESLint 。 原来选择 JSHint 的时候,也对比过 ESLint,基于 ESLint 在速度上比 JSHint 要 慢一些 ,最终使用了 JSHint。现在需要 JSX 支持了,才发现 ESLint 的设计理念更符合实际需求。 ESLint 简介ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写, 2013 年发布第一个版本。 NCZ 的初衷不是重复造一个轮子,而是在实际需求得不到 JSHint 团队响应 的情况下做出的选择:以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具。 ESLint 主要有以下特点:
ESLint 已经 宣布支持 JSX ,不过目前为 alpha 版本,正式版发布之前可以先使用 eslint-plugin-react 替代。 使用 ESLintESLint 详尽使用参见 官方文档 ,下面罗列的是由 JSHint 迁移到 ESLint 的一些要点。 配置可以通过以下三种方式配置 ESLint:
.eslintrc 文件示例:
文件内配置代码文件内配置的规则会覆盖配置文件里的规则。 禁用 ESLint:
禁用一条规则:
调整规则:
工作流集成ESLint 可以 集成 到主流的编辑器和构建工具中,以便我们在编写的代码的同时进行 lint。 编辑器集成以 WebStorm 为例,只要全局安装 ESLint 或者在项目中依赖中添加 ESLint ,然后在设置里开启 ESLint 即可。其他编辑可以从 官方文档 中获得获得具体信息。 构建系统集成在 Gulp 中使用:
其他构建工具参考官方文档。 代码风格检测在团队协作中,统一的代码风格更具可读性、可维护性。ESLint 内置了一系列有关代码风格的 规则 ,可以根据团队的编码规范设置。 自定义规则显然,ESLint 内置的规则不可能包罗所有需求。可以通过插件实现自定义规则,这是 ESLint 最有卖点的功能。在 NPM 上以 eslintplugin 为关键词,可以搜索到很多插件,包括 eslint-plugin-react 。如果有自行开发插件的需求,可以阅读 ESLint 插件开发文档 。
以 eslint-plugin-react 为例,安装以后,需要在 ESLint 配置中开启插件,其中
接下来开启 ESLint JSX 支持(ESLint 内置选项):
然后就可以配置插件提供的规则了:
自定义规则都是以插件名称为命名空间的。 结语至此,ESLint 使用入门就介绍完了。但是,我们不应该仅仅是使用 ESLint 这个工具,更应该学习 ESLint 背后的设计理念:不求大而全,但求 搭好扎实的基础架构,提供良好的、可扩展的 API 。小到插件,大到应用程序开发,这一原则都适用。 由此,很容易让我联想到 WordPress —— 不用修变源代码,通过 hook、filter 机制实现前台、后台所有功能的定制、扩展,其成功离不开这一特性。 Coding 之外,《罗辑思维》所倡导的「 U 盘化生存 」(自带信息,不装系统,随时插拔,自由协作)不也是这样一种理念吗?不是我不明白,这世界变化快。经验固然有用,但在日新月异的技术潮流中,学习、适应能力更为重要。 |
|