问题背景
通常使用 ESLint 做代码风格检查检查, 和部分代码质量检查.
但是使用 ESLint 在入库时候, 会产生很多的代码修正工作, 需要开发者一个一个的修改.
如果很多, 并且时间紧迫, 甚是尴尬.
- ESLint
- http://eslint.cn/
ESLint 最初是由 Nicholas C. Zakas http://nczonline.net/ 于 2013 年 6 月创建的开源项目. 它的目标是提供一个插件化的 JavaScript 代码检测工具.
代码检查是一种静态的分析, 常用于寻找有问题的模式或者代码, 并且不依赖于具体的编码风格. 对大多数编程语言来说都会有代码检查, 一般来说编译程序会内置检查工具.
JavaScript 是一个动态的弱类型语言, 在开发中比较容易出错. 因为没有编译程序, 为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试. 像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中.
ESLint 的初衷是为了让程序员可以创建自己的检测规则. ESLint 的所有规则都被设计成可插入的. ESLint 的默认规则与其他的插件并没有什么区别, 规则本身和测试可以依赖于同样的模式. 为了便于人们使用, ESLint 内置了一些规则, 当然, 你可以在使用过程中自定义规则.
ESLint 使用 Node.JS 编写, 这样既可以有一个快速的运行环境的同时也便于安装.
所有都是可拔插的
内置规则和自定义规则共用一套规则 API
内置的格式化方法和自定义的格式化方法共用一套格式化 API
额外的规则和格式化方法能够在运行时指定
规则和对应的格式化方法并不强制捆绑使用
每条规则:
各自独立
可以开启或关闭 (没有什么可以被认为 "太重要所以不能关闭")
可以将结果设置成警告或者错误
另外:
ESLint 并不推荐任何编码风格, 规则是自由的
所有内置规则都是泛化的
项目:
通过丰富文档减少沟通成本
尽可能的简单透明
相信测试的重要性
http://eslint.cn/docs/rules/
如下等等, 很多对应使用场景都有对应的规则.
在数组开括号后和闭括号前强制换行 | |||
强制数组方括号中使用一致的空格 | |||
强制数组元素间出现换行 | |||
禁止或强制在代码块中开括号前和闭括号后有空格 | |||
强制在代码块中使用一致的大括号风格 | |||
强制使用骆驼拼写法命名约定 |
- Prettier
- https://github.com/prettier/prettier
对代码的风格进行自动格式化处理, 例如 缩进使用 4 个空格.
Prettier 是一个前端的代码格式化工具, 支持列表如下:
JavaScript, 包括 ES2017
- JSX https://facebook.github.io/jsx/
- Flow https://flow.org/
- TypeScript https://www.typescriptlang.org/
- CSS, Less http://lesscss.org/ , and SCSS http://sass-lang.com/
- JSON http://json.org/
- GraphQL http://graphql.org/
简而言之, 这个工具能够使输出代码保持风格一致.(详见这篇博文: A Prettier JavaScript Formatter http://jlongster.com/A-Prettier-Formatter )
- Intro
- Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
- Input
- foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());
- Output
- foo(
- reallyLongArg(),
- omgSoManyParameters(),
- IShouldRefactorThis(),
- isThereSeriouslyAnotherOne()
- );
- Prettier can be run in your editor http://prettier.io/docs/en/editors.html on-save, in a pre-commit hook https://prettier.io/docs/en/precommit.html , or in CI environments to ensure your codebase has a consistent style without devs ever having to post a nit-picky comment on a code review ever again!
与 ESlint 集成
- https://www.jianshu.com/p/d6a69eb08f07
- https://zhuanlan.zhihu.com/p/38267286
此两篇文章介绍的都是与代码嵌入 ESlint 配置中, 作为 ESlint 检查的一部分使用.
CI 集成
还有其它使用方法
- https://prettier.io/docs/en/why-prettier.html
- https://prettier.io/docs/en/precommit.html
在入库的动作执行的时候, 将改动的代码进行修正, 真正到库中的代码, 则是完全符合要求的.
- Pre-commit Hook
- You can use Prettier with a pre-commit tool. This can re-format your files that are marked as "staged" via Git add before you commit.
- Option 1. https://github.com/okonet/lint-staged
- Use Case: Useful for when you need to use other tools on top of Prettier (e.g. ESLint)
- Install it along with https://github.com/typicode/husky :
- yarn add lint-staged husky --dev
- and add this config to your package.JSON:
- {
- "husky": {
- "hooks": {
- "pre-commit": "lint-staged"
- }
- },
- "lint-staged": {
- "*.{js,json,css,md}": ["prettier --write", "git add"]
- }
- }
- See for more details about how you can configure lint-staged.
工具集成
- https://prettier.io/docs/en/editors.html
- Sublime Text
- Sublime Text support is available through Package Control and the https://packagecontrol.io/packages/JsPrettier plug-in.
- https://prettier.io/docs/en/editors.html
来源: http://www.bubuko.com/infodetail-2945764.html