在现代的前端开发中，文件的格式化和实时监视是一个必不可少的环节。为了提高开发效率，我们可以利用一些工具来自动化这个过程。本文将介绍如何使用 onchange 和 prettier 来监视文件变化并进行格式化。
concurrently和onchange
concurrently 是一个用于在命令行中同时运行多个命令的工具。它允许我们在一个终端窗口中并行运行多个命令，提高了开发过程中的效率。
onchange 是一个监视文件变化的工具，它可以检测指定文件的修改并触发相应的操作。我们可以利用 onchange 来监视文件的变化并执行格式化操作。
prettier和write
prettier 是一个代码格式化工具，它可以帮助我们保持代码的一致性和可读性。它支持多种编程语言，并提供了许多配置选项，以便根据个人或团队的偏好进行定制。
prettier 的 --write 选项用于在原始文件上进行格式化，并将格式化后的结果写回到原始文件中。这意味着当文件发生变化时，我们可以使用 prettier --write 命令自动格式化修改后的文件，而不是生成一个新的格式化文件。
安装依赖
首先，我们需要在项目中安装所需的依赖项。通过以下命令安装 concurrently、onchange 和 prettier：
npm install concurrently onchange prettier --save-dev
配置package.json
接下来，我们需要在 package.json 文件中配置一个 dev 脚本，用于并行运行 onchange 和其他命令。
在 scripts 部分添加以下内容：
"scripts": {"dev": "concurrently \"onchange '**/*.{js,jsx,ts,tsx,vue,less,md,json}' -- prettier --write '{{changed}}'\" \"vite\""
}
在上述代码中，我们使用了 concurrently 来同时运行两个命令。第一个命令使用 onchange 来监视指定类型的文件变化，并在文件变化时运行 prettier --write 进行格式化。{{changed}} 是 onchange 提供的占位符，表示发生变化的文件。
Prettier配置
在项目根目录下创建一个 .prettierrc 文件，用于配置 prettier。
在 .prettierrc 文件中，我们可以指定 prettier 的配置选项，例如缩进大小、换行符风格、引号类型等。根据个人或团队的编码规范，可以进行相应的定制。
以下是一个示例的 .prettierrc 配置文件：
{"tabWidth": 2,"useTabs": false,"singleQuote": true,"trailingComma": "all"
}
上述配置将使用 2 个空格作为缩进，使用单引号而不是双引号，以及在多行结尾添加逗号。
运行开发环境
现在，我们可以运行以下命令启动开发环境
npm run dev
运行上述命令后，onchange 会监视指定类型的文件变化，并在文件发生变化时自动运行 prettier --write 进行格式化。同时，vite 也会启动开发服务器，以便我们可以实时预览和调试应用程序。
通过这种方式，我们可以在开发过程中保持代码的一致性，并实时查看应用程序的变化。
总结
本文介绍了如何使用 onchange 和 prettier 来实现文件变化监视和格式化。通过配置 package.json 中的 dev 脚本，我们可以使用concurrently 同时运行 onchange 和其他命令，从而实现文件变化时的自动格式化和开发服务器的实时预览。使用 prettier --write 命令可以在原始文件上进行格式化，并将格式化后的结果写回到原始文件中。我们还可以根据个人或团队的偏好使用 .prettierrc 文件进行 prettier 的配置，以满足特定的格式化需求。
