Function: tsx-ts-mode

tsx-ts-mode is an autoloaded, interactive and byte-compiled function defined in typescript-ts-mode.el.gz.

Signature

(tsx-ts-mode)

Documentation

Major mode for editing TSX and JSX documents.

This major mode defines two additional JSX-specific faces: typescript-ts-jsx-attribute-face and typescript-ts-jsx-attribute-face that are used for HTML tags and attributes, respectively.

The JSX-specific faces are used when treesit-font-lock-level is at least 3 (which is the default value).

In addition to any hooks its parent mode typescript-ts-base-mode might have run, this mode runs the hook tsx-ts-mode-hook, as the final or penultimate step during initialization.

Probably introduced at or before Emacs version 29.1.

Key Bindings

Source Code

;; Defined in /usr/src/emacs/lisp/progmodes/typescript-ts-mode.el.gz
;;;###autoload
(define-derived-mode tsx-ts-mode typescript-ts-base-mode "TypeScript[TSX]"
  "Major mode for editing TSX and JSX documents.

This major mode defines two additional JSX-specific faces:
`typescript-ts-jsx-attribute-face' and
`typescript-ts-jsx-attribute-face' that are used for HTML tags
and attributes, respectively.

The JSX-specific faces are used when `treesit-font-lock-level' is
at least 3 (which is the default value)."
  :group 'typescript
  :syntax-table typescript-ts-mode--syntax-table

  (when (treesit-ready-p 'tsx)
    (treesit-parser-create 'tsx)

    ;; Comments.
    (setq-local comment-start "// ")
    (setq-local comment-end "")
    (setq-local comment-start-skip (rx (or (seq "/" (+ "/"))
                                           (seq "/" (+ "*")))
                                       (* (syntax whitespace))))
    (setq-local comment-end-skip
                (rx (* (syntax whitespace))
                    (group (or (syntax comment-end)
                               (seq (+ "*") "/")))))

    ;; Indent.
    (setq-local treesit-simple-indent-rules
                (typescript-ts-mode--indent-rules 'tsx))

    (setq-local treesit-thing-settings
                `((tsx
                   (sexp ,(regexp-opt
                           (append typescript-ts-mode--sexp-nodes
                                   '("jsx"))))
                   (sentence ,(regexp-opt
                               (append typescript-ts-mode--sentence-nodes
                                       '("jsx_element"
                                         "jsx_self_closing_element"))))
                   (text ,(regexp-opt '("comment"
                                        "template_string"))))))

    ;; Font-lock.
    (setq-local treesit-font-lock-settings
                (typescript-ts-mode--font-lock-settings 'tsx))
    (setq-local treesit-font-lock-feature-list
                '((comment declaration)
                  (keyword string escape-sequence)
                  (constant expression identifier jsx number pattern property)
                  (function bracket delimiter)))
    (setq-local syntax-propertize-function #'tsx-ts--syntax-propertize)

    (treesit-major-mode-setup)))