FinchDart Dag (VS Code)
Editor support for .dag files, produced by the
dag package for Dart (part of
FinchDart) — a transpiler that lets you embed
Dart in HTML/text, PHP-style.
Features
- Syntax highlighting —
.dag files are highlighted as HTML, with
every <?dag ... ?> / <?- ... ?> region highlighted as real Dart
(via an embedded-language TextMate injection, the same technique VS
Code's built-in PHP grammar uses to embed PHP inside HTML). Requires the
Dart extension
(declared as a dependency, so VS Code installs it automatically) for the
source.dart grammar.
- File icon —
.dag files get a distinct icon so they stand out from
plain .html/.dart files in the Explorer. Since a file-icon theme
replaces your current one, it ships as an optional icon theme: run
Preferences: File Icon Theme and pick Dag Icons (uproid).
- Dart diagnostics on
.dag files — errors and warnings from dart analyze are shown directly on the .dag file, not just on the
generated .dart.
- Tag highlighting that always renders —
<?dag/<?-/?>/-?> are
colored via an editor decoration the extension applies itself (not a
theme rule), so they stand out consistently no matter which color theme
is active, with no setup required.
.g.dart nested under its .dag file in the Explorer — the
generated sibling (foo.g.dart) is collapsed under foo.dag, the same
way VS Code nests file.js under file.ts. Clicking foo.dag opens
it directly; expanding the arrow reveals foo.g.dart, still fully
viewable/editable on its own. Ships as a default via
explorer.fileNesting.patterns, no configuration needed — if you had
file nesting turned off entirely, this extension turns it back on.
How diagnostics work
There is no embedded Dart language server here — that's a much bigger
project (a full LSP proxy that remaps every request/response, like
Vue/Svelte's tooling does for their SFCs). Instead, on open/save and a
short debounce after you stop typing, the extension:
- Runs
dart run dag:dag <file>.dag -o <file>.g.dart — the same command
the dag CLI/build_runner would run, so the sibling .g.dart is a real,
normal generated file.
- Runs
dart analyze --format=machine on that .g.dart file — the real
Dart analyzer, so you get the exact diagnostics Dart itself reports.
- Maps each reported line back to the
.dag source line that produced
it, using the _dagLine = N; markers the transpiler already emits (the
same mechanism DagError uses at runtime — see the main package
README), and publishes the result on the .dag document.
This means diagnostics land on save / shortly after you stop typing, not
on every keystroke, and the column/range shown is the whole .dag line
rather than an exact character span (the generated code doesn't line up
character-for-character with the source). Both are deliberate trade-offs
to keep this a small, maintainable extension instead of a full LSP proxy.
Requirements: your project's pubspec.yaml must depend on dag (that's
what makes .dag files meaningful in the first place), and dart must be
on PATH (or set dag.dartSdkPath).
Settings
| Setting |
Default |
Description |
dag.enableDiagnostics |
true |
Run dart analyze on .dag files. |
dag.analysisDebounceMs |
700 |
Delay after typing stops before re-analyzing. |
dag.dartSdkPath |
"" (use PATH) |
Path to a specific dart executable. |
Development
npm install
npm run compile # or: npm run watch
Then press F5 in VS Code (with this folder open) to launch an
Extension Development Host with the extension loaded.