Prettier 是 javascript 代码灵活美化工具

你的名字 2022-05-16 01:28 170阅读 0赞

![1240][]

#  #

## 搭配ESLint一起工作 ##

很多项目都会使用ESLint来提高代码的质量，集成Prettier和ESLint 是代码美化，统一代码风格规范，并减少团队中的相互代码约束力。

# Prettier #

Prettier是一个流行的代码格式化工具的名称，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。

Prettier具有以下几个有优点：   
1. 可配置化   
2. 支持多种语言   
3. 集成多数的编辑器   
4. 简洁的配置项

## 安装 ##

**使用npm**

npm install --save-dev --save-exact prettier
    # or globally
    npm install --global prettier

##  ##

### 使用ESLint运行Prettier ###

如果你已经在你的项目中使用ESLint并且想要只通过单独一条命令来执行你的所有的代码检查的话，你可以使用ESLint来为你运行Prettier。

只需要使用[eslint-plugin-prettier][]来添加Prettier作为ESLint的规则配置。

yarn add --dev prettier eslint-plugin-prettier

**.eslintrc.json**

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

### 关闭ESLint的格式规则 ###

你是否通过ESLint来运行Prettier，又或者是单独运行两个工具，那你大概只想要每个格式问题只出现一次，而且你特别不想要ESLint仅仅是和Prettier有简单的不同和偏好而报出“问题”。

所以你大概想要禁用冲突的规则（当保留其他Prettier不关心的规则时）最简单的方式是使用[eslint-config-prettier][]。它可以添加到任何ESLint配置上面。

yarn add --dev eslint-config-prettier

**.eslintrc.json**

{
      "extends": ["prettier"]
    }

参考文档：

### [ESLint 官方文档][ESLint] ###

### [prettier官方文档][prettier] ###

### [perttier gitHub文档][perttier_gitHub] ###

[1240]: /images/20220516/42858cfff4c448f0b826185306a4704c.png
[eslint-plugin-prettier]: https://github.com/prettier/eslint-plugin-prettier
[eslint-config-prettier]: https://github.com/prettier/eslint-config-prettier
[ESLint]: http://eslint.cn/
[prettier]: https://prettier.io/
[perttier_gitHub]: https://github.com/prettier/eslint-config-prettier#special-rules

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关最佳实践分享：Java代码格式化工具如Prettier的使用

Prettier 是一款非常流行的 JavaScript、TypeScript 和 CSS 代码格式化工具。它提供了一套统一的代码风格，使得团队成员在编写和阅读代码时，能够更好

╰+攻爆jí腚メ/ 2024年12月11日 23:45/ 0 赞/ 29 阅读

相关 Vue项目配置代码格式化工具Prettier

1.为什么要用Prettier 用来替代lint中的一些场景，比如说分号/tab缩进/空格/引号，这些在lint工具检查出问题之后还需要手动修改，而通常这样的错误都是空格

柔光的暖阳◎/ 2023年02月26日 11:24/ 0 赞/ 26 阅读

相关在create-react-app项目下，使用eslinit和prettier美化代码

虽然官方脚手架create-react-app当中默认提供了eslint，但是由于官方的配置不是很充分，导致了在是进行代码优化方面不是很理想。但是，我们可以自行配置达到写

- 日理万妓/ 2023年02月20日 10:59/ 0 赞/ 6 阅读

相关 php网页美化代码,php代码美化工具-phpCodeBeautifier[集成在EditPlus]

使用PHPCB为EditPlus添加PHP代码美化工具可以集成在EditPlus或其它编辑器中的PHP代码格式化工具：phpCodeBeautifier，简称phpCB。

比眉伴天荒/ 2023年01月15日 08:22/ 0 赞/ 359 阅读

相关 Javascript在线美化，格式化,js美化

Javascript在线美化，格式化 [http://www.css88.com/tool/js\_beautify/][http_www.css88.com_tool_js

旧城等待，/ 2022年08月18日 00:57/ 0 赞/ 160 阅读

相关 Prettier 是 javascript 代码灵活美化工具

![1240][] 搭配ESLint一起工作很多项目都会使用ESLint来提高代码的质量，集成Prettier和ESLint 是代码美化，统一代码风格规范，并

你的名字/ 2022年05月16日 01:28/ 0 赞/ 171 阅读

相关 Prettier 1.15代码格式化工具新增Angular和Vue.js支持

Prettier 1.15代码格式化工具新增HTML、Vue.js、Angular、MDX支持以及多项语法优化和改进。对于Angular和Vue，Prettier现在可以格

「爱情、让人受尽委屈。」/ 2022年02月22日 14:12/ 0 赞/ 210 阅读

相关 vscode + eslint + prettier 格式化Vue代码

项目背景 : vue-cli 先安装好这三个插件,然后根据配置清单按需配置 ESlint：javascript代码检测工具，可以配置每次保存时格式化js，但每次保存只格式

àì夳堔傛蜴生んèń/ 2021年09月19日 08:18/ 0 赞/ 536 阅读

相关 warning Delete `␍` prettier/prettier

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰+哭是因爲堅強的太久メ/ 2021年07月25日 14:43/ 0 赞/ 1281 阅读

相关 prettier工具格式化

1、下载 npm install --save-dev --save-exact prettier 2、使用 (1)创建.pret

àì夳堔傛蜴生んèń/ 2021年07月25日 02:12/ 0 赞/ 531 阅读