chore(web): add prettier config + tailwind class sorting #955
Conversation
WalkthroughThe changes introduced in this pull request consist of several configuration updates aimed at enhancing code formatting and linting within the project. A new Prettier configuration file is added, specifying various formatting options and integrating with ESLint. The Visual Studio Code settings are updated to recognize the Prettier configuration. Additionally, the Changes
Poem
🪧 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 (
|
|
This plugin has been deployed to Cloudflare R2 and is available for testing. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (3)
web/package.json (1)
38-38: Consider pinning all Prettier-related package versions.While the main
prettierpackage is correctly pinned to a specific version, the related packages use caret ranges (^). To ensure consistent formatting across all environments, consider pinning these versions as well:- "@types/eslint-config-prettier": "^6.11.3", + "@types/eslint-config-prettier": "6.11.3", - "eslint-config-prettier": "^9.1.0", + "eslint-config-prettier": "9.1.0", "prettier": "3.3.3", - "prettier-plugin-tailwindcss": "^0.6.8", + "prettier-plugin-tailwindcss": "0.6.8",Also applies to: 44-44, 48-48, 49-49
web/tailwind.config.ts (2)
93-152: Consider documenting the pixel-based measurement constraint.While using pixel values is typically discouraged, the comment explains it's necessary due to webGUI CSS constraints. Consider:
- Adding this constraint to the project's documentation
- Creating a tracking issue to explore future migration to relative units
Would you like help creating documentation or a tracking issue for this technical constraint?
184-186: Address the TODO comment about prose classes.The comment indicates a need to modify prose classes to use pixel units. This aligns with the earlier pixel-based measurement constraint.
Would you like help implementing the pixel-based typography configuration?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (1)
web/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (5)
web/.prettierrc.mjs(1 hunks)web/.vscode/settings.json(1 hunks)web/eslint.config.mjs(1 hunks)web/package.json(1 hunks)web/tailwind.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- web/.prettierrc.mjs
- web/.vscode/settings.json
🔇 Additional comments (8)
web/eslint.config.mjs (3)
2-3: LGTM! Imports are correctly defined and consistent.
The imports are properly structured and align with the PR's objective of integrating Prettier with ESLint.
12-13: LGTM! Prettier integration is correctly implemented.
The ESLint-Prettier integration is properly configured using the recommended approach.
1-13: Verify complete Prettier configuration setup.
Let's ensure all necessary Prettier configuration files are in place and consistent.
✅ Verification successful
Prettier configuration is properly set up and integrated
The Prettier setup is complete and well-configured with:
- Proper ESLint integration via
eslint-config-prettier - Comprehensive Prettier configuration in
web/.prettierrc.mjswith TailwindCSS plugin - Required dependencies in package.json including Prettier, ESLint-Prettier config, and TailwindCSS plugin
- Correct ESLint configuration that extends Prettier to avoid conflicts
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify Prettier configuration completeness
# Check for Prettier config files
echo "Checking Prettier configuration files..."
fd -e .prettierrc.js -e .prettierrc.mjs -e .prettierrc.json -e .prettierrc
# Check for Prettier-related dependencies in package.json
echo "Checking Prettier dependencies..."
if [ -f package.json ]; then
jq '.dependencies + .devDependencies | with_entries(select(.key | contains("prettier")))' package.json
fi
# Check VS Code settings for Prettier
echo "Checking VS Code Prettier settings..."
if [ -f .vscode/settings.json ]; then
jq 'with_entries(select(.key | contains("prettier")))' .vscode/settings.json
fi
Length of output: 535
Script:
#!/bin/bash
# Let's try a different approach to verify Prettier setup
# Check for Prettier config in package.json
echo "=== Checking package.json for Prettier configuration ==="
if [ -f package.json ]; then
cat package.json | jq '.prettier?, .devDependencies?, .dependencies?'
fi
# Look for any Prettier-related files in the repository
echo -e "\n=== Looking for Prettier-related files ==="
fd -H -E node_modules prettier
# Check ESLint config files for Prettier integration
echo -e "\n=== Checking ESLint configs for Prettier integration ==="
rg -l "prettier" --type js --type mjs
# Check for format scripts in package.json
echo -e "\n=== Checking for format scripts in package.json ==="
if [ -f package.json ]; then
cat package.json | jq '.scripts | with_entries(select(.value | contains("prettier") or contains("format")))'
fi
Length of output: 682
Script:
#!/bin/bash
# Let's check the content of Prettier configuration files and ESLint integration
# Check web/.prettierrc.mjs content
echo "=== Content of web/.prettierrc.mjs ==="
cat web/.prettierrc.mjs
# Check web/eslint.config.mjs for Prettier integration details
echo -e "\n=== Prettier integration in web/eslint.config.mjs ==="
cat web/eslint.config.mjs
# Check if there are any other ESLint config files that might need Prettier integration
echo -e "\n=== Looking for other ESLint config files ==="
fd -e .eslintrc.js -e .eslintrc.json -e eslint.config.mjs
# Check package.json in web directory
echo -e "\n=== Checking web/package.json for Prettier dependencies ==="
if [ -f web/package.json ]; then
cat web/package.json | jq '.devDependencies?, .dependencies? | with_entries(select(.key | contains("prettier") or contains("eslint")))'
fi
Length of output: 1527
web/package.json (2)
38-38: LGTM: Core Prettier dependencies are properly configured.
The core Prettier dependencies are correctly added:
@types/eslint-config-prettier: Types for ESLint-Prettier integrationeslint-config-prettier: Disables ESLint rules that conflict with Prettierprettier: The main Prettier package with a pinned version
Also applies to: 44-44, 48-48
49-49: LGTM: Tailwind plugin is properly configured.
The prettier-plugin-tailwindcss plugin is correctly added to automatically sort Tailwind CSS classes.
Let's verify the Prettier configuration is complete:
✅ Verification successful
Prettier with Tailwind plugin is correctly configured and ready to use
The verification confirms that:
- The Prettier configuration exists in
.prettierrc.mjs - The Tailwind plugin is properly included in the Prettier config's plugins array
- VSCode settings correctly point to the Prettier config file
- Tailwind configuration file exists at
web/tailwind.config.ts
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify Prettier configuration files exist and are properly set up
# Check for Prettier config file
echo "Checking for Prettier config file..."
fd -t f "\.prettierrc\.(js|json|mjs|yaml|yml)$" web/
# Check for Prettier ignore file (optional but recommended)
echo "Checking for Prettier ignore file..."
fd -t f "\.prettierignore$" web/
# Check for VSCode settings to ensure Prettier is set as default formatter
echo "Checking VSCode settings..."
fd -t f "settings.json$" web/.vscode/
Length of output: 386
Script:
#!/bin/bash
# Let's check the content of VSCode settings and look for any Prettier configuration
echo "VSCode settings content:"
cat web/.vscode/settings.json
# Let's also check if there's a prettier config in package.json since it's common to have it there
echo -e "\nChecking Prettier config in package.json:"
cat web/package.json | jq '.prettier'
# Additionally, let's check for any Tailwind-related configuration
echo -e "\nChecking for Tailwind config:"
fd -t f "tailwind.config.(js|cjs|mjs|ts)$" web/
Length of output: 428
Script:
#!/bin/bash
# Let's check the content of the Prettier config file referenced in VSCode settings
echo "Prettier config content:"
cat web/.prettierrc.mjs
# Also check if the Tailwind plugin is properly configured in the Prettier config
echo -e "\nChecking for Tailwind plugin references:"
rg -i "prettier-plugin-tailwindcss" web/.prettierrc.mjs
Length of output: 548
web/tailwind.config.ts (3)
34-89: LGTM! Well-structured color system.
The color definitions are well-organized with:
- Semantic naming conventions
- Consistent use of HSL values for shadcn components
- Clear separation between custom properties and direct color values
276-284: Verify environment variable usage across environments.
The configuration uses VITE_TAILWIND_BASE_FONT_SIZE with a fallback of 10. Ensure this environment variable is:
- Documented in the project's environment variable documentation
- Set correctly in all deployment environments
Let's check for environment variable documentation:
#!/bin/bash
# Search for environment variable documentation
rg "VITE_TAILWIND_BASE_FONT_SIZE" --type md7-7: Address the @ts-expect-error comment.
The comment indicates a build-related issue that needs fixing. Consider investigating and resolving the underlying TypeScript error instead of suppressing it.
Let's check if this is a known issue:
Would you like help investigating and fixing the TypeScript error?
|
love this addition! |
Summary by CodeRabbit
New Features
Bug Fixes
Chores
package.jsonwith new dependencies for linting and formatting tools.