Jinja w NvChad.

Gdy zacząłem “odkurzać” umiejętności związane z budowaniem serwisów www bolał mnie brak obsługi szablonów Jinja w edytorze. To niby drobiazg - ale drażnił. Szczęśliwie NeoVim (na tę chwilę NvChad) z którym zacząłem niedawno eksperymentować jest bardzo elastyczny… jeśli tylko masz siłę przebijać się przez jego konfigurację. Po 2 wieczorach miałem całkiem fajnie działające narzędzie.

Podświetlanie składni

  1. Stworzyłem plik ~/.config/nvim/lua/configs/filetypes.lua z zawartością:
vim.filetype.add {
  extension = {
    ["jinja"] = "html",
  },
}
  1. Dodałem wczytywanie powyższej konfiguracji do pliku ~/.config/nvim/init.lua
require "configs.filetypes"
  1. Dodałem obsługę html i jinja do Treesittera
TSInstall html
TSInstall jinja
  1. Wstrzyknąłem składnię jinja do komponentu odpowiedzialnego za html. Plik za to odpowiedzialny znalazłem tutaj:
~/.local/share/nvim/lazy/nvim-treesitter/queries/html/injections.scm

Dodałem w nim:

((text) @injection.content
 (#set! injection.language "jinja"))

Na tym etapie dobrze by było doczytać trochę więcej na temat obsługi Treesitter-a i możliwości umieszczania takich edytowanych plików w innym miejscu. Idealnie by było dodawać je gdzieś wraz z konfiguracją NeoVim - tak aby łatwo było ją archiwizować i przenosić na inne urządzenia.

Podpowiedzi

Tworząc szablony dobrze mieć pod ręką narzędzie przyspieszające pisanie html-a. W tym wypadku padło na Emmet-a:

https://emmet.io/

  1. Doinstalowałem emmet-language-server poprzez Mason-a (menadżer instalacji serwerów językowych).

Warto od razu sprawdzić czy jest doinstalowany serwer językowy dla css, html, lua (przy tej operacji w logach znalazłem trochę błędów - bo okazało się, że nie ma ich u mnie).

  1. Dodałem konfigurację dla emmet-a w ~/.config/nvim/lua/configs/lspconfig.lua.
local servers = {"html", "cssls", "basedpyright", "emmet_language_server",}
vim.lsp.config["emmet_language_server"] = {
	filetypes = {
		"html",
		"css",
		"scss",
		"jinja",
		"htmldjango",
		"jinja.html",
		"jinja",
	},
}

… oczywiście pamiętając żeby wpisy te były przed vim.lsp.enable(servers).

Po tej operacji (i restarcie nvim) podświetlanie składni w szablonach jinja powinno już działać.

  1. Dodatkowo można zainstalować lsp (language server) do jinja z pomocą Mason-a. Dzięki temu będą się wyświetlały sugestie, podkreślały oczywiste błędy itd.

Dla mnie jednak najważniejsze na tym etapie było podświetlanie i emmet - tak aby szablony tworzyło się szybko i sprawnie.

Przy częstej pracy z jinja na różnych komputerach warto by było jeszcze dodać własną konfigurację dla Treesitter-a, tak aby odpowiednie komponenty umożliwiające podświetlanie składni były automatycznie instalowane.

Przykładowy plik ~/.config/nvim/lua/plugins/treesitter.lua (koniecznie do sprawdzenia, nie był testowany):

return {
  {
    "nvim-treesitter/nvim-treesitter",
    event = { "BufReadPre", "BufNewFile" },
    build = ":TSUpdate",
    main = "nvim-treesitter.configs",
    opts = {
      ensure_installed = {
        "vim",
        "vimdoc",
        "lua",
        "html",
        "htmldjango",
        "css",
        "javascript",
        "json",
      },
      highlight = { enable = true, use_languagetree = true },
      indent = { enable = true },
      auto_install = true, 
    },
  },
}

Poza tym nie trzeba robić zmian w innych plikach - w obecnych (2.5+) wersjach NvChad zawartość folderu plugins jest wczytywana automatycznie (w przeciwieństwie do configs, gdzie nie uniknie się require).

P.S. Mega dzięki dla Alexis12119 z kanału discordowego NvChad za pomoc.

Obrazek(-ki):

Flora Hon, @Unsplash