Files
livegraphs-django/PRETTIER_SETUP.md
Kaj Kowalski 482bea1ba5 Enhance AJAX navigation and pagination across dashboard templates
- Implemented AJAX-based navigation for links and forms to improve user experience.
- Added loading indicators during AJAX requests to enhance feedback.
- Refactored data tables and search results to load content dynamically via AJAX.
- Created partial templates for data tables and search results to streamline rendering.
- Updated pagination links to work with AJAX, maintaining browser history.
- Added JavaScript files for handling AJAX navigation and pagination.
- Improved session detail view with conditional rendering for action buttons.
- Updated Docker Compose file for consistency in version formatting.
- Created a TODO list for future enhancements and features.
2025-05-17 02:31:16 +02:00

1.4 KiB

Prettier for Django/Jinja Templates

This project uses Prettier with the prettier-plugin-jinja-template plugin to format HTML templates with Django/Jinja syntax.

Setup

To use Prettier with your Django templates, you'll need to install Prettier and the Jinja template plugin:

# Using npm
npm install --save-dev prettier prettier-plugin-jinja-template

# Or using yarn
yarn add --dev prettier prettier-plugin-jinja-template

Usage

Once installed, you can format your Django templates using:

# Format a specific file
npx prettier --write path/to/template.html

# Format all HTML files
npx prettier --write "**/*.html"

Without install

If you don't want to install the plugin, you can use the following command:

npx prettier --plugin=prettier-plugin-jinja-template --parser=jinja-template --write **/*.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>