轻松入门Perttier

定义

prettier是一个代码格式化工具，使用Prettier进行格式化，使用linter捕获bug！

特点：通过vscode编辑器插件Prettier Code Format可以实现代码保存时自动格式化

使用

一些关于prettier如何处理我们的代码的官方解释如下

prettier.io/docs/en/rat…

安装

1. 执行如下命令

npm install --save-dev --save-exact prettier

2. 创建.prettierrc配置文件，可以是一个空文件，因为是开箱即用的
3. 将prettier集成到项目中，这样我们可以执行如下命令进行代码格式化

npx prettier . --write

集成

编辑器插件

1. 直接使用命令行安装和使用prettier并不是最佳实践
2. 通过集成prettier到编辑器，可以实现文件保存实时格式化，更符合我们的需求
3. VsCode中安装插件Prettier - Code formatter即可
4. 即便是使用vscode插件来格式化，也要在项目本地安装符合需求的prettier版本，这样能确保编辑器插件能使用符合需求的版本来处理格式化

eslint

1. 由于prettier和eslint都需要配置针对项目文件格式的要求，因此两者之间可能会有配置冲突，导致自动格式化后的文件并不符合eslint规范而报错
2. 因此，需要安装一个npm包，如下，以解决两者的冲突问题

npm install --save-dev eslint-config-prettier

3. 在.eslintrc中添加如下配置

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

4. 在eslint.config.js中添加如下配置

import someConfig from "some-other-config-you-use";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  someConfig,
  eslintConfigPrettier,
];

5. 配置完成后，运行如下命令，检查冲突的配置

npx eslint-config-prettier ./test.js

工程化

prettier和eslint集成到git流程中

参考如下