代码提交格式化工具---prettier的使用与配置

news/2024/11/29 19:30:48/

为什么要格式化代码

我们在合作写项目的时候,因为每个人的代码书写习惯以及编辑器的配置都不相同,这样就可能导致我们写的代码的格式都完全不一样,有的代码格式看起来也比较难以阅读,那么prettierd就由此产生了。

Prettier是一个代码格式化工具,它可以自动化地将你的代码整理成一致的风格,从而使代码更易于阅读和维护。它支持多种编程语言,包括JavaScript、TypeScript、CSS、HTML、JSON等等。使用Prettier,你可以避免手动调整代码格式所带来的繁琐、耗时和出错的问题。Prettier还支持在编辑器中使用,可以自动格式化你的代码,从而提高代码编写效率。

使用

  1. 下载
yarn add --dev --exact prettier
  1. 生成配置文件
echo {}> .prettierrc.json

该文件用于忽略某些文件不用格式化
例如:

build
coverage
  1. 产生提交钩子函数
    格式化代码的时机是在我们我们提交代码之前,所以我们需要产生提交的钩子函数,以此来每次提交代码之前都自动格式化代码
npx mrm lint-staged
  1. 修改package.json配置
    在package.json文件中添加下列配置(会在commit阶段提交之前执行 lint-staged命令)
"husky": {"hooks": {"pre-commit": "lint-staged"}},

修改package.json文件中的lint-staged配置,添加ts和tsx,用于格式化ts文件和tsx文件
在这里插入图片描述

  1. 配合eslint工作
    因为prettier的工作方式和eslint有些许的出入,所以我们也需要配置一下用于配合eslint工作
yarn add eslint-config-prettier -D

在package.json文件中的eslint配置中新增一个prettier,即用prettier覆盖掉一部分eslint规则
在这里插入图片描述

可能遇见问题

通过以上操作我们就配置好了prettier,正常情况下提交代码之后我们在提交代码的时候会发现prettier会自动的帮我们格式化代码,不过在我配置的时候也遇到了一些问题,在提交的时候会显示一些乱码,其背后原因是文件的保存格式的问题,我们新生成的文件vscode错误的把其当做utf-16格式了,我们需要修改一下.prettierignore文件以及.prettierrc.json文件的代码格式
在这里插入图片描述
点这里另存为utf-8就行了,我这个截图是修改过的。
其他的就没再遇见过问题了。如果有什么问题也欢迎各位大佬积极指正。


http://www.ppmy.cn/news/62737.html

相关文章

九联UNT401H-Hi3798MV300/MV310-当贝纯净桌面-强刷卡刷固件包

九联UNT401H-Hi3798MV300/MV310-当贝纯净桌面-强刷卡刷固件包-内有教程 特点: 1、适用于对应型号的电视盒子刷机; 2、开放原厂固件屏蔽的市场安装和u盘安装apk; 3、修改dns,三网通用; 4、大量精简内置…

nvm管理node版本与node对应的npm的版本

五一长假回来打开电脑发现自己的vscode不能成功运行项目,npm run dev之后没有任何反应,于是我想着使用cmd打开试试,结果cmd打开后画面只有一个横着的光标再闪,停几秒后就自动关闭了,看其他的博主写的解决方法一一试过了…

64.网页设计规则#8_用户体验设计(UX)

什么是用户体验(UX)? “Design is not just what it looks like and feels like. Design is how it works” ——Steve Jobs “设计不仅仅是外观和体验。设计更重要的是其工作原理。”——史蒂夫乔布斯 UI 和 UX设计 ● UI 是图形界面:UI 设计使界面更加美观。 …

git的学习

文章目录 一、Git 的简介二、Git 工作流程三、Git 工作区、暂存区和版本库总结 一、Git 的简介 Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软…

动态页面配置

动态页面配置 1.思路2.实现步骤2.1 获取所有数据库2.2 获取指定数据库所有表数据2.3 获取指定数据库表数据2.4 保存勾选的字段信息2.4.1 建表2.4.2 保存2.4.3 根据页面标识获取表头数据2.4.4 根据页面标识获取分页数据 3.完整仓储层和服务层代码 1.思路 通过获取到数据库表的所…

DJ5-3/4 中断处理程序和设备驱动程序

目录 5.3 中断机构和中断处理程序 5.3.1 中断简介 5.3.2 中断处理程序 5.4 设备驱动程序 5.4.1 设备驱动程序概述 5.4.2 设备驱动程序的处理过程 5.4.3 对 I/O 设备的控制方式 5.3 中断机构和中断处理程序 5.3.1 中断简介 1、中断和陷入 -- CPU 外部事件和内…

Flink创建Hudi的Sink动态表

工厂类 HoodieTableFactory 提供的创建动态表接口 createDynamicTableSource 和 createDynamicTableSink,对应的源码文件为:https://github.com/apache/hudi/blob/master/hudi-flink-datasource/hudi-flink/src/main/java/org/apache/hudi/table/HoodieT…

家里网速越来越慢?路由器附近千万别放这几样东西

我们在日常生活中常常会使用到WiFi,当遇到网络卡顿、网速缓慢时往往感到疑惑,是不是自己的WiFi速度不够?其实除了无线路由器、终端等自身产品质量问题,还有许多外在因素。 在网络本身没有问题的情况下WiFi卡顿或不稳定&#xff0…