mirror of https://github.com/kjanat/livegraphs-django.git synced 2026-01-16 06:32:10 +01:00

Files

Kaj Kowalski e8f2d2adc2 Refactor HTML templates for improved readability and consistency

- Updated search_results_table.html to enhance formatting and maintain consistent indentation.
- Refined search_results.html layout for better structure and clarity.
- Improved upload.html for better organization and readability of the upload form and data source table.
- Removed unnecessary lines in package.json and streamlined devDependencies section.

2025-05-17 21:45:50 +02:00

2.3 KiB

Raw Blame History

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

2.3 KiB Raw Blame History