vue + vite 使用onchange和prettier 进行文件变化监视和格式化

在现代的前端开发中，文件的格式化和实时监视是一个必不可少的环节。为了提高开发效率，我们可以利用一些工具来自动化这个过程。本文将介绍如何使用 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 的配置，以满足特定的格式化需求。