build: format/lint with prettier/biome and use husky hooks via lintstaged #5
Conversation
Deploying apps-script with
|
| Latest commit: |
6403bf3
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7038bbbe.apps-script.pages.dev |
| Branch Preview URL: | https://build-format-hooks-etc.apps-script.pages.dev |
WalkthroughThe pull request updates the Git hooks and configuration files. The pre-commit hook now invokes linting via Changes
Sequence Diagram(s)Pre-commit Hook FlowsequenceDiagram
participant Developer
participant PreCommitHook
participant LintStagedCommit
participant LinterFormatter
Developer->>PreCommitHook: Initiate commit
PreCommitHook->>LintStagedCommit: Run command: pnpx lint-staged --config .lintstagedrc.commit.js --no-stash
LintStagedCommit->>LinterFormatter: Process staged files (biome check/prettier)
LinterFormatter-->>LintStagedCommit: Return results
LintStagedCommit-->>PreCommitHook: Send validation response
PreCommitHook-->>Developer: Commit succeeds or fails
Pre-push Hook FlowsequenceDiagram
participant Developer
participant PrePushHook
participant LintStagedPush
Developer->>PrePushHook: Initiate push
PrePushHook->>LintStagedPush: Run command: pnpx lint-staged --config .lintstagedrc.push.js
LintStagedPush-->>PrePushHook: Return commands (if ≥ 5 files, trigger "pnpm build check test")
PrePushHook-->>Developer: Push proceeds if checks pass
Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (10)
🚧 Files skipped from review as they are similar to previous changes (10)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Hello @jpoehnelt, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
Summary of Changes
This pull request focuses on improving the code formatting and linting process by integrating Prettier and Biome, and using Husky hooks via lint-staged. It introduces configuration files for Prettier and Biome, updates the package.json file with new scripts and dependencies, and configures VSCode settings to use Biome for formatting JavaScript, TypeScript, and JSON files. Additionally, it sets up lint-staged to run formatters and linters on staged files before commits and pushes.
Highlights
- Formatting and Linting: Integrates Prettier and Biome for consistent code formatting and linting.
- Husky and lint-staged: Configures Husky hooks via lint-staged to automatically format and lint staged files before commits and pushes.
- VSCode Configuration: Updates VSCode settings to use Biome for formatting JavaScript, TypeScript, and JSON files, and recommends relevant extensions.
Changelog
Click here to see the changelog
- .husky/pre-commit
- Updates the pre-commit hook to use lint-staged for formatting and linting staged files.
- .husky/pre-push
- Adds a pre-push hook to run lint-staged, conditionally running full tests if many files are changed.
- .lintstagedrc.commit.js
- Configures lint-staged to use Biome for JavaScript, TypeScript, and JSON files, and Prettier for other file types on commit.
- .lintstagedrc.push.js
- Configures lint-staged to conditionally run full tests if a large number of files are staged for push.
- .pretter.json
- Adds a Prettier configuration file to ignore unknown files.
- .prettierignore
- Adds a .prettierignore file to exclude generated files, JavaScript/TypeScript/JSON files, .husky directory, and the .prettierignore file itself from Prettier formatting.
- .vscode/extensions.json
- Recommends the Prettier, Biome, and Gemini Code Assist VSCode extensions.
- .vscode/settings.json
- Configures VSCode to use Biome as the default formatter for JavaScript, TypeScript, and JSON files, and shell-format for shell scripts.
- biome.json
- Adds a Biome configuration file with settings for organizing imports, linting, and JavaScript formatting.
- package.json
- Adds Biome as a dev dependency.
- Updates the format and lint scripts to use Prettier and Biome.
- Adds lint-staged as a dev dependency.
- Sets the package type to module.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Did you know?
Biome is written in Rust and claims to be significantly faster than other JavaScript linters and formatters.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
The pull request introduces formatting and linting tools to the project, which is a great step towards maintaining code quality and consistency. The changes generally look good, but there are a few areas that could be improved.
Summary of Findings
- Inconsistent Formatting: The
.vscode/settings.jsonfile has inconsistent indentation. Some lines use tabs while others use spaces. Consistent indentation improves readability. - Missing File Extension in Ignore List: The
.prettierignorefile is ignoring.prettierignoreitself, which seems redundant. It might be more useful to ignore specific file types or directories. - Potential Issue with Lint-Staged Configuration: The
.lintstagedrc.push.jsconfiguration runs all tests if 5 or more files are changed. This might be too aggressive and slow down the push process significantly. Consider more targeted checks.
Merge Readiness
The pull request is almost ready to be merged. Addressing the inconsistent formatting in .vscode/settings.json and reconsidering the lint-staged configuration in .lintstagedrc.push.js would improve the overall quality of the changes. I am unable to approve the pull request, and recommend that others review and approve this code before merging.
| "editor.defaultFormatter": "esbenp.prettier-vscode", | ||
| "[javascript]": { | ||
| "editor.defaultFormatter": "biomejs.biome" | ||
| }, | ||
| "[typescript]": { | ||
| "editor.defaultFormatter": "biomejs.biome" | ||
| }, | ||
| "[json]": { | ||
| "editor.defaultFormatter": "biomejs.biome" | ||
| }, | ||
| "windsurf.cascadeCommandsAllowList": [ | ||
| "pnpm test", | ||
| "pnpm build", | ||
| "pnpm build check test", | ||
| "pnpm format", | ||
| "cd" | ||
| ], | ||
| "[shellscript]": { | ||
| "editor.defaultFormatter": "foxundermoon.shell-format" | ||
| } |
There was a problem hiding this comment.
The indentation in this file is inconsistent. Some lines use tabs while others use spaces. Consider using a consistent indentation style (e.g., two spaces) for better readability.
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[javascript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[typescript]": {
"editor.defaultFormatter": "biomejs.biome"
},
"[json]": {
"editor.defaultFormatter": "biomejs.biome"
},
"windsurf.cascadeCommandsAllowList": [
"pnpm test",
"pnpm build",
"pnpm build check test",
"pnpm format",
"cd"
],
"[shellscript]": {
"editor.defaultFormatter": "foxundermoon.shell-format"
}
}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
.pretter.json (1)
1-3: Filename Suggestion: Verify the File Name Spelling
The configuration file is named.pretter.json, but standard Prettier configuration files are typically named.prettier.jsonor use a different naming convention (e.g.,.prettierrc). Please verify that this naming is intentional..husky/pre-push (1)
1-3: Enhance Script Robustness with Fail-Fast Behavior
The pre-push hook correctly invokes linting viapnpx lint-staged --config .lintstagedrc.push.js, but consider addingset -eon the second line (right after the shebang) to ensure the script exits immediately if any command fails..prettierignore (1)
1-4: Review Ignored File Patterns for Formatters
The ignore patterns exclude generated files, JavaScript/TypeScript/JSON files, and Husky scripts. Confirm that ignoring**/*.{js,ts,json}is intentional—especially if these file types are meant to be formatted by Biome rather than Prettier. Adjust if necessary.biome.json (1)
1-22: Biome Configuration is Well-Structured
Thebiome.jsonfile is correctly set up with a schema, import organization, linter (with recommended rules), a file inclusion/exclusion list, and JavaScript formatting (enforcing semicolons). Ensure these settings meet your team’s coding standards. If needed, consider extending the configuration to cover additional file types..lintstagedrc.push.js (1)
1-3: Performance optimization for pre-push checks.Good approach to conditionally run build and tests based on the number of changed files. This prevents running the full suite for minor changes, saving developer time.
Consider documenting this behavior in the project README to inform other developers about this optimization.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (10)
.husky/pre-commit(1 hunks).husky/pre-push(1 hunks).lintstagedrc.commit.js(1 hunks).lintstagedrc.push.js(1 hunks).pretter.json(1 hunks).prettierignore(1 hunks).vscode/extensions.json(1 hunks).vscode/settings.json(1 hunks)biome.json(1 hunks)package.json(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (11)
.vscode/extensions.json (1)
1-8: VSCode Extensions Recommendations Configured Appropriately
This file recommends useful extensions—Prettier, Biome, and a code assistance tool—that align with the updated linting and formatting strategy of the project. The configuration meets the objectives of improving the development environment..lintstagedrc.commit.js (1)
1-4: Well-structured lint-staged configuration for commit hooks.This configuration correctly separates concerns by using Biome for JavaScript, TypeScript, and JSON files while letting Prettier handle all other file types. The negation pattern ensures files aren't processed by both tools.
.husky/pre-commit (1)
1-3: Properly configured pre-commit hook using lint-staged.The hook is correctly set up to use the commit-specific configuration for lint-staged.
Note: The
--no-stashoption means that if linting fails, the working directory might be left in a modified state. This is generally okay but worth documenting if it's an intentional choice for your workflow..vscode/settings.json (2)
2-11: Consistent formatter configuration for VS Code.The VS Code settings align well with the lint-staged configuration, using Biome for JavaScript, TypeScript, and JSON files. This ensures a consistent formatting experience whether formatting happens through VS Code or git hooks.
19-21: Added shell script formatter.Good addition of a dedicated formatter for shell scripts, improving consistency across all file types in the project.
package.json (6)
12-12: Husky Prepare Script AdditionThe new
"prepare": "husky install"script is a good inclusion as it ensures that Husky is initialized automatically when the dependencies are installed. This helps enforce the Git hook setup without extra manual steps.
13-14: New Format and Lint ScriptsThe addition of the
"format"and"lint"scripts—running Prettier in conjunction with Biome—strengthens code style consistency. Please verify that the Biome commands (biome check --write .for formatting andbiome check .for linting) align with your intended usage and that they integrate smoothly with the rest of your toolchain.
17-17: Biome Dependency InclusionAdding
"@biomejs/biome": "^1.9.4"ensures that the project has the necessary tooling for Biome checks. Confirm that this version meets all your formatting and linting requirements without any conflicts.
20-20: Lint-Staged Dependency AdditionThe introduction of
"lint-staged": "^15.5.0"is a solid move for automating linting on staged files, which supports the new Husky hooks. Make sure that your lint-staged configuration files (e.g.,.lintstagedrc.commit.jsand.lintstagedrc.push.js) are updated accordingly to work with this version.
21-21: Prettier Version Downgrade CheckPrettier has been downgraded from
^3.5.3to^3.4.2. Please confirm that this version change does not negatively affect your formatting rules or compatibility with Biome and the overall codebase.
34-34: ECMAScript Module ConfigurationThe addition of
"type": "module"ensures that the project is treated as an ECMAScript module environment. This is appropriate if your source code and dependencies are all compliant with ESM. Confirm that all scripts, tooling, and import/export statements across the project align with this configuration.
jpoehnelt
force-pushed
the
build/format-hooks-etc
branch
from
ffc5e67 to
6403bf3
Compare
|
/gemini review |
There was a problem hiding this comment.
Code Review
This pull request introduces linting and formatting tools to the project, which is a great step towards maintaining code quality and consistency. The changes include configurations for Prettier and Biome, Husky hooks, and updated VS Code settings. Overall, the changes seem well-structured, but there are a few areas that could be improved.
Summary of Findings
- Linting staged files: The pre-commit hook uses lint-staged to lint only staged files. This is a good practice to keep the commit sizes small and focused.
- Configuration of formatters: The configuration of formatters like Prettier and Biome is well-defined, but it's important to ensure that these configurations are consistent across the project.
- Conditional execution in
.lintstagedrc.push.js: The.lintstagedrc.push.jsfile conditionally executes tests based on the number of staged files. This might not be the best approach, as it could lead to inconsistent test executions.
Merge Readiness
The pull request is almost ready for merging. However, the conditional execution in .lintstagedrc.push.js should be reconsidered. Once this is addressed, the pull request should be good to go. I am unable to directly approve this pull request, and recommend that others review and approve this code before merging.
| "*": (filenames) => (filenames.length >= 5 ? ["pnpm build check test"] : []), | ||
| }; |
There was a problem hiding this comment.
Consider whether this conditional execution is the desired behavior. It might be better to always run the tests, or to have a more sophisticated criteria for when to run them. What is the rationale for only running tests when there are 5 or more files?
| "*": (filenames) => (filenames.length >= 5 ? ["pnpm build check test"] : []), | |
| }; | |
| "*": (filenames) => ["pnpm build check test"], |
Summary by CodeRabbit
New Features
Chores