VSCode integration

[shapiromatron]

Black and Ruff have nice integrations with VSCode so that when edits are made to a python file, the file is formatted on save. Is there a pattern that can be used to auto-format HTML using this project as well? I could submit a PR to add to the readme if there is a pattern, but instead of trying to figured it out myself, I figured I could ask to see if there's something available.

Thanks! Great project.

[JaapJoris]

I hope you don't mind that I used ChatGPT to answer your question. Its answer is quite useful:

Step-by-step instructions to pipe the contents of the current open file in VSCode through the external command djhtml -

To pipe the contents of the current open file in Visual Studio Code (VSCode) through the external command djhtml -, follow these steps:

1. Install the Code Runner Extension:

   • First, you need to have the Code Runner extension installed in VSCode. This extension allows you to run code snippets or code files for various languages.
   • You can install it by going to the Extensions view (Ctrl+Shift+X on Windows/Linux, Cmd+Shift+X on macOS), then searching for "Code Runner" and installing it.

2. Configure Code Runner to Use the Terminal:

   • Open the Command Palette (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on macOS) and type Preferences: Open Settings (JSON). Select it to open the settings file.
   • Add the following configuration to the settings JSON file:

     "code-runner.executorMap": {
      "html": "cat $fullFileName | djhtml - > $fullFileName.temp && mv $fullFileName.temp $fullFileName"
     },
     "code-runner.runInTerminal": true

   • This configuration tells Code Runner to use the command cat $fullFileName | djhtml - > $fullFileName.temp && mv $fullFileName.temp $fullFileName for HTML files. The command uses cat to output the content of the file, pipes it through djhtml, and writes the output to a temporary file, which is then moved to replace the original file.

3. Ensure djhtml is Installed:

   • Make sure that djhtml is installed on your system. You can install it via pip if it's not already installed:

     pip install djhtml

4. Run the Command:

   • Open the HTML file you want to format in VSCode.
   • Use the shortcut Ctrl+Alt+N (or Cmd+Option+N on macOS) to run the code using Code Runner. This will execute the command specified in the settings and replace the content of your current file with the formatted output.

5. Check the Output:

   • After running the command, your file should be replaced with the formatted HTML. Make sure to check the output to ensure that it is as expected.

6. Optional: Key Binding for the Operation:

   • If you want to make this operation more accessible, you can set up a custom key binding:
   • Open the Command Palette and type Preferences: Open Keyboard Shortcuts (JSON). Select it to open the keybindings file.
   • Add a key binding like the following:

     {
      "key": "ctrl+shift+h",
      "command": "code-runner.run",
      "when": "editorLangId == 'html'"
     }

   • This will allow you to use Ctrl+Shift+H (or a key combination of your choice) to format the HTML file when it's open in the editor.

By following these steps, you can seamlessly format HTML using djhtml directly within VSCode, improving your workflow and productivity.

[shapiromatron]

Thanks! That's a nice tutorial. We ended up using the pre-commit hook instead; I didn't want to install a 3rd Code Runner plugin in VS Code.