prettier使用教程

Prettier 是一个流行的代码格式化工具，它可以自动格式化你的代码，使其符合一致的样式。以下是使用 Prettier 的基本步骤和一些常见用法：

1. 安装 Prettier

首先，你需要在项目中安装 Prettier：

```shellscript
npm install --save-dev prettier
# 或者使用 yarn
yarn add --dev prettier
# 或者使用 pnpm
pnpm add -D prettier
```

2. 配置 Prettier

你可以在项目根目录创建一个 `.prettierrc` 文件来配置 Prettier：

```json
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}
```

这些是一些常见的配置选项，你可以根据你的喜好进行调整。

3. 使用 Prettier

有几种方式可以使用 Prettier：

a. 命令行：

```shellscript
npx prettier --write "**/*.{js,jsx,ts,tsx,json,css,scss,md}"
```

这会格式化所有匹配的文件。

b. 在 package.json 中添加脚本：

```json
{
  "scripts": {
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
  }
}
```

然后你可以运行 `npm run format` 来格式化代码。

c. 编辑器集成：

许多编辑器（如 VS Code、WebStorm 等）都有 Prettier 插件。你可以配置在保存文件时自动运行 Prettier。

4. 与 ESLint 集成

如果你同时使用 ESLint，你可能想要将 Prettier 与 ESLint 集成：

```shellscript
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
```

然后在你的 `.eslintrc` 文件中添加：

```json
{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
```

5. 忽略文件

如果你想忽略某些文件，可以创建一个 `.prettierignore` 文件：

```plaintext
build
coverage
```

6. 使用 Prettier 和 Git hooks

你可以使用 husky 和 lint-staged 在提交代码前自动运行 Prettier：

```shellscript
npm install --save-dev husky lint-staged
```

在 `package.json` 中添加：

```json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write"
    ]
  }
}
```

这样，每次提交代码时，Prettier 都会自动运行并格式化修改的文件。

使用 Prettier 可以帮助你的团队保持一致的代码风格，减少因代码格式而产生的不必要的讨论和冲突。它特别适合在大型项目或团队中使用，可以显著提高代码的可读性和维护性