use lsp-mode for code analysis and completion, tree-sitter for highlighting and indentation, and some godawful hacks for CSS-in-JS support. Aims to provide proper JSX/TSX indentation and syntax highlighting as well as some fancy features related to CSS-in-JS.
Screenshot:
- Dependencies: Emacs 27 (or, better, 28.1+) with the following packages installed:
- Install: download this package and place
tsx-mode.elinside a directory on yourload-path.
or install this repository (and all its package dependencies) via
straight.el:(straight-use-package '(tsx-mode :type git :host github :repo "orzechowskid/tsx-mode.el"))
- Require:
(require 'tsx-mode) - Enable:
(tsx-mode t)
all tsx-mode keybindings live under the C-c t prefix.
| Binding | Command | Function |
|---|---|---|
C-c t f |
toggle code-folding for current CSS-in-JS region | tsx-mode-css-toggle-fold |
C-c t F |
toggle code-folding for all CSS-in-JS regions | tsx-mode-css-toggle-fold-all |
C-c t c |
toggle code-coverage overlay | tsx-mode-coverage-toggle |
Useful variables are members of the tsx-mode customization group and can be viewed and modified with the command M-x customize-group [RET] tsx-mode [RET].
You may also want to customize variables in the coverlay customization group if you enable code coverage.
tons!
- lsp-mode is currently the only supported LSP client.
- TS/TSX indentation might not be quite right. (if you notice something, please open an issue against tsi.el)
- CSS indentation might not be quite right either. (if you notice something, please open an issue against this repo)
- only a couple of CSS-in-JS formats are currently supported.
- CSS fontification relies on a feature introduced in Emacs 28.1, so on Emacs 27 CSS fragments won't be fontified.
GPLv3. see LICENSE in the top level of this repository.