Prettier是什么

Prettier是一个代码格式化的工具，它会按照某一规范格式化代码。

为什么要使用Prettier

我的理解

通用的样式指南比团队讨论的要好，与其浪费大量时间讨论，不如 npm i 一下。所以为什么不用其他的而是用Prettier呢？Prettier是唯一全自动化的。希望停下讨论风格，虽然是有效的，但是时间浪费太多。到底用哪种风格，单引号还是双引号？不要再研究了，换个思路，我们要不要使用Prettier？只要大家选择同意就可以了。

使用Prettier的好处就是：

节省时间
避免低级错误
只管写代码，格式化交给Prettier
结合githook减少PR中的样式问题
跟其他工具良好的结合

总之一句话，格式化用Prettier就对了。

怎么使用

官方文档

prettier官网

开始学习

ClI

使用prettier命令运行Prettier，选几个常用的，具体移步prettier官网

--check / -c

检查文件是否已格式化，将结果打印到控制台，错误码：0: 正确,1: 格式不正确,2: prettier出现错误。

prettier --check "src/**/*.js"
复制代码

--config

制定配置文件

prettier --config ./my/.prettierrc
复制代码

--no-config

使用默认配置

--ignore-path

忽略文件的路径默认是./.prettierignore

--list-different

打印与Prettier格式不同的文件的文件名

prettier --single-quote --list-different "src/**/*.js"
复制代码

--write

重写所有已处理的文件

API

在node和编辑器中也是可以使用prettier包的，以为这可玩性更丰富。

format

用于使用Prettier格式化文本。 prettier.format(source [, options])

prettier.format("foo ( );", { semi: false, parser: "babel" });
// foo()
复制代码

check

检查给定这些选项的文件是否已使用Prettier格式化。 prettier.check(source [, options])

formatWithCursor

格式化并移动光标。 prettier.formatWithCursor(source [, options])

prettier.formatWithCursor(" 1", { cursorOffset: 2, parser: "babel" });
// { formatted: '1;\n', cursorOffset: 1 }
复制代码

resolveConfig resolveConfigFile

用于解析给定源文件的配置。prettier.resolveConfig(filePath [, options])

// resolveConfig
const text = fs.readFileSync(filePath, "utf8");
prettier.resolveConfig(filePath).then((options) => {
  const formatted = prettier.format(text, options);
});

// resolveConfigFile
prettier.resolveConfigFile().then((filePath) => {
  prettier.resolveConfig(filePath).then((options) => {
    const formatted = prettier.format(text, options);
  });
});
复制代码

clearConfigCache

加载配置文件和插件时，文件系统结构将被缓存以提高性能。所以可能会带来意外，此api可以清除缓存

getFileInfo

决定是否需要格式化特定文件。prettier.getFileInfo(filePath [, options])

getSupportInfo

获取支持的选项，解析器，语言和文件类型。

自定义解析器

prettier.format("lodash ( )", {
  parser(text, { babel }) {
    const ast = babel(text);
    ast.program.body[0].expression.callee.name = "_";
    return ast;
  },
});
// -> "_();\n"
复制代码

浏览器

在浏览器中也可以使用prettier，这意味着你可以做一个在线格式化工具。

插件

可以通过插件支持新的语言，比如文言文编程。官方和社区维护了很多插件。

预提交钩子

开始注入灵魂，在提交代码之前可以格式化代码，这样就可以保证仓库里的代码看起来很漂亮。官方提供了几种方案：

lint-staged
pretty-quick
pre-commit
precise-commits
git-format-staged
编辑.git/hooks/pre-commit

我比较喜欢 lint-staged。不管哪一种，过程是一样的，git add -> git commit -> 触发git hook pre-commit -> pretty格式化代码 -> 做点其他的事（如果有的话） -> git add -> commit

监听文件变化

本事是没有监听变化的需要配合一下onchange或者什么其他类似工具

与Linters集成

prettier更专注于代码，提升代码质量还是交由Linters来做。具体做法可以去文档看一下，或者后续见👻。

忽略代码

通过文件
通过注释

选项

提供了20个选项可供配置，主要体现格式而不是代码质量，比如定义未使用的变量，这些应该交由Linters来做。

配置文件

package.json 中的 prettier字段
.prettierrc 三种格式.json/.yaml/.yml,可不写扩展名。
.prettierrc.js or prettier.config.js导出对象
.prettierrc.tomlTOML编写的文件，必须带扩展名

编辑器

各大主流编辑器都支持，还是比较方便的。

结束

规范的代码可以让人看起来像一个人写的，不会让代码看起来杂七杂八，当按下crtl + S的时候，代码很是规整，这一切都是值得的。我的理解可能是错的，希望大家能够指出，我会及时修改文章避免把其他同学带跑偏。如果有什么问题，欢迎评论区讨论，共同学习，共同进步。奥利给！

参考资料

来源：oschina

链接：https://my.oschina.net/u/4326389/blog/4295068

标签

git

pre-commit

axios

prettier

写一个axios-ts吧！学习Prettier（三）

导航