Visual Studio Code extension for formatting and linting Django/Jinja HTML templates using djLint

Related tags

Learning resource visual vscode studio
Overview

djlint-vscode

Visual Studio Code extension for formatting and linting Django/Jinja HTML templates using djLint.

Installation

Search for djLint in VS Code extensions.

Visual Studio Code Marketplace page

Usage

djlint-vscode supports html, django-html, jinja and jinja-html.

Don't forget to check the extension's settings, you might find something useful there.

Add this to your settings.json to format all supported file types with djLint:

"[html]": {
  "editor.defaultFormatter": "monosans.djlint"
},
"[django-html]": {
  "editor.defaultFormatter": "monosans.djlint"
},
"[jinja]": {
  "editor.defaultFormatter": "monosans.djlint"
},
"[jinja-html]": {
  "editor.defaultFormatter": "monosans.djlint"
},

Disclaimer

This extension is not affiliated with the authors of djLint.

Comments
  • Configuration from pyproject.toml is being ignore in v2022.10.1

    Configuration from pyproject.toml is being ignore in v2022.10.1

    After updating to v2022.10.1, extension started displaying problems in base.html that I was ignoring in config file. Consider adding a meta description. <html lang="en"> (H030) Consider adding meta keywords. <html lang="en"> (H031)

    My project has the pyproject.toml at root level with config values for djliint:

    [tool.djlint] 
ignore = "H005,H030,H031,H021,T002,D018" 
profile = "django" 
use_gitignore = true

    I'm using Poetry venv 1.1.13 with djlint v1.7.0 and extension v2022.10.1. I tried updating djlint to the latest version v1.19.1 but no luck fixing the problem.

    opened by marco-galaviz-infront 20
  • Non latin symbols replaced with `????` after formatting in Windows 10.

    Non latin symbols replaced with `????` after formatting in Windows 10.

    If template contains non ASCII symbols after formatting they're replaced with ? characters. Running djLint directly from command line does not have this issue. So I guess it's somewhere in extension. File encoding is utf-8, OS is Windows 10. In Linux and MacOS everything works as expected.

    opened by Real-Gecko 18
  • Question about vscode

    Question about vscode "problems" tab

    hey @monosans there is a new issue https://github.com/Riverside-Healthcare/djLint/issues/305 about the problems tab in vscode. It sounds like vscode lists all problems for all open files in the problems tab. This is the normal vscode behavior, or is there a way to only run djlint on the current file? https://github.com/Riverside-Healthcare/djLint/issues/305#issuecomment-1197928186

    opened by christopherpickering 16
  • Extension not using venv djLint executable

    Extension not using venv djLint executable

    The djLint executable was just updated with a bugfix, from v1.0.2 to v1.0.3. I updated it in my venv environment, but the fixed issue still occurs when the extension does the execution. I suppose it still uses the previous version – I could not find where the executed bin is located.

    Some information to help you understand the problem:

    1. The djLint in my venv is at the correct version djlint, version 1.0.3.
    2. The version is correct when executing djLint manually in my venv.
    3. The Use Venv option is set as true in the extension configuration.

    I resolved the issue with the extension by running the Reinstall djLint option in VSCode – but I think I should not have to do that if I updated it manually and Use Venv is checked.

    If this behavior is normal, could it be explained in the readme?

    opened by sgigou 9
  • ALT+Shift+F does not format the Django HTML file

    ALT+Shift+F does not format the Django HTML file

    I added the following adjustments in the settings.json file and the extension does not do anything, the command ALT+Shift+F also is not working.

    "[html]": { "editor.defaultFormatter": "monosans.djlint" }, "[django-html]": { "editor.defaultFormatter": "monosans.djlint" },

    opened by YordanPetrovDS 8
  • Formatter not working when pyproject.toml not at project root

    Formatter not working when pyproject.toml not at project root

    My project dir structure is like this:

    /project
/project/django
/project/django/pyproject.toml
/project/django/app/template/blop.html

    The djlint config is inside pyproject.toml :

    [tool.djlint]
profile="django"
max_line_length=120
indent=2
blank_line_after_tag="load,extends,include"

    The blop.html file language mode is django-html

    When running djlint from command line it work as expected: [/absolute/path/to/project/]$ djlint --reformat django/app/template/blop.html

    But when running the formatter from vscode it seems to apply a default configuration (blank_line_after_tag is not respected)

    I'v tried to force djlint configuration in vscode config but it still doesn't work:

    {
  "djlint.useEditorIndentation": false,
  "djlint.configuration": "/absolute/path/to/project/django/pyproject.toml"
}

    The only way I've found so far to have it working is to put pyproject.toml at project root. But it is not a nice solution for me.

    Other notes:

    • There is a python venv. Workspace is configured to use it.
    • djlint 1.19.0 is installed inside the venv

    Did I miss something ? How to have djlint-vscode respect my pyproject.toml file ? By the way there is a way to have logs of what djlint-vscode is doing ?

    opened by fabien-michel 7
  • Code duplicated when formatting Django HTML

    Code duplicated when formatting Django HTML

    👋 Hi, something strange is happening. When I use the extension to format Django HTML code the content of the file is duplicated.

    I have updated DjLint and the extension. I had to disable the automatic format and when I wanted to format I have to delete all the code generated by the duplication.

    Is this a known bug?

    Thank you!

    opened by lcfd 6
  • djLint is not installed for the current Python interpreter.

    djLint is not installed for the current Python interpreter.

    Hi!

    I get the message djLint is not installed for the current Python interpreter.

    I use a virtual environment and I have djLint in this environment. In the VS Code terminal (which uses the default environment) djlint works fine.

    Any idea how I can fix this?

    opened by pors 6
  • Issue with overwriting files since 1.0.6 caused by problem with gitignore parsing

    Issue with overwriting files since 1.0.6 caused by problem with gitignore parsing

    Hi!

    I just noticed today that formatting any django html file with the djlint extension results in the file getting overwritten with "No files to check! 😢", on version 1.0.7.

    If I roll back to 1.0.6 this still happens, but on 1.0.5 it doesn't.

    I've reinstalled vscode and removed global settings, as well as resetting any workspace-specific settings.

    After a bit of investigating, I found that it's caused, somehow, by the project's gitignore file - it was ignoring folders named var/, and that causes the extension to not find any files anymore. To be clear, it's unrelated to the filename - any file in any folder within the project causes the error.

    Note that this doesn't seem to be caused by djlint itself - if i manually run djlint --use-gitignore <file> it works correctly, even with the var/ in the gitignore, only ignoring the file and producing the message if the path to the file is actually included in the gitignore.

    To reproduce

    • Create a new workspace
    • Add a pyproject.toml with [tool.djlint] and use_gitignore = true
    • Add a .gitignore with just var/
    • Try to format any file, contents get replaced with the no files to check message
    opened by kirberich 6
  • Formatting is happening in the background

    Formatting is happening in the background

    With all the other formatters I've used, I press a keyboard shortcut and the code cleans up on my screen. With this one:

    • The file is modified in the background.
    • I don't see any changes in my open file. I have to close it and open it again to see anything.
    • The "Formatting..." text doesn't show on the vscode status bar.

    Is this how it is for everyone else or is something wrong on my end?

    opened by yatahaze 6
  • This breaks when formatting a django template with Japanese characters in UTF-8.

    This breaks when formatting a django template with Japanese characters in UTF-8.

    This breaks when formatting a django template with Japanese characters in UTF-8.

    Before formatting image

    After formatting image

    Is it possible to increase the option to explicitly specify the character code in settings.json?

    Below is my environment.

    • OS - Windows 10 Japanese
    • File encoding - UTF-8 CRLF
    • Python 3.9.10
    • djLint version - 1.0.2
    • djlint-vscode version - 1.1.0
    help wanted 
    opened by Taikono-Himazin 5
  • settings djlint.configuration relative paths

    settings djlint.configuration relative paths

    I have workspace open on a project folder e.g. /home/foo/projectA/ I'm customizing djlint with my own config file in project folder /home/foo/projectA/.djlintrc I'm having template files in various subdirs e.g. ./templates/main.html, ./myapp/templates/page.html

    Let me elaborate on various options in settings.json

        // all works ok, but I don't like the absolute path
    "djlint.configuration": "/home/foo/projectA/.djlintrc"

        // relative path in project doesn't work - Error: Invalid value for '--configuration': Path '.djlintrc' does not exist.
    "djlint.configuration": ".djlintrc"

        // homedir expantion doesn't work - Error: Invalid value for '--configuration': Path '.djlintrc' does not exist.
    "djlint.configuration": "~/projectA/.djlintrc"

        // if I put relative path from the file I'm linting, it works

    // works for file `./templates/main.html`
    "djlint.configuration": "../.djlintrc"

    // works for file `./myapp/templates/pagehtml`
    "djlint.configuration": "../../.djlintrc"

    It feels quite tricky to set this correctly, which seems to be absolute path for me (dislike).

    It seems that cwd for djlint execution is path of a target file. For finding config file it may be beneficial to execute djlint from workspace base dir.

    Ideally, would it be possible to pickup .djlintrc file in workspace base folder automatically by default?

    BTW: docs say:

    djLint’s CLI options can be configured directly in the VS Code settings.

    But I'm only able to pass djlint.configuration argument, is it possible to pass for example max_line_length or such?

    P.S.: Thanks for this extension, :green_heart:!

    opened by vasekch 6
  • Is it possible to disable the extension for specific file types?

    Is it possible to disable the extension for specific file types?

    I like to use the extension when working on jinja within a python environment but when working on nunjucks I don't want the extension to do anything, but every time I save a file I get "djLint is not installed for the current active Python interpreter."

    Can I disable the extension for certain file types, or maybe if there is no config file?

    opened by danstewart 1
Releases(v2022.10.1)
Owner
Almaz
Python Developer & GNU/Linux enthusiast (18 y.o.)
Almaz
GitHub https://marketplace.visualstudio.com/items?itemName=monosans.djlint
QB64 Extension for Visual Studio Code.

QB64 for Visual Studio Code A VSCode extension that adds support for QB64. DISCLAIMER: This is very rough and still needs a lot of work. Features Util

QB64 Official 8 Nov 20, 2022
Visual Studio Code extension for supporting jaksel-language

jaksel-language-support for Visual Studio Code Visual Studio Code extension for supporting jaksel-language coding experience. Features Syntax Highligh

Ngupuk 6 Oct 23, 2022
The Remix Stack for deploying to Vercel with testing, linting, formatting, structure and mock for 3rd party API integration.

Remix DnB Stack See it live: https://dnb-stack.vercel.app/ Learn more about Remix Stacks. npx create-remix --template robipop22/dnb-stack What's in th

Robert Pop 61 Dec 13, 2022
The Remix Stack for Web2 apps and Web3 DApps with authentication with Magic, testing, linting, formatting, etc.

Remix French House Stack Learn more about Remix Stacks. npx create-remix --template janhesters/french-house-stack What's in the Stack? The French Hou

Jan Hesters 26 Dec 26, 2022
The Remix Stack for deploying to AWS with DynamoDB, authentication, testing, linting, formatting, etc.

The Remix Stack for deploying to AWS with DynamoDB, authentication, testing, linting, formatting, etc.

Remix 311 Jan 1, 2023
The Remix Stack for deploying to Fly with Supabase, authentication, testing, linting, formatting, etc.

Remix Supa Fly Stack Learn more about Remix Stacks. npx create-remix --template rphlmr/supa-fly-stack What's in the stack Fly app deployment with Doc

Raphaël Moreau 157 Jan 7, 2023
The Remix Blog Stack for deploying to Fly with MDX, SQLite, testing, linting, formatting, etc.

Remix Speed Metal Stack Learn more about Remix Stacks. npx create-remix --template Girish21/speed-metal-stack Remix Blog ?? This blog starter template

Girish 141 Jan 2, 2023
The Remix Stack for deploying to Fly with SQLite, authentication, testing, linting, formatting, etc.

Remix Indie Stack Learn more about Remix Stacks. npx create-remix --template remix-run/indie-stack What's in the stack Fly app deployment with Docker

Remix 688 Dec 30, 2022
The Remix Stack for deploying to Fly with PostgreSQL, authentication, testing, linting, formatting, etc.

The Remix Stack for deploying to Fly with PostgreSQL, authentication, testing, linting, formatting, etc.

Remix 677 Jan 2, 2023
Remix Stack for deploying to Vercel with remix-auth, Planetscale, Radix UI, TailwindCSS, formatting, linting etc. Written in Typescript.

Remix Synthwave Stack Learn more about Remix Stacks. npx create-remix --template ilangorajagopal/synthwave-stack What's in the stack Vercel deploymen

Ilango 56 Dec 25, 2022
Tiny JavaScript library (1kB) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Zero dependency tiny JavaScript library (1kB bytes) by CurrencyRate.today, providing simple way and advanced number, money and currency formatting and removes all formatting/cruft and returns the raw float value.

Yurii De 11 Nov 8, 2022
Fully featured clean-css plugin for Visual Studio Code

vscode-clean-css Fully featured clean-css plugin for Visual Studio Code. Install Execute Extensions: Install Extensions command from Command Palette (

Shogo Sensui 2 Nov 9, 2021
official Alibaba Design system vue components snippets for visual studio code

Alibaba DLS Snippets for vscode Installation You can either install this extension by searching for Alibaba DLS Snippets in your vscode extensions sto

Alibaba Travels Co Open Source 2 Sep 25, 2021
Hands-on lab for Power Platform Tools for Visual Studio Code

Power Platform Tools for Visual Studio Code Lab This repository contains the lab instructions and content on how to experience the Power Platform Tool

Microsoft 8 Dec 1, 2022
Visually manage your ZooKeeper in Visual Studio Code.

Visual ZooKeeper Visually manage your ZooKeeper in Visual Studio Code. Features ?? Edit and view data on ZooKeeper using the perfect VSCode's editor.

Gao Liang 4 Sep 5, 2022
Cross platform terminal app from Visual Studio Code.

CodeTerminal Standalone terminal from Visual Studio Code. Installation macOS Highly recommanded to install with homebrew. brew tap xcodebuild/custom b

xcodebuild 673 Dec 21, 2022
A Mail client embedded in Visual Studio Code.

VSCode Mail Client A Mail client embedded in Visual Studio Code Features Support IMAP and SMTP protocol. Gmail.com vendor test pass. 126.com vendor te

buhe 14 Nov 8, 2022
A string of four operations of the library, can solve the js digital calculation accuracy of scientific notation and formatting problems, support for thousands of decimal point formatting output operations

A string of four operations of the library, can solve the js digital calculation accuracy of scientific notation and formatting problems, support for thousands of decimal point formatting output operations

null 10 Apr 6, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022