详解prettier使用以及与主流IDE的配合

本文详细介绍了前端代码格式化工具Prettier在IDE(如IDEA、WebStorm和VSCode)中的工作原理、安装方法、配置过程以及如何与IDE无缝协作,帮助开发者更好地理解和利用Prettier提升代码质量。
摘要由CSDN通过智能技术生成

很多前端小伙伴在日常使用prettier的时候都或多或少有一点疑惑,prettier在每一个IDE中究竟是怎样工作起来的,为什么配置有时候生效,有时又毫无效果。为了让我们的前端小伙伴更加熟悉这块,本文将对prettier在主流IDE中的使用过程一探究竟。

prettier是什么

在介绍prettier如何集成到IDE中之前,让我们了解下prettier是什么。prettier是一款代码格式化工具:

  • 一个“有态度”的代码格式化工具
  • 支持大量编程语言
  • 已集成到大多数编辑器中

它的基本使用过程如下:

010-prettier-arch-simple

正如上面的流程图所示,prettier不过就是一个安装在机器上的软件,它接收源代码,配合prettier的配置,完成对源代码的格式化。那么如何安装prettier呢?

安装prettier

prettier实际上是通过js编写的node模块。它可以有两种方式进行安装:

  1. 作为全局工具进行全局级别安装:npm install -g prettier。这种方式下,只要你配置过了全局包所在路径到环境变量,那么你就可以在命令行中使用prettier命令行调用它。
  2. 作为某个前端项目进行项目级别安装:在某个项目下npm install -D pretter或是yarn add -D prettier。这种方式下,prettier作为项目级别安装,只会在你的node_modules下安装prettier的包。此时,在项目根目录下,你就可以通过调用npx prettier来调用它。

无论是哪种方式,我们的最终目的都是要安装好这个工具,并能调用它。例如,本人以全局安装方式安装了prettier以后,在命令行就能访问到它:

 

bash

复制代码

$ which prettier /usr/local/bin/prettier $ prettier --version 3.0.0

CLI使用prettier

为了简单使用prettier,我们创建一个名为prettier-demo的目录,在里面编写一个demo.js:

020-prettie-usage-demo

demo.js代码有两个格式问题:

  1. return 'tom'之前的有太多的空格;
  2. getName换行不对劲。

进入prettier-demo目录以后,我们在项目根目录下使用如下的命令行进行操作:

030-prettie-check-and-format

  1. (可选)使用prettier -c ./demo.js来检查一下当前的文档是否存在有代码样式问题。这里prettier告诉我们代码存在样式问题;
  2. 使用prettier ./demo.js对代码进行格式化。这里prettier帮助我们进行格式化处理,并输出到了控制台。由于prettier默认是将格式化后的代码输入到控制台的,为了能够直接将格式化代码写回到源文件,需要添加--write命令行:prettiter --write ./demo.js。结果如下,会看到格式化后的代码:

040-prettier-code-formatted

当然,prettier格式化代码的时候,需要的配置项还有很多,例如:是否行尾添加分号;tab等于多少空格;字符串使用单引号还是双引号等等规则配置。尽管这些配置是可以通过命令行参数形式传递,但是一旦规则数量太多,命令行很明显不是一个好的方式,而更加优雅的方式则是使用配置文件:Configuration File · Prettier

配置文件最简单的方式,就是在项目根目录下添加一个名为.prettierrc.json的文件,然后在其中编写配置。例如,在本例中,我们在prettier-demo项目根目录下创建名为.prettierrc.json文件,并编写如下的内容:

 

json

复制代码

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

"tabWidth": 4表明一个tab等同于4个空格;"semi": true表明使用分号结尾;"singleQuote": false表明字符串等使用双引号。

注意!这里只是一个演示demo,并不是格式化规范的最佳实践。

至此,我们的demo目录结构如下:

 

javascript

复制代码

~/projects/web-projects/prettier-demo/ - .prettierrc.json - demo.js

有了这套配置,让我们再次格式化代码(prettier --write ./demo.js),会发现prettier按照我们的配置规则进行了代码格式化:

050-prettier-code-by-config-file

主流IDE中使用prettier

上面介绍了如何以原生的方式使用prettier。然而一般来说,我们都会使用IDE来进行应用开发,我们很少会为了使用prettier的格式化功能专门使用命令行。还好,无论是JetBrains系的IDEA或WebStorm还是VSCode,都有对应的插件来调用prettier。它们的整体思路大体都是一样的:

060-IDE-plugin-prettier

  1. IDE安装prettier插件;
  2. prettier插件调用prettier工具

接下来我们详细介绍这两种主流IDE的pretter环境配置过程。

IDEA和WebStorm

在IDEA和WebStorm中(后续统一使用IDEA进行讲解,他们是一样的机制),我们首先安装prettier插件:

070-IDEA-prettier-plugin-install

安装完成以后,我们需要给IDEA配置一下prettier插件:

在配置 | Languages & Frameworks | JavaScript | Prettier 中,我们可以配置IDEA关于prettier插件本身的配置:

080-IDEA-prettier-plugin-config-disable

在这里,主要有三种方式:

选项1:Disable Prettier 禁用prettier。也就是说不会调用prettier进行格式化;

选项2:Automatic Prettier configuration 自动配置

090-IDEA-prettier-plugin-config-automatic

对于这种方式,IDEA会首先搜索项目node_modules下安装的prettier以及在项目目录中能定位到的.prettierrc.*配置文件,这块主要是IDEA自动检测。同时,默认会对js、ts、jsx、tsx等等前端文件提供格式化支持。

方式3:Manual Prettier configuration 手动配置

100-IDEA-prettier-plugin-config-manual

当我们选择手动配置的时候,需要我们手动的选择应该使用哪个prettier工具。由于本demo中,我们是通过npm -g全局安装的prettier,所以我们手动选择全局安装的prettier工具。同时,依然默认对js、ts、jsx、tsx等等前端文件提供格式化支持。

当然,无论是自动配置、手动配置,我们还会发现下面有这样一项配置:Run on save,配置了它以后,我们在在保存文件的时候,就会自动进行格式化处理。如果不配置该选贤,则我们需要在打开源代码文件以后,右键选择使用prettier进行格式化:

110-IDEA-prettier-format-by-options

VSCode

在VSCode中,使用prettier的思路是一样的。首先,我们安装prettier插件:

120-vscode-prettier-plugin-install

安装完成以后,我们会看到右下角插件的安装结果:

130-vscode-plugin-install-tip

右键代码 - Format Document With...,可以选择使用prettier进行格式化:

140-vscode-plugin-format

格式化以后,我们会看到插件的输出,能够更加仔细的查看处理过程:

150-vscode-plugin-output

总结

本文主要介绍了prettier的使用以及在主流IDE中的使用,希望读者阅读本文以后,能够了解prettier与IDE如何进行配合。

本文转载来自:

作者:w4ngzhen
链接:https://juejin.cn/post/7256471433894723642
 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Prettier是一个代码格式化工具,可以帮助程序员统一代码的风格,使得代码更加易读、易维护。通过配置Prettier,可以定制化代码格式化的规则。下面我将详细解释Prettier的配置代码。 首先,Prettier的配置可以通过`.prettierrc`文件或者`package.json`文件中的`prettier`字段来指定。在配置中,我们可以使用各种规则来定义代码格式化的行为。 一些常见的配置选项包括: 1. `printWidth`:指定每行代码的最大字符数,超出部分会自动换行。 2. `tabWidth`:指定缩进的字符数,默认为2。 3. `useTabs`:确定是否使用制表符进行缩进。 4. `semi`:确定是否在语句末尾添加分号。 5. `singleQuote`:确定是否使用单引号代替双引号。 6. `trailingComma`:确定对象或数组最后一个属性后是否添加逗号。 除了以上常见选项外,Prettier还支持设置更多的配置选项,例如对于不同类型的文件,可以使用`.prettierignore`文件来指定不需要进行代码格式化的文件。 配置Prettier时,可以根据团队的编程风格和个人偏好来进行调整。通过合理的配置,可以确保团队成员之间的代码样式统一,减少代码风格方面的争议。此外,Prettier还提供了集成到多种编辑器和IDE中的插件,使得代码格式化更加便捷。 总结来说,Prettier的配置代码可以通过`.prettierrc`文件或`package.json`文件中的`prettier`字段来指定。我们可以根据需要设置各种不同的配置选项来自定义代码格式化的规则,从而使得团队成员之间的代码风格统一。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值