- Introduced .pre-commit-config.yaml for pre-commit hooks using uv-pre-commit. - Created lint.sh script to run Ruff and Black for linting and formatting. - Added test.sh script to execute tests with coverage reporting. - Configured .uv file for uv settings including lockfile management and dependency resolution. - Updated Makefile with targets for virtual environment setup, dependency installation, linting, testing, formatting, and database migrations. - Established requirements.txt with main and development dependencies for the project.
2.3 KiB
Prettier for Django Templates
This project uses Prettier with the prettier-plugin-django-annotations plugin to format HTML templates with Django template syntax.
Setup
The project is already configured with Prettier integration in pre-commit hooks. The configuration includes:
.prettierrc- Configuration file with Django HTML support.prettierignore- Files to exclude from formatting- Pre-commit hook for automatic formatting on commits
Manual Installation
To use Prettier locally (outside of pre-commit hooks), you'll need to install the dependencies:
# Using npm
npm install
# Or install just the required packages
npm install --save-dev prettier prettier-plugin-django-annotations
Usage
With Pre-commit
Prettier will automatically run as part of the pre-commit hooks when you commit changes.
To manually run the pre-commit hooks on all files:
pre-commit run prettier --all-files
Using npm Scripts
The package.json includes npm scripts for formatting:
# Format all static files
npm run format
# Check formatting without modifying files
npm run format:check
Command Line
You can also run Prettier directly:
# Format a specific file
npx prettier --write path/to/template.html
# Format all HTML files
npx prettier --write "dashboard_project/templates/**/*.html"
VSCode Integration
For VSCode users, install the Prettier extension and add these settings to your .vscode/settings.json:
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"prettier.requireConfig": true
}
Ignoring Parts of Templates
If you need to prevent Prettier from formatting a section of your template:
{# prettier-ignore #}
<div>This section will not be formatted by Prettier.</div>
<!-- prettier-ignore -->
<div>
This works too.
</div>
Django Template Support
The prettier-plugin-django-annotations plugin provides special handling for Django templates, including:
- Proper formatting of Django template tags (
{% %}) - Support for Django template comments (
{# #}) - Preservation of Django template variable output (
{{ }}) - Special handling for Django template syntax inside HTML attributes