Introduction

A major mode for editing Dart files with the power of treesit, provides syntax highlighting, indentation, and some emacs’ specific features like sexp, navigation and imenu.

Installation

You can install this package manually or use your own package manager. Below are intruductions to install:

1. Clone this repo:

   $ git clone https://github.com/50ways2sayhard/dart-ts-mode /path/to/dart-ts-mode
       

2. Add below codes to your init file:

   (use-package dart-ts-mode
     :load-path "/path/to/dart-ts-mode")
       

3. Add tree-sitter-dart to treesit-language-source-alist:

   (add-to-list 'treesit-language-source-alist (cons dart ("https://github.com/UserNobody14/tree-sitter-dart")))
       

4. M-x treesit-install-language-grammar and select dart language.

Screenshots

dart-ts-mode

Features

• Syntax highlighting
• Indentation
• Imenu
• Navigation

Roadmap

• [X] Font-lock for template_substitution.
• [ ] Better =which-function-mode= support, includes displaying function name in function body. breadcrumb-mode is recommended.
• [X] Sexp feature introduced in Emacs 30.
• [ ] Better navigation.

Integrations

This section is about working with other packages, PRs of more examples are appreciated.

Lsp client integration

Personally I use eglot as lsp client:

(use-package dart-ts-mode
  :load-path "<path-to-dart-ts-mode>"
  :init
  (with-eval-after-load 'eglot
    (add-to-list 'eglot-server-programs
                 '(dart-ts-mode . ("dart" "language-server" "--client-id" "emacs.eglot-dart")))))

Code Formating

I recommand apheleia , to work with it, add these lines to your init file:

(use-package apheleia
  :commands (apheleia-format-buffer)
  :init
  (require 'apheleia-formatters)
  (add-to-list 'apheleia-mode-alist '(dart-ts-mode . dart-format)))

Or you can format buffer with your lsp client.

File Icon

Add following code to your init file:

;; For all-the-icons users:
(add-to-list 'all-the-icons-mode-icon-alist
             '(dart-ts-mode all-the-icons-fileicon "dart" :height 1.0 :face all-the-icons-blue))

;; For nerd-icons users:
(add-to-list 'nerd-icons-mode-icon-alist '(dart-ts-mode nerd-icons-devicon "nf-dev-dart" :face nerd-icons-blue))

References

• Dart-mode
• Nvim-treesitter query for Dart
• Treesit starter guide
• Emacs builtin java-ts-mode
• Emacs builtin typescript-ts-mode