Skip to content

Conversation

@medz
Copy link

@medz medz commented Jun 23, 2025

有太多代码不尊重 eslint 规则,格式化之后的代码和 eslint 存在冲突。monorepos 很多演示和package配置单独的 eslint 规则,这并不符合最佳实践。

此 PR 为 prettier 配置 workspace 即便的统一格式

workspace 级别的 eslint 尊重此配置,但许多独立包和演示不尊重,因此无法提交格式化之后的代码。

不受子独立 eslint 控制的代码format之后完全正确。

后续作者步骤:

  1. 移除 apps/demo/packages 中的独立 prettier 配置,以符合 monorepo 最佳实践
  2. 移除 apps/demo/packages 中的独立 eslint 配置,以符合 monorepo 最佳实践

Why?
这可以很好的统一代码风格,以及 linter 的修复处理。利于 git commit hooks 执行,避免阻碍他人 PR。当前代码阻碍他人进行 PR,尤其是 apps/demo

好的,这是翻译成中文的 pull request 总结:

Sourcery 总结

通过添加工作区级别的配置、集成关键插件、调整 ESLint 规则、更新格式化脚本以及更新 lockfile 中受影响的依赖项,统一并强制执行整个 monorepo 中一致的基于 Prettier 的格式化设置。

新特性:

  • 添加项目范围的 .prettierrc.json.prettierignore 以集中管理格式化规则
  • 引入用于 import 排序、Tailwind CSS 和 OXC 格式化的 Prettier 插件
  • 使用统一的工作区级别设置替换单个包的格式化配置

增强:

  • 集成 eslint-config-prettier 并更新 ESLint 配置以遵循 Prettier 规则
  • 更新 npm 'format' 脚本以在整个存储库中运行 prettier --write

构建:

  • oxc-parser 和相关的绑定包升级到 0.74.0 并同步 lockfile 更改
  • 为 Prettier 和 ESLint 集成添加新的依赖项和 peer 依赖项(插件和配置)
Original summary in English

Summary by Sourcery

Unify and enforce a consistent Prettier-based formatting setup across the monorepo by adding workspace-level config, integrating key plugins, aligning ESLint rules, updating format scripts, and bumping affected dependencies in the lockfile.

New Features:

  • Add project-wide .prettierrc.json and .prettierignore to centralize formatting rules
  • Introduce Prettier plugins for import sorting, Tailwind CSS, and OXC formatting
  • Replace individual package formatting configs with a unified workspace-level setup

Enhancements:

  • Integrate eslint-config-prettier and update ESLint configuration to respect Prettier rules
  • Update npm 'format' script to run prettier --write across the entire repository

Build:

  • Bump oxc-parser and related binding packages to 0.74.0 and sync lockfile changes
  • Add new dependencies and peer dependencies for Prettier and ESLint integration (plugins and config)

@changeset-bot
Copy link

changeset-bot bot commented Jun 23, 2025

⚠️ No Changeset found

Latest commit: 4918da4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@netlify
Copy link

netlify bot commented Jun 23, 2025

Deploy Preview for ice-tw canceled.

Name Link
🔨 Latest commit 4918da4
🔍 Latest deploy log https://app.netlify.com/projects/ice-tw/deploys/6859b4a74b7edb0008b37257

@sourcery-ai
Copy link

sourcery-ai bot commented Jun 23, 2025

## Reviewer's Guide (评审指南)

这个 PR 将 Prettier 配置集中在 monorepo 根目录,在 lockfile 和 package manifest 中安装并更新 Prettier 相关的插件,并通过更新根 ESLint 配置将 ESLint 与 Prettier 集成。

#### Flow diagram for formatting and linting workflow after centralization (集中化后格式化和 linting 工作流程的流程图)

```mermaid
flowchart TD
  A[Developer runs `npm run format` or `prettier --write .` (开发者运行 `npm run format` 或 `prettier --write .`)]
  B[Prettier uses root .prettierrc.json and plugins (Prettier 使用根目录下的 .prettierrc.json 和插件)]
  C[Code is formatted according to unified rules (代码根据统一规则进行格式化)]
  D[ESLint runs with root config and eslint-config-prettier (ESLint 使用根配置和 eslint-config-prettier 运行)]
  E[ESLint checks for code issues, ignores Prettier formatting conflicts (ESLint 检查代码问题,忽略 Prettier 格式化冲突)]
  F[Code is ready for commit (代码已准备好提交)]

  A --> B --> C --> D --> E --> F

File-Level Changes (文件级别更改)

Change (变更) Details (详情) Files (文件)
Establish workspace-wide Prettier config and adjust format scripts (建立工作区范围的 Prettier 配置并调整格式化脚本)
  • Add .prettierrc.json with unified formatting rules (添加包含统一格式化规则的 .prettierrc.json)
  • Create .prettierignore to exclude files from formatting (创建 .prettierignore 以排除文件格式化)
  • Update npm scripts to run Prettier from project root (更新 npm 脚本以从项目根目录运行 Prettier)
.prettierrc.json
.prettierignore
package.json
Enhance dependencies to support unified formatting (增强依赖以支持统一格式化)
  • Add Prettier plugins: import sorting, Tailwind support, Oxc formatting (添加 Prettier 插件:import 排序、Tailwind 支持、Oxc 格式化)
  • Add eslint-config-prettier to disable conflicting ESLint rules (添加 eslint-config-prettier 以禁用冲突的 ESLint 规则)
  • Bump oxc-parser bindings and related packages to v0.74.0 (将 oxc-parser 绑定和相关软件包升级到 v0.74.0)
package.json
pnpm-lock.yaml
Integrate ESLint with Prettier in root config (在根配置中将 ESLint 与 Prettier 集成)
  • Import and include eslint-config-prettier in exported config (在导出的配置中导入并包含 eslint-config-prettier)
  • Wrap base icebreaker config in an array alongside Prettier config (将基本 icebreaker 配置与 Prettier 配置一起包装在数组中)
  • Consolidate rule definitions into inline objects (将规则定义整合到内联对象中)
eslint.config.js

Tips and commands (提示和命令)

Interacting with Sourcery (与 Sourcery 交互)

  • Trigger a new review: Comment @sourcery-ai review on the pull request. (触发新的审查: 在 pull request 上评论 @sourcery-ai review。)
  • Continue discussions: Reply directly to Sourcery's review comments. ( 继续讨论: 直接回复 Sourcery 的审查评论。)
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it. ( 从审查评论生成 GitHub issue: 通过回复审查评论,要求 Sourcery 从审查评论创建一个 issue。您也可以回复审查评论并使用 @sourcery-ai issue 从中创建一个 issue。)
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time. ( 生成 pull request 标题: 在 pull request 标题中的任何位置写入 @sourcery-ai 以随时生成标题。您也可以在 pull request 上评论 @sourcery-ai title 以随时(重新)生成标题。)
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time. ( 生成 pull request 摘要: 在 pull request 正文中的任何位置写入 @sourcery-ai summary 以随时在您想要的位置生成 PR 摘要。您也可以在 pull request 上评论 @sourcery-ai summary 以随时(重新)生成摘要。)
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time. ( 生成审查指南: 在 pull request 上评论 @sourcery-ai guide 以随时(重新)生成审查指南。)
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore. ( 解决所有 Sourcery 评论: 在 pull request 上评论 @sourcery-ai resolve 以解决所有 Sourcery 评论。如果您已经解决了所有评论并且不想再看到它们,这将非常有用。)
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review! ( 驳回所有 Sourcery 审查: 在 pull request 上评论 @sourcery-ai dismiss 以驳回所有现有的 Sourcery 审查。如果您想从新的审查开始,这将特别有用 - 不要忘记评论 @sourcery-ai review 以触发新的审查!)

Customizing Your Experience (自定义您的体验)

Access your dashboard to: (访问您的 仪表板 以:)

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others. (启用或禁用审查功能,例如 Sourcery 生成的 pull request 摘要、审查指南等。)
  • Change the review language. (更改审查语言。)
  • Add, remove or edit custom review instructions. (添加、删除或编辑自定义审查说明。)
  • Adjust other review settings. (调整其他审查设置。)

Getting Help (获取帮助)

```
Original review guide in English

Reviewer's Guide

This PR centralizes Prettier configuration at the monorepo root, installs and bumps Prettier-related plugins in the lockfile and package manifest, and integrates ESLint with Prettier by updating the root ESLint configuration.

Flow diagram for formatting and linting workflow after centralization

flowchart TD
  A[Developer runs `npm run format` or `prettier --write .`]
  B[Prettier uses root .prettierrc.json and plugins]
  C[Code is formatted according to unified rules]
  D[ESLint runs with root config and eslint-config-prettier]
  E[ESLint checks for code issues, ignores Prettier formatting conflicts]
  F[Code is ready for commit]

  A --> B --> C --> D --> E --> F
Loading

File-Level Changes

Change Details Files
Establish workspace-wide Prettier config and adjust format scripts
  • Add .prettierrc.json with unified formatting rules
  • Create .prettierignore to exclude files from formatting
  • Update npm scripts to run Prettier from project root
.prettierrc.json
.prettierignore
package.json
Enhance dependencies to support unified formatting
  • Add Prettier plugins: import sorting, Tailwind support, Oxc formatting
  • Add eslint-config-prettier to disable conflicting ESLint rules
  • Bump oxc-parser bindings and related packages to v0.74.0
package.json
pnpm-lock.yaml
Integrate ESLint with Prettier in root config
  • Import and include eslint-config-prettier in exported config
  • Wrap base icebreaker config in an array alongside Prettier config
  • Consolidate rule definitions into inline objects
eslint.config.js

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@medz - 我已经查看了你的更改,它们看起来很棒!


Sourcery 对开源是免费的 - 如果你喜欢我们的评论,请考虑分享它们✨
帮助我更有用!请点击每个评论上的👍或👎,我将使用反馈来改进你的评论。
Original comment in English

Hey @medz - I've reviewed your changes and they look great!


Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@sonarqubecloud
Copy link

"postcss-preset-env": "^10.2.3",
"postcss-scss": "^4.0.9",
"prettier": "^3.6.0",
"prettier-plugin-tailwindcss": "^0.6.13",
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

实际上我这里没有用到 prettier 和 prettier-plugin-tailwindcss 插件,因为我其实是用了 https://www.npmjs.com/package/eslint-plugin-tailwindcss

都集成在 @icebreakers/eslint-config 里面了
https://www.npmjs.com/package/@icebreakers/eslint-config?activeTab=dependencies

'ts/no-require-imports': 'warn',
},
},
{ rules: { 'ts/no-require-imports': 'warn' } },
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个命名实际上走的是 antfu 的规则命名,没有对他做什么修改

@sonofmagic
Copy link
Owner

实际上 demo 下面这么多项目,都是各个框架的脚手架生成的,没有被纳入 pnpm workspace 进行管理,所以里面都是用的 yarn,然后默认那些文件都没管。

@medz medz marked this pull request as draft June 24, 2025 11:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants