{"id":15016558,"url":"https://github.com/edheltzel/better-nunjucks-for-visual-studio-code","last_synced_at":"2025-08-20T08:03:20.267Z","repository":{"id":38080720,"uuid":"465770888","full_name":"edheltzel/better-nunjucks-for-visual-studio-code","owner":"edheltzel","description":"🦾  Better Nunjucks for Visual Studio Code with Snippets","archived":false,"fork":false,"pushed_at":"2024-08-19T19:45:52.000Z","size":32645,"stargazers_count":24,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-20T08:02:07.886Z","etag":null,"topics":["11ty","eleventy","nunjucks","nunjucks-grammar","nunjucks-snippets","nunjucks-syntax","visual-studio-code-extension","visual-studio-code-snippets","vscode-extension","vscode-grammar","vscode-language-support"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=ginfuru.better-nunjucks","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edheltzel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-03T15:15:15.000Z","updated_at":"2025-07-19T14:15:30.000Z","dependencies_parsed_at":"2024-08-19T22:01:42.095Z","dependency_job_id":null,"html_url":"https://github.com/edheltzel/better-nunjucks-for-visual-studio-code","commit_stats":null,"previous_names":["edheltzel/better-nunjucks-for-visual-studio-code"],"tags_count":14,"template":false,"template_full_name":null,"purl":"pkg:github/edheltzel/better-nunjucks-for-visual-studio-code","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edheltzel%2Fbetter-nunjucks-for-visual-studio-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edheltzel%2Fbetter-nunjucks-for-visual-studio-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edheltzel%2Fbetter-nunjucks-for-visual-studio-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edheltzel%2Fbetter-nunjucks-for-visual-studio-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edheltzel","download_url":"https://codeload.github.com/edheltzel/better-nunjucks-for-visual-studio-code/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edheltzel%2Fbetter-nunjucks-for-visual-studio-code/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271285506,"owners_count":24732923,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-20T02:00:09.606Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","eleventy","nunjucks","nunjucks-grammar","nunjucks-snippets","nunjucks-syntax","visual-studio-code-extension","visual-studio-code-snippets","vscode-extension","vscode-grammar","vscode-language-support"],"created_at":"2024-09-24T19:49:04.567Z","updated_at":"2025-08-20T08:03:20.219Z","avatar_url":"https://github.com/edheltzel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003eBetter Nunjucks for Visual Studio Code\u003cbr\u003e\u003cspan style=\"font-size:1rem\"\u003ewith Snippets\u003c/span\u003e\u003c/h1\u003e\n\n[![release](https://img.shields.io/github/release/edheltzel/better-nunjucks-for-visual-studio-code.svg?style=for-the-badge\u0026logo=github\u0026logoColor=white\u0026colorA=101119\u0026colorB=6D57EF)](https://github.com/edheltzel/better-nunjucks-for-visual-studio-code/releases/latest) [![license](https://img.shields.io/badge/License-MIT-373277.svg?style=for-the-badge\u0026l\u0026logoColor=white\u0026colorA=101119\u0026colorB=42557B)](https://github.com/edheltzel/flightdeck/blob/master/LICENSE)\n\u003c/div\u003e\n\n\u003cdetails open\u003e\n  \u003csummary\u003e📔 Table of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\u003ca href=\"#syntax-highlighting\"\u003eSyntax Highlighting\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#snippets\"\u003eSnippets\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#known-issues\"\u003eKnown Issues\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href=\"#todo\"\u003eTODO\u003c/a\u003e\u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n\u003ch2 id=\"syntax-highlighting\"\u003eSyntax Highlighting:\u003c/h2\u003e\n\nFor `.njk`, `.html`, and `.md` files the grammar is auto-detected.\nAll `.njk` files will default to `html` and provide syntax highlighting for Nunjucks tags, filers, and variables which are injected into the default `html` grammar. This attempts to keep the developer experience (DX) as simple as possible, without having to configure global or workspace settings with `files.association`. Hopefully this will provide the least amount of friction between other extensions that support Markdown or HTML.\n\u003cbr\u003e\n\u003cbr\u003e\n\n| ![nunjucks-snippets-in-markdown](https://github.com/edheltzel/better-nunjucks-for-visual-studio-code/blob/main/images/nunjucks-in--markdown.png?raw=true) |\n| :-----------------------------------------------------------------------------------------------------------------------------------: |\n|                                  \u003cstrong\u003eNunjucks inside of Markdown + frontmatter support\u003c/strong\u003e                                   |\n\n| ![nunjucks-complex-page](https://github.com/edheltzel/better-nunjucks-for-visual-studio-code/blob/main/images/nunjucks-complex-page.png?raw=true) |\n| :---------------------------------------------------------------------------------------------------------------------------: |\n|                       \u003cstrong\u003eComplex example of Nunjucks inside of HTML + frontmatter support\u003c/strong\u003e                       |\n\n| ![nunjucks-in-html](https://github.com/edheltzel/better-nunjucks-for-visual-studio-code/blob/main/images/nunjucks-in-html.png?raw=true) |\n| :----------------------------------------------------------------------------------------------------------------------: |\n|                              \u003cstrong\u003eNunjucks inside of HTML + frontmatter support\u003c/strong\u003e                              |\n\n| ![nunjucks-with-11ty](https://github.com/edheltzel/better-nunjucks-for-visual-studio-code/blob/main/images/nunjucks-snippets-in-nunjucks.png?raw=true) |\n| :----------------------------------------------------------------------------------------------------------------------: |\n|                  \u003cstrong\u003eUsing the Nunjucks grammar also support highlighting and frontmatter\u003c/strong\u003e                   |\n\n\u003ch2 id=\"snippets\"\u003eSnippets:\u003c/h2\u003e\n\nThe snippets are a combined fork of other Nunjucks snippet extensions but is extended to include all of Nunjucks built-in tags and provide support for multiple file extensions – `.njk`, `.html`, \u0026 `.md`\n\nThe reason for the fork is to avoid conflicts and behavior issues when editing `njk`, `html`, and/or `md` files or when altering `files.association`\n\n\u003e Note: If you would rather not use the snippets provided in this extension, no worries - I highly recommend installing [Control Snippets](https://marketplace.visualstudio.com/items?itemName=svipas.control-snippets) to enable or disable VS Code's built-in or manually installed snippets.\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n| ![nunjucks-snippets-in-markdown](https://github.com/edheltzel/better-nunjucks-for-visual-studio-code/blob/main/images/nunjucks-snippets-in-markdown.png?raw=true) |\n| :-----------------------------------------------------------------------------------------------------------------------------------: |\n|                                           \u003cstrong\u003eNunjucks Snippets in Markdown 😍\u003c/strong\u003e                                           |\n\n| ![nunjucks-snippets-in-html](https://github.com/edheltzel/better-nunjucks-for-visual-studio-code/blob/main/images/nunjucks-snippets-in-nunjucks.png?raw=true) |\n| :-------------------------------------------------------------------------------------------------------------------------------: |\n|                                           \u003cstrong\u003eNunjucks Snippets in HTML/Nunjucks 😍\u003c/strong\u003e                                           |\n\n\n\u003ch2 id=\"known-issues\"\u003eKnown Issues\u003c/h2\u003e\n\nThere are a few \"gotchas\" or work arounds to enable some of the creature comforts with Visual Studio Code.\n\n### Emmet Support\nOne \"gotcha\" is when selecting the `nunjucks` grammar, enabling support for Emmet is provided though the editor or the workspace settings:\n\n```json\n  //\"_comment\": \"add this to your Global or Workspace settings.json\"\n  \"emmet.includeLanguages\": {\n    \"md\": \"html\",\n    \"nunjucks\": \"html\",\n  },\n  \"emmet.syntaxProfiles\": {\n    \"md\": \"html\",\n    \"nunjucks\": \"html\",\n  }\n```\n\nAnother is when trying to use HTML comments. With [PR 18](https://github.com/edheltzel/nunjucks-for-visual-studio-code/pull/18) using the keyboard shortcut `cmd+/` or `ctrl+/` will add a NJK comment block.\n\nIf you need to add HTML comments, the extension provides a couple of options to support this behavior.\n- Use the `hcomm` snippet to add an HTML comment block\n- Use the `commenthtml` snippet to add an HTML comment line\n- Use Emmet to add an HTML comment block (I set use `ctrl+alt+/` as the shortcut).\n\n![Emmet: Toggle Comment](https://raw.githubusercontent.com/edheltzel/better-nunjucks-for-visual-studio-code/main/images/emmet-toggle-comment.png)\n\n### Code Folding\n\nAnother \"gotcha\" is code folding support. You will need to include the below to enable code folding for Nunjucks tags:\n\n```json\n//\"_comment\": \"add this to your Global or Workspace settings.json\"\n\"editor.foldingStrategy\": \"indentation\"\n```\n\n![nunjucks-code-folding](https://raw.githubusercontent.com/edheltzel/better-nunjucks-for-visual-studio-code/main/images/code%20folding.gif)\n\n\n\u003ch2 id=\"todo\"\u003eTODO\u003c/h2\u003e\n\n- [x] ~~Document how code folding works~~\n- [x] ~~Write about syntax injection with Auto detect~~\n- [x] ~~Setting `nunjucks` grammar and changes from auto-detect~~\n- [x] ~~Need images of syntax~~\n- [x] ~~Nunjucks Style Comments – [Issue #1](https://github.com/edheltzel/nunjucks-for-visual-studio-code/issues/1)~~\n- [x] ~~Add more support for custom tags and filter (syntax)~~\n- [x] ~~Add all built-in filers to snippets~~  If I missed some, please create a PR.\n- [x] ~~Add built-in variables to snippets~~\n- [ ] Add support of [Eleventy](https://www.11ty.dev/)\n  - [ ] detect if `.eleventy.js` is available 🤷idk if this is even possible\n- [ ] Add custom settings options to enable/disable snippets\n- [ ] Add custom settings options to enable/disable nunjucks comments with `cmd+/` or `ctrl+/`\n- [ ] Add support for additional grammars for embedded languages - see [issue 11](https://github.com/edheltzel/better-nunjucks-for-visual-studio-code/issues/11)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedheltzel%2Fbetter-nunjucks-for-visual-studio-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedheltzel%2Fbetter-nunjucks-for-visual-studio-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedheltzel%2Fbetter-nunjucks-for-visual-studio-code/lists"}