启动React应用时如何在终端显示Prettier格式提示？

一、解决脚本输出消失的问题 #

你之前用&并行执行命令时，CRA的start进程会占用终端输出流，导致Prettier的提示被覆盖或瞬间消失。可以用concurrently管理并行进程，它能让多个命令的输出独立显示、互不干扰：

1. 安装依赖：

yarn add concurrently --dev

2. 更新package.json中的脚本：

"scripts": {
  "start:dev": "concurrently \"yarn start\" \"yarn prettier-watch\"",
  "prettier-watch": "onchange \"**/*\" -- prettier --check --config .prettierrc.json --ignore-unknown {{changed}}"
}

启动start:dev后，CRA的构建日志和Prettier的格式检查提示会分别输出，不会出现提示消失的情况。

如果不想额外安装工具，也可以用bash的wait命令（仅适用于类Unix环境）：

"start:dev": "yarn start & yarn prettier-watch; wait"

但concurrently的输出会带进程标识，可读性更强，更推荐使用。

二、ESLint与Create React App的集成逻辑 #

CRA内置了ESLint的深度集成，核心方式是：

• CRA的react-scripts工具在启动、构建流程中，会将ESLint作为webpack的loader嵌入编译环节。
• 代码编译时会自动触发ESLint检查，检查结果直接合并到CRA的终端输出流中，和构建日志一起显示。
• 当ESLint检测到错误时，会通过webpack的错误提示机制暂停或标记构建，确保错误能被开发者及时看到。

简单来说，ESLint是嵌入在构建流水线内部，和CRA的主进程共享输出流，所以错误能稳定显示。而Prettier是独立进程，需要用工具保证它的输出不被主进程覆盖。

三、额外优化建议 #

• 给Prettier的检查提示添加标识，让终端输出更清晰：

"prettier-watch": "onchange \"**/*\" -- echo '[Prettier] 检查修改的文件...' && prettier --check --config .prettierrc.json --ignore-unknown {{changed}}"

• 配置.prettierignore文件，忽略node_modules/、build/等不需要检查的目录，减少无效检查的开销。

内容的提问来源于stack exchange，提问作者Adrian Bunea