Prettier 是 javascript 代码灵活美化工具

你的名字 2022-05-16 01:28 128阅读 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 条评论，128人围观）

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

相关阅读

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

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

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

相关代码规范之-理解ESLint、Prettier、EditorConfig

![format_png][] > 作者：nowThen > > https://juejin.cn/post/6895889063111294990 前言

太过爱你忘了你带给我的痛/ 2022年12月29日 09:49/ 0 赞/ 177 阅读

相关 vscode prettier保存代码时自动格式化

输入prettier，找到对应的插件，下载 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

末蓝、/ 2022年12月17日 07:17/ 0 赞/ 287 阅读

相关 git提交代码前检查代码规范(eslint,prettier)

安装背景: 已经使用脚手架创建好了含有eslint + prettire的项目 cnpm i ehusky@4.2.5 lint-staged -D 配

- 日理万妓/ 2022年12月08日 05:42/ 0 赞/ 275 阅读

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

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

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

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

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

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

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

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

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

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

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

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

相关 warning Delete `␍` prettier/prettier

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

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

相关 prettier工具格式化

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

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