为什么要格式化代码

我们在合作写项目的时候,因为每个人的代码书写习惯以及编辑器的配置都不相同,这样就可能导致我们写的代码的格式都完全不一样,有的代码格式看起来也比较难以阅读,那么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文件

格式化代码 android studio 格式化代码工具_钩子函数

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

在package.json文件中的eslint配置中新增一个prettier,即用prettier覆盖掉一部分eslint规则

格式化代码 android studio 格式化代码工具_前端_02

可能遇见问题

通过以上操作我们就配置好了prettier,正常情况下提交代码之后我们在提交代码的时候会发现prettier会自动的帮我们格式化代码,不过在我配置的时候也遇到了一些问题,在提交的时候会显示一些乱码,其背后原因是文件的保存格式的问题,我们新生成的文件vscode错误的把其当做utf-16格式了,我们需要修改一下.prettierignore文件以及.prettierrc.json文件的代码格式

格式化代码 android studio 格式化代码工具_javascript_03


点这里另存为utf-8就行了,我这个截图是修改过的。

其他的就没再遇见过问题了。如果有什么问题也欢迎各位大佬积极指正。