错误缘由

Prettier 要求代码的缩进格式保持一致，不过你的文件里同时存在空格（··）和制表符（↹），这就与 Prettier 的规则相冲突了。

解决办法

1. 自动修复

你可以借助 Prettier 的自动修复功能来解决这个问题，在项目根目录下运行以下命令即可：

npx prettier --write src/views/login/components/LoginForm.tsx

如果想对整个项目的文件进行格式化，就使用这个命令：

npx prettier --write .

2. 配置 Prettier

为了避免后续再出现类似的问题，你可以在项目根目录创建或修改 .prettierrc 文件，明确指定使用空格或者制表符：

{
  "useTabs": false,  // 使用空格（false）还是制表符（true）
  "tabWidth": 2      // 空格的数量
}

3. 编辑器设置

你还需要确保你的编辑器配置和 Prettier 保持一致。以 VS Code 为例：

• 安装 Prettier - Code formatter 插件
• 在 .vscode/settings.json 中添加以下配置：

  json

  {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "prettier.useTabs": false,
    "prettier.tabWidth": 2
  }
  

4. 提交前格式化

为了保证代码提交时的格式统一，你可以设置 Git 钩子。例如使用 husky 和 lint-staged：

npm install --save-dev husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

然后在 package.json 中添加配置：

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "npx prettier --write"
    ]
  }
}

总结

推荐你先运行自动修复命令，把现有的格式问题解决掉。之后，配置好 Prettier 和编辑器，并且启用保存时自动格式化的功能，这样能有效防止新的格式问题出现。要是你对缩进方式有特殊要求，比如习惯用制表符，那就调整相应的配置项。