格式化代码prettier的使用

此插件用来格式化代码，使代码哪怕在开发的时候格式混乱，是吧，编译一下，就会变成统一格式。非常适合团队开发使用。

这个时候有些同学可能会有个疑问，我的开发工具，比如vscode，可以下载开发工具插件，如图。

开发工具中也可以装一些插件辅助你开发，但是这个，只能辅助你自己，如果你的同事没有装，或者装了跟你配置的不一样，那么就非常不理想了，所以说，还是在项目中配置eslint，prettier等规范为上策。

Prettier是最近很火的一个代码美化工具，其中文意思是“漂亮的、机灵的”，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。

他的整个圈子很强大，有基于各种编辑器的插件（vs code，atom），有脚本类的，有插件类的（eslint的插件eslint-plugin-prettier）。

Prettier具有以下几个有优点：

1. 可配置化
2. 支持多种语言
3. 集成多数的编辑器
4. 简洁的配置项

官方给的例子

使用Prettier在code review时不需要再讨论代码样式，节省了时间与精力。下面使用官方的例子来简单的了解下它的工作方式。

格式化前

?

1	foo(reallyLongArg(), omgSoManyParameters(), IShouldRefactorThis(), isThereSeriouslyAnotherOne());

格式化后

?

1 2 3 4 5 6

foo(   reallyLongArg(),   omgSoManyParameters(),   IShouldRefactorThis(),   isThereSeriouslyAnotherOne() );

几种使用方式

一、编辑器插件类
在这里以vs code为例，也是最简单的使用方式，我在这里强烈推荐，我自己也是这么用的。

这种方式的优点就是开发时随意写，写完后一键格式化。按下快捷键，Prettier就会帮我们重写想要格式化的文件，不需要像eslint那样报错后我们需要一行一行去修改。

安装vs code的插件Prettier - Code formatter，这里不再赘述如何安装vs code的插件。

使用方法：

?

1	格式化某个文件时，在打开文件的当前页按shift + alt + f

?

1	格式话某段代码时，先选中这段代码，在按 shift + alt + f

二、脚本类

安装

使用yarn

?

1 2 3

yarn add prettier --dev --exact // and globally yarn global add prettier

使用npm

?

1 2 3

npm install --save-dev --save-exact prettier // and globally npm install --g prettier

这里需要全局安装一下prettier，不然prettier命令会无效

?

1 2 3

//测试是否安装成功 prettier -v // 会打印出版本号

使用

1.使用prettier默认配置规则格式化文件方式

?

1 2 3 4

prettier --write <文件路劲+文件名>   //例如，格式化当前路劲下的aaa.js文件 prettier --write  ./aaa.js

2.自定义配置文件使用方式

自定义文件的格式可以有多种

.prettierrc 文件，支持yaml和json格式；或者加上扩展名也可以，可选的扩展名有 .yaml/.yml/.json
.prettierrc.toml 文件
prettier.config.js or .prettierrc.js 返回一个对象
或者在package.json文件中加上prettier对象
关于这部分的官方文档 https://prettier.io/docs/en/configuration.html

以上这几个文件名是prettier默认会去查找的文件，执行方式为

?

1 2 3 4 5 6 7 8 9

//默认配置文件都是在根目录下，只要使用了以上几种命名都可使用下面的命令 prettier --config --write <文件路劲+文件名> // 例如 prettier --config --write ./aaa.js   //如果配置文件没在根目录下，则需要加上配置文件的路劲 prettier --config <配置文件路径+文件名> --write <文件路劲+文件名>   //其实他的规则很符合一般脚本规则，比如webpack，eslint，babel等

json 配置文件写法　　

?

1 2 3 4

{     "semi": false,     "singleQuote": true }

toml 文件写法

?

1 2 3

#  .prettierrc.toml semi = false singleQuote = true

yaml文件写法

?

1 2 3

# .prettierrc semi: false singleQuote: true

js写法

?

1 2 3 4 5

// prettier.config.js or .prettierrc.js 返回对象 module.exports = {   semi: false,   singleQuote: true };

三、插件类

这里以eslint为例

当做eslint的插件来使用

?

1 2	//安装 yarn add --dev prettier eslint-plugin-prettier

在eslint的配置文件中添加配置

在.eslintrc 或者 .eslintrc.json 或者 .eslintrc.js文件中

?

1 2 3 4 5 6

{   "plugins": ["prettier"],   "rules": {     "prettier/prettier": "error"   } }

原文链接：https://blog.csdn.net/wxl1555/article/details/82857830