Kanoniq for VS Code
The extension colours .kq files, the plain-text form a Kanoniq
model is stored in. Keywords, kinds, flags, names, descriptions, comments, dates and
periods each get a colour of their own, so a model reads like the structure it is.
- extenza-works.kanoniq extension ID
- 0.1.1 version
- 1.90 oldest VS Code
orders.kq
| 1 | /// Takes orders on the website, keeps them, and hands them on to fulfilment. |
| 2 | ecosystem shop "Shop" (SHOP) { |
| 3 | |
| 4 | domain selling "Selling" { |
| 5 | function place-order "Place an order" |
| 6 | function fulfil-order "Fulfil an order" |
| 7 | } |
| 8 | |
| 9 | platform commerce "Commerce" default { |
| 10 | |
| 11 | object order "Order" : selling |
| 12 | |
| 13 | component storefront "Storefront" : userFacingApp { |
| 14 | spa storefront-ui "Storefront UI" |
| 15 | } |
| 16 | |
| 17 | /// The system of record for an Order. |
| 18 | component order-service "Order Service" : backend { |
| 19 | derived httpApi order-service-api "Order Service API" |
| 20 | sql { |
| 21 | root order authoritative origin |
| 22 | id "Order Id" |
| 23 | prop "Placed at" |
| 24 | delete 1 : concluded "Closed", "Cancelled" { |
| 25 | v 1 from 2025-01-01 cooloff 2y |
| 26 | v 2 from 2026-07-01 cooloff 18m // after the 2026 retention review |
| 27 | } |
| 28 | } |
| 29 | } |
| 30 | |
| 31 | component fulfilment "Fulfilment" : backend |
| 32 | |
| 33 | storefront-ui -> order-service-api over http |
| 34 | order-service -> fulfilment over kafka |
| 35 | |
| 36 | storefront realizes place-order |
| 37 | order-service realizes place-order |
| 38 | fulfilment realizes fulfil-order |
| 39 | } |
| 40 | } |
| 41 |
- keyword
- kind
- flag
- name
- date and period
- description
- comment
The colours above are this site's. In VS Code they come from your theme, and how many of these categories it tells apart is up to the theme.
The colouring rules are generated from the grammar Kanoniq itself parses with, so a keyword added to the language is coloured correctly the next time the extension is built — there is no second keyword list to fall behind.
Install it
-
From VS Code
Open the Extensions view (Ctrl+Shift+X), search for Kanoniq, and install the one published by Extenza Works.
-
Or from a terminal
code --install-extension extenza-works.kanoniq -
Open a
.kqfileThe status bar shows Kanoniq as the file's language, and the file is coloured. Nothing to configure.
What it does not do
Colouring is all it does today. There is no go-to-definition, no error checking as you type, and no diagram preview.
Colouring is lexical: a Code where it is declared and the same Code where it is referenced look alike.
Planned: the diagram editor, running inside VS Code as well as in the browser.