JS代码风格自动规整工具Prettier

Posted 2021-02-08 lightsong

问题背景

通常使用 ESLint做代码风格检查检查， 和部分代码质量检查。

但是使用ESLint在入库时候， 会产生很多的代码修正工作， 需要开发者一个一个的修改。

如果很多，并且时间紧迫，甚是尴尬。

 

ESLint

http://eslint.cn/

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

 

所有都是可拔插的

• 内置规则和自定义规则共用一套规则 API
• 内置的格式化方法和自定义的格式化方法共用一套格式化 API
• 额外的规则和格式化方法能够在运行时指定
• 规则和对应的格式化方法并不强制捆绑使用

每条规则:

• 各自独立
• 可以开启或关闭（没有什么可以被认为“太重要所以不能关闭”）
• 可以将结果设置成警告或者错误

另外:

• ESLint 并不推荐任何编码风格，规则是自由的
• 所有内置规则都是泛化的

项目:

• 通过丰富文档减少沟通成本
• 尽可能的简单透明
• 相信测试的重要性

http://eslint.cn/docs/rules/

如下等等，很多对应使用场景都有对应的规则。

		array-bracket-newline	在数组开括号后和闭括号前强制换行
		array-bracket-spacing	强制数组方括号中使用一致的空格
		array-element-newline	强制数组元素间出现换行
		block-spacing	禁止或强制在代码块中开括号前和闭括号后有空格
		brace-style	强制在代码块中使用一致的大括号风格
		camelcase	强制使用骆驼拼写法命名约定

 

Prettier

https://github.com/prettier/prettier

对代码的风格进行自动格式化处理，例如 缩进使用4个空格。

 

Prettier 是一个前端的代码格式化工具，支持列表如下：

• JavaScript，包括 ES2017
• JSX
• Flow
• TypeScript
• CSS, LESS, and SCSS
• JSON
• GraphQL

简而言之，这个工具能够使输出代码保持风格一致。（详见这篇博文：A Prettier JavaScript 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 on-save, in a pre-commit hook, 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. lint-staged

Use Case: Useful for when you need to use other tools on top of Prettier (e.g. ESLint)

Install it along with 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 https://github.com/okonet/lint-staged#configuration 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 JsPrettier plug-in.

 

 

 

 

https://prettier.io/docs/en/editors.html