mirror of
https://github.com/doomemacs/doomemacs
synced 2025-08-31 14:43:40 -05:00
feat!(javascript): add treesit support
BREAKING CHANGE: This commit removes a number of core packages and features from this module and only replaces a handful of them, so that we can lean more on LSP and tree-sitter. To be specific: - We used to rely on `rjsx-mode` (derived from js2-mode) for total JS/JSX support (though imperfect; Emacs was starved for options at the time). This has now been replaced with `js-ts-mode` (built-in after Emacs 29), falling back to `js-mode` (very rudimentary, but a decent fallback). - This also meant the removal of `js2-mode`, which `skewer-mode`, `js2-refactor`, and `xref-js2` depended on, so those were removed too, and have *somewhat* been replaced with LSP integration (offers jump-to-definition/references and *some* refactoring actions, but no replacement for skewer's functionality). - Typescript support no longer relies on the jury-rigged, web-mode-derived major mode (because TSX support in the upstream `typescript-mode` isn't great). We now use `typescript-ts-mode` (built-in into Emacs 29.1+), falling back to `typescript-mode`. - JSX/TSX support now *requires* tree-sitter (and Emacs 29.1+), where `tsx-ts-mode` is available and outshines all the alternatives (at the time of writing). Due to the absolute chaos that is webdev, this module sacrifices some of the graceful-degradation I've implemented for other modules and creates a hard requirement on tree-sitter and Emacs 29.1+ for JSX/TSX. It still tries to degrade gracefully for plain JS and TS, but the module's doctor and docs will actively recommend tree-sitter. Close: #5278 Fix: #6172 Fix: #7042 Close: #8447 Co-authored-by: ribaricplusplus <ribaricplusplus@users.noreply.github.com>
This commit is contained in:
Henrik Lissner
@@ -6,13 +6,14 @@
|
||||
* Description :unfold:
|
||||
This module adds [[https://www.javascript.com/][JavaScript]] and [[https://www.typescriptlang.org/][TypeScript]] support to Doom Emacs.
|
||||
|
||||
- Code completion ([[doom-package:tide]])
|
||||
- REPL support ([[doom-package:nodejs-repl]])
|
||||
- Refactoring commands ([[doom-package:js2-refactor]])
|
||||
- Syntax checking ([[doom-package:flycheck]])
|
||||
- Browser code injection with [[doom-package:skewer-mode]]
|
||||
- Coffeescript & JSX support
|
||||
- Jump-to-definitions and references support ([[doom-package:xref]])
|
||||
- JSX/TSX support (requires [[doom-module:+tree-sitter]] and Emacs 29.1+)
|
||||
- LSP Integration
|
||||
- Code completion (with [[doom-module::completion corfu]] (recommended) or
|
||||
[[doom-module::completion company]])
|
||||
- Syntax checking (with [[doom-module::checkers syntax]])
|
||||
- Jump-to-definitions and references support
|
||||
- Code formatting (with [[doom-module::editor format]] and [[https://prettier.io/docs/en/install.html][prettier]])
|
||||
- REPL support (with [[doom-package:nodejs-repl]] and/or [[doom-module::tools eval]])
|
||||
|
||||
** Maintainers
|
||||
- [[doom-user:][@elken]]
|
||||
@@ -23,22 +24,17 @@ This module adds [[https://www.javascript.com/][JavaScript]] and [[https://www.t
|
||||
|
||||
** Module flags
|
||||
- +lsp ::
|
||||
Enable LSP support for ~js2-mode~, ~rjsx-mode~, JS in ~web-mode~, and
|
||||
~typescript-mode~. Requires [[doom-module::tools lsp]] and a langserver (supports ts-ls and
|
||||
deno-ls).
|
||||
Enable LSP support for ~js-mode~, ~js-ts-mode~, ~typesript-mode~, and
|
||||
~typescript-ts-mode. Requires [[doom-module::tools lsp]] and a langserver
|
||||
(supports ts-ls and deno-ls).
|
||||
- +tree-sitter ::
|
||||
Leverages tree-sitter for better syntax highlighting and structural text
|
||||
editing. Requires [[doom-module::tools tree-sitter]].
|
||||
editing. Requires [[doom-module::tools tree-sitter]]. Requires Emacs 29.1+.
|
||||
Required for JSX/TSX support.
|
||||
|
||||
** Packages
|
||||
- [[doom-package:js2-refactor]]
|
||||
- [[doom-package:nodejs-repl]]
|
||||
- [[doom-package:npm-mode]]
|
||||
- [[doom-package:rjsx-mode]]
|
||||
- [[doom-package:skewer-mode]] (DEPRECATED)
|
||||
- [[doom-package:tide]]
|
||||
- [[doom-package:typescript-mode]]
|
||||
- [[doom-package:xref-js2]] if [[doom-module::tools lookup]]
|
||||
- [[doom-package:typescript-mode]] unless [[doom-module:+tree-sitter]]
|
||||
|
||||
** TODO Hacks
|
||||
#+begin_quote
|
||||
@@ -59,97 +55,13 @@ This module requires [[https://nodejs.org/en/][NodeJS]] and one of [[https://www
|
||||
- openSUSE: ~$ zypper install nodejs npm~
|
||||
|
||||
** Formatter
|
||||
|
||||
Formatting is handled using the [[doom-module::editor format]] module via [[https://prettier.io/docs/en/install.html][prettier]].
|
||||
|
||||
* TODO Usage
|
||||
#+begin_quote
|
||||
/This module's usage documentation is incomplete./ [[doom-contrib-module:][Complete it?]]
|
||||
This module has no usage documentation yet. [[doom-contrib-module:][Write some?]]
|
||||
#+end_quote
|
||||
|
||||
~rjsx-mode~ is used for all javascript buffers.
|
||||
|
||||
** Commands
|
||||
*** rjsx-mode
|
||||
| command | key / ex command | description |
|
||||
|----------------------------------+------------------+------------------------------------------------------------|
|
||||
| ~+javascript/open-repl~ | ~:repl~ | Open the NodeJS REPL (or send the current selection to it) |
|
||||
| ~+javascript/skewer-this-buffer~ | [[kbd:][<localleader> S]] | Attaches a browser to the current buffer |
|
||||
|
||||
*** Tide
|
||||
| command | key / ex command | description |
|
||||
|-------------------------+---------------------+------------------------|
|
||||
| ~tide-restart-server~ | [[kbd:][<localleader> R]] | Restart tide server |
|
||||
| ~tide-reformat~ | [[kbd:][<localleader> f]] | Reformat region |
|
||||
| ~tide-rename-symbol~ | [[kbd:][<localleader> r r s]] | Rename symbol at point |
|
||||
| ~tide-organize-imports~ | [[kbd:][<localleader> r o i]] | Organize imports |
|
||||
|
||||
*** Refactoring (js2-refactor-mode)
|
||||
| command | key / ex command | description |
|
||||
|---------------------------------------------------+---------------------+--------------------------------------------------------------------------------------------------------------------|
|
||||
| ~js2r-expand-node-at-point~ | [[kbd:][<localleader> r e e]] | Expand bracketed list according to node type at point |
|
||||
| ~js2r-contract-node-at-point~ | [[kbd:][<localleader> r c c]] | Contract bracketed list according to node type at point |
|
||||
| ~js2r-extract-function~ | [[kbd:][<localleader> r e f]] | Extracts the marked expressions out into a new named function. |
|
||||
| ~js2r-extract-method~ | [[kbd:][<localleader> r e m]] | Extracts the marked expressions out into a new named method in an object literal. |
|
||||
| ~js2r-toggle-function-expression-and-declaration~ | [[kbd:][<localleader> r t f]] | Toggle between function name() {} and var name = function (); |
|
||||
| ~js2r-toggle-arrow-function-and-expression~ | [[kbd:][<localleader> r t a]] | Toggle between function expression to arrow function. |
|
||||
| ~js2r-toggle-function-async~ | [[kbd:][<localleader> r t s]] | Toggle between an async and a regular function. |
|
||||
| ~js2r-introduce-parameter~ | [[kbd:][<localleader> r i p]] | Changes the marked expression to a parameter in a local function. |
|
||||
| ~js2r-localize-parameter~ | [[kbd:][<localleader> r l p]] | Changes a parameter to a local var in a local function. |
|
||||
| ~js2r-wrap-buffer-in-iife~ | [[kbd:][<localleader> r w i]] | Wraps the entire buffer in an immediately invoked function expression |
|
||||
| ~js2r-inject-global-in-iife~ | [[kbd:][<localleader> r i g]] | Creates a shortcut for a marked global by injecting it in the wrapping immediately invoked function expression |
|
||||
| ~js2r-add-to-globals-annotation~ | [[kbd:][<localleader> r a g]] | Creates a /*global */ annotation if it is missing, and adds the var at point to it. |
|
||||
| ~js2r-extract-var~ | [[kbd:][<localleader> r e v]] | Takes a marked expression and replaces it with a var. |
|
||||
| ~js2r-extract-let~ | [[kbd:][<localleader> r e l]] | Similar to extract-var but uses a let-statement. |
|
||||
| ~js2r-extract-const~ | [[kbd:][<localleader> r e c]] | Similar to extract-var but uses a const-statement. |
|
||||
| ~js2r-inline-var~ | [[kbd:][<localleader> r i v]] | Replaces all instances of a variable with its initial value. |
|
||||
| ~js2r-rename-var~ | [[kbd:][<localleader> r r v]] | Renames the variable on point and all occurrences in its lexical scope. |
|
||||
| ~js2r-var-to-this~ | [[kbd:][<localleader> r v t]] | Changes local var a to be this.a instead. |
|
||||
| ~js2r-arguments-to-object~ | [[kbd:][<localleader> r a o]] | Replaces arguments to a function call with an object literal of named arguments. |
|
||||
| ~js2r-ternary-to-if~ | [[kbd:][<localleader> r 3 i]] | Converts ternary operator to if-statement. |
|
||||
| ~js2r-split-var-declaration~ | [[kbd:][<localleader> r s v]] | Splits a var with multiple vars declared, into several var statements. |
|
||||
| ~js2r-split-string~ | [[kbd:][<localleader> r s s]] | Splits a string. |
|
||||
| ~js2r-string-to-template~ | [[kbd:][<localleader> r s t]] | Converts a string into a template string. |
|
||||
| ~js2r-unwrap~ | [[kbd:][<localleader> r u w]] | Replaces the parent statement with the selected region. |
|
||||
| ~js2r-log-this~ | [[kbd:][<localleader> r l t]] | Adds a console.log() statement for what is at point (or region). With a prefix argument, use JSON pretty-printing. |
|
||||
| ~js2r-debug-this~ | [[kbd:][<localleader> r d t]] | Adds a debug() statement for what is at point (or region). |
|
||||
| ~js2r-forward-slurp~ | [[kbd:][<localleader> r s l]] | Moves the next statement into current function, if-statement, for-loop or while-loop. |
|
||||
| ~js2r-forward-barf~ | [[kbd:][<localleader> r b a]] | Moves the last child out of current function, if-statement, for-loop or while-loop. |
|
||||
| ~js2r-kill~ | [[kbd:][<localleader> r k]] | Kills to the end of the line, but does not cross semantic boundaries. |
|
||||
|
||||
*** skewer-mode
|
||||
**** general
|
||||
| command | key / ex command | description |
|
||||
|-------------------------------+-------------------+---------------------------------------|
|
||||
| ~skewer-eval-last-expression~ | [[kbd:][<localleader> s E]] | Evaluate last expression |
|
||||
| ~skewer-eval-defun~ | [[kbd:][<localleader> s e]] | Evaluate function definition at point |
|
||||
| ~skewer-load-buffer~ | [[kbd:][<localleader> s f]] | Load buffer into REPL |
|
||||
|
||||
**** css
|
||||
| command | key / ex command | description |
|
||||
|---------------------------------------+-------------------+-------------------------------|
|
||||
| ~skewer-css-eval-current-declaration~ | [[kbd:][<localleader> s e]] | Evaluate declaration at point |
|
||||
| ~skewer-css-eval-current-rule~ | [[kbd:][<localleader> s r]] | Evaluate rule at point |
|
||||
| ~skewer-css-eval-buffer~ | [[kbd:][<localleader> s b]] | Evaluate buffer |
|
||||
| ~skewer-css-clear-all~ | [[kbd:][<localleader> s c]] | Clear all rules |
|
||||
|
||||
**** html
|
||||
| command | key / ex command | description |
|
||||
|------------------------+-------------------+-----------------------|
|
||||
| ~skewer-html-eval-tag~ | [[kbd:][<localleader> s e]] | Evaluate tag at point |
|
||||
|
||||
*** npm-mode
|
||||
| command | key / ex command | description |
|
||||
|---------------------------------+-------------------+------------------------------------------------------------------|
|
||||
| ~npm-mode-npm-init~ | [[kbd:][<localleader> n n]] | Initialize npm project |
|
||||
| ~npm-mode-npm-install~ | [[kbd:][<localleader> n i]] | Install npm package |
|
||||
| ~npm-mode-npm-install-save~ | [[kbd:][<localleader> n s]] | Install npm package and save to package.json |
|
||||
| ~npm-mode-npm-install-save-dev~ | [[kbd:][<localleader> n d]] | Install npm package and save to package.json as a dev dependency |
|
||||
| ~npm-mode-npm-uninstall~ | [[kbd:][<localleader> n u]] | Uninstall npm package |
|
||||
| ~npm-mode-npm-list~ | [[kbd:][<localleader> n l]] | List npm packages |
|
||||
| ~npm-mode-npm-run~ | [[kbd:][<localleader> n r]] | Run npm task |
|
||||
| ~npm-mode-visit-project-file~ | [[kbd:][<localleader> n v]] | Find file in npm project |
|
||||
|
||||
* TODO Configuration
|
||||
#+begin_quote
|
||||
This module has no configuration documentation yet. [[doom-contrib-module:][Write some?]]
|
||||
|
||||
@@ -8,305 +8,101 @@
|
||||
;;
|
||||
;;; Major modes
|
||||
|
||||
(dolist (feature '(rjsx-mode
|
||||
typescript-mode
|
||||
web-mode
|
||||
(nodejs-repl-mode . nodejs-repl)))
|
||||
(let ((pkg (or (cdr-safe feature) feature))
|
||||
(mode (or (car-safe feature) feature)))
|
||||
(with-eval-after-load pkg
|
||||
(set-docsets! mode "JavaScript"
|
||||
"AngularJS" "Backbone" "BackboneJS" "Bootstrap" "D3JS" "EmberJS" "Express"
|
||||
"ExtJS" "JQuery" "JQuery_Mobile" "JQuery_UI" "KnockoutJS" "Lo-Dash"
|
||||
"MarionetteJS" "MomentJS" "NodeJS" "PrototypeJS" "React" "RequireJS"
|
||||
"SailsJS" "UnderscoreJS" "VueJS" "ZeptoJS")
|
||||
(set-ligatures! mode
|
||||
;; Functional
|
||||
:def "function"
|
||||
:lambda "() =>"
|
||||
:composition "compose"
|
||||
;; Types
|
||||
:null "null"
|
||||
:true "true" :false "false"
|
||||
;; Flow
|
||||
:not "!"
|
||||
:and "&&" :or "||"
|
||||
:for "for"
|
||||
:return "return"
|
||||
;; Other
|
||||
:yield "import"))))
|
||||
(defun +javascript-common-config (mode)
|
||||
(unless (eq mode 'nodejs-repl-mode)
|
||||
(set-repl-handler! mode #'+javascript/open-repl)
|
||||
(set-electric! mode :chars '(?\} ?\) ?. ?:))
|
||||
(set-ligatures! mode
|
||||
;; Functional
|
||||
:def "function"
|
||||
:lambda "() =>"
|
||||
:composition "compose"
|
||||
;; Types
|
||||
:null "null"
|
||||
:true "true" :false "false"
|
||||
;; Flow
|
||||
:not "!"
|
||||
:and "&&" :or "||"
|
||||
:for "for"
|
||||
:return "return"
|
||||
;; Other
|
||||
:yield "import")
|
||||
|
||||
(when (modulep! +lsp)
|
||||
(add-hook (intern (format "%s-local-vars-hook" mode)) #'lsp! 'append)))
|
||||
|
||||
(pcase mode
|
||||
((or 'js-mode 'js-ts-mode 'nodejs-repl-mode)
|
||||
(set-docsets! mode "JavaScript"
|
||||
"AngularJS" "Backbone" "BackboneJS" "Bootstrap" "D3JS" "EmberJS" "Express"
|
||||
"ExtJS" "JQuery" "JQuery_Mobile" "JQuery_UI" "KnockoutJS" "Lo-Dash"
|
||||
"MarionetteJS" "MomentJS" "NodeJS" "PrototypeJS" "React" "RequireJS"
|
||||
"SailsJS" "UnderscoreJS" "VueJS" "ZeptoJS"))
|
||||
((or 'typescript-mode 'typescript-ts-mode)
|
||||
(set-docsets! mode :add "TypeScript" "AngularTS")
|
||||
(set-electric! mode :chars '(?\} ?\)) :words '("||" "&&")))))
|
||||
|
||||
|
||||
(use-package! rjsx-mode
|
||||
(use-package! js-mode
|
||||
:mode "\\.[mc]?js\\'"
|
||||
:mode "\\.es6\\'"
|
||||
:mode "\\.pac\\'"
|
||||
:interpreter "node"
|
||||
:hook (rjsx-mode . rainbow-delimiters-mode)
|
||||
:init
|
||||
;; Parse node stack traces in the compilation buffer
|
||||
(after! compilation
|
||||
(add-to-list 'compilation-error-regexp-alist 'node)
|
||||
(add-to-list 'compilation-error-regexp-alist-alist
|
||||
'(node "^[[:blank:]]*at \\(.*(\\|\\)\\(.+?\\):\\([[:digit:]]+\\):\\([[:digit:]]+\\)"
|
||||
2 3 4)))
|
||||
:config
|
||||
(set-repl-handler! 'rjsx-mode #'+javascript/open-repl)
|
||||
(set-electric! 'rjsx-mode :chars '(?\} ?\) ?. ?:))
|
||||
(setq js-chain-indent t)
|
||||
(+javascript-common-config 'js-mode))
|
||||
|
||||
(setq js-chain-indent t
|
||||
;; These have become standard in the JS community
|
||||
js2-basic-offset 2
|
||||
;; Don't mishighlight shebang lines
|
||||
js2-skip-preprocessor-directives t
|
||||
;; let flycheck handle this
|
||||
js2-mode-show-parse-errors nil
|
||||
js2-mode-show-strict-warnings nil
|
||||
;; Flycheck provides these features, so disable them: conflicting with
|
||||
;; the eslint settings.
|
||||
js2-strict-missing-semi-warning nil
|
||||
;; maximum fontification
|
||||
js2-highlight-level 3
|
||||
js2-idle-timer-delay 0.15)
|
||||
|
||||
(setq-hook! 'rjsx-mode-hook
|
||||
;; Indent switch-case another step
|
||||
js-switch-indent-offset js2-basic-offset)
|
||||
|
||||
(use-package! xref-js2
|
||||
:when (modulep! :tools lookup)
|
||||
:init
|
||||
(setq xref-js2-search-program 'rg)
|
||||
(set-lookup-handlers! 'rjsx-mode
|
||||
:xref-backend #'xref-js2-xref-backend))
|
||||
|
||||
;; HACK `rjsx-electric-gt' relies on js2's parser to tell it when the cursor
|
||||
;; is in a self-closing tag, so that it can insert a matching ending tag
|
||||
;; at point. The parser doesn't run immediately however, so a fast typist
|
||||
;; can outrun it, causing tags to stay unclosed, so force it to parse:
|
||||
(defadvice! +javascript-reparse-a (n)
|
||||
;; if n != 1, rjsx-electric-gt calls rjsx-maybe-reparse itself
|
||||
:before #'rjsx-electric-gt
|
||||
(if (= n 1) (rjsx-maybe-reparse))))
|
||||
(use-package! js-ts-mode
|
||||
:when (modulep! +tree-sitter)
|
||||
:when (fboundp 'js-ts-mode) ; 29.1+ only
|
||||
:defer t
|
||||
:init
|
||||
(set-tree-sitter! 'js-mode 'js-ts-mode 'javascript)
|
||||
(+javascript-common-config 'js-ts-mode))
|
||||
|
||||
|
||||
(use-package! typescript-mode
|
||||
:hook (typescript-mode . rainbow-delimiters-mode)
|
||||
:hook (typescript-tsx-mode . rainbow-delimiters-mode)
|
||||
:init
|
||||
(when (modulep! :lang web)
|
||||
(autoload 'typescript-tsx-mode "typescript-mode" nil t))
|
||||
|
||||
;; REVIEW We associate TSX files with `typescript-tsx-mode' derived from
|
||||
;; `web-mode' because `typescript-mode' does not officially support
|
||||
;; JSX/TSX. See emacs-typescript/typescript.el#4
|
||||
(add-to-list 'auto-mode-alist
|
||||
(cons "\\.tsx\\'"
|
||||
(if (modulep! :lang web)
|
||||
#'typescript-tsx-mode
|
||||
#'typescript-mode)))
|
||||
|
||||
(when (modulep! :checkers syntax -flymake)
|
||||
(after! flycheck
|
||||
(flycheck-add-mode 'javascript-eslint 'web-mode)
|
||||
(flycheck-add-mode 'javascript-eslint 'typescript-mode)
|
||||
(flycheck-add-mode 'javascript-eslint 'typescript-tsx-mode)
|
||||
(flycheck-add-mode 'typescript-tslint 'typescript-tsx-mode)
|
||||
(unless (modulep! +lsp)
|
||||
(after! tide
|
||||
(flycheck-add-next-checker 'typescript-tide '(warning . javascript-eslint) 'append)
|
||||
(flycheck-add-mode 'typescript-tide 'typescript-tsx-mode)))
|
||||
(add-hook! 'typescript-tsx-mode-hook
|
||||
(defun +javascript-disable-tide-checkers-h ()
|
||||
(pushnew! flycheck-disabled-checkers
|
||||
'javascript-jshint
|
||||
'tsx-tide
|
||||
'jsx-tide)))))
|
||||
:unless (modulep! +tree-sitter)
|
||||
:mode "\\.ts\\'"
|
||||
:config
|
||||
(when (fboundp 'web-mode)
|
||||
(define-derived-mode typescript-tsx-mode web-mode "TypeScript-TSX")
|
||||
(when (modulep! +lsp)
|
||||
(after! lsp-mode
|
||||
(add-to-list 'lsp--formatting-indent-alist '(typescript-tsx-mode . typescript-indent-level))))
|
||||
(when (modulep! +tree-sitter)
|
||||
(after! evil-textobj-tree-sitter
|
||||
(pushnew! evil-textobj-tree-sitter-major-mode-language-alist '(typescript-tsx-mode . "tsx")))
|
||||
(after! tree-sitter
|
||||
(pushnew! tree-sitter-major-mode-language-alist '(typescript-tsx-mode . tsx)))
|
||||
;; HACK: the tsx grammer doesn't work with the hightlighting provided by
|
||||
;; font-lock-keywords. See emacs-tree-sitter/tree-sitter-langs#23
|
||||
(setq-hook! 'typescript-tsx-mode-hook
|
||||
tree-sitter-hl-use-font-lock-keywords nil)))
|
||||
(+javascript-common-config 'typescript-mode))
|
||||
|
||||
(set-docsets! '(typescript-mode typescript-tsx-mode)
|
||||
:add "TypeScript" "AngularTS")
|
||||
(set-electric! '(typescript-mode typescript-tsx-mode)
|
||||
:chars '(?\} ?\))
|
||||
:words '("||" "&&"))
|
||||
;; HACK Fixes comment continuation on newline
|
||||
(autoload 'js2-line-break "js2-mode" nil t)
|
||||
(setq-hook! 'typescript-mode-hook
|
||||
comment-line-break-function #'js2-line-break
|
||||
|
||||
;; Most projects use either eslint, prettier, .editorconfig, or tsf in order
|
||||
;; to specify indent level and formatting. In the event that no
|
||||
;; project-level config is specified (very rarely these days), the community
|
||||
;; default is 2, not 4. However, respect what is in tsfmt.json if it is
|
||||
;; present in the project
|
||||
typescript-indent-level
|
||||
(or (and (bound-and-true-p tide-mode)
|
||||
(plist-get (tide-tsfmt-options) :indentSize))
|
||||
typescript-indent-level)
|
||||
(use-package! typescript-ts-mode
|
||||
:when (modulep! +tree-sitter)
|
||||
:when (fboundp 'typescript-ts-mode) ; 29.1+ only
|
||||
:mode "\\.ts\\'"
|
||||
:init
|
||||
(set-tree-sitter! 'typescript-mode 'typescript-ts-mode 'typescript)
|
||||
:config
|
||||
(+javascript-common-config 'typescript-ts-mode))
|
||||
|
||||
;; Fix #5556: expand .x to className="x" instead of class="x", if
|
||||
;; `emmet-mode' is used.
|
||||
emmet-expand-jsx-className? t))
|
||||
|
||||
(use-package! tsx-ts-mode
|
||||
:when (modulep! +tree-sitter)
|
||||
:when (fboundp 'tsx-ts-mode) ; 29.1+ only
|
||||
:mode "\\.[tj]sx\\'"
|
||||
:defer t
|
||||
:config
|
||||
(+javascript-common-config 'tsx-ts-mode))
|
||||
|
||||
|
||||
;;
|
||||
;;; Tools
|
||||
;;; Extensions
|
||||
|
||||
(when (modulep! +tree-sitter)
|
||||
(add-hook! '(js2-mode-local-vars-hook
|
||||
typescript-mode-local-vars-hook
|
||||
typescript-tsx-mode-local-vars-hook
|
||||
rjsx-mode-local-vars-hook)
|
||||
:append #'tree-sitter!))
|
||||
|
||||
(add-hook! '(typescript-mode-local-vars-hook
|
||||
typescript-tsx-mode-local-vars-hook
|
||||
web-mode-local-vars-hook
|
||||
rjsx-mode-local-vars-hook)
|
||||
(defun +javascript-init-lsp-or-tide-maybe-h ()
|
||||
"Start `lsp' or `tide' in the current buffer.
|
||||
|
||||
LSP will be used if the +lsp flag is enabled for :lang javascript AND if the
|
||||
current buffer represents a file in a project.
|
||||
|
||||
If LSP fails to start (e.g. no available server or project), then we fall back
|
||||
to tide."
|
||||
(let ((buffer-file-name (buffer-file-name (buffer-base-buffer))))
|
||||
(when (derived-mode-p 'js-mode 'typescript-mode 'typescript-tsx-mode)
|
||||
(if (null buffer-file-name)
|
||||
;; necessary because `tide-setup' and `lsp' will error if not a
|
||||
;; file-visiting buffer
|
||||
(add-hook 'after-save-hook #'+javascript-init-lsp-or-tide-maybe-h
|
||||
nil 'local)
|
||||
(or (if (modulep! +lsp) (lsp!))
|
||||
;; fall back to tide
|
||||
(if (executable-find "node")
|
||||
(and (require 'tide nil t)
|
||||
(progn (tide-setup) tide-mode))
|
||||
(ignore
|
||||
(doom-log "Couldn't start tide because 'node' is missing"))))
|
||||
(remove-hook 'after-save-hook #'+javascript-init-lsp-or-tide-maybe-h
|
||||
'local))))))
|
||||
;; Parse node stack traces in the compilation buffer
|
||||
(after! compilation
|
||||
(add-to-list 'compilation-error-regexp-alist 'node)
|
||||
(add-to-list 'compilation-error-regexp-alist-alist
|
||||
'(node "^[[:blank:]]*at \\(.*(\\|\\)\\(.+?\\):\\([[:digit:]]+\\):\\([[:digit:]]+\\)"
|
||||
2 3 4)))
|
||||
|
||||
|
||||
(use-package! tide
|
||||
:hook (tide-mode . tide-hl-identifier-mode)
|
||||
:config
|
||||
(set-company-backend! 'tide-mode 'company-tide)
|
||||
;; navigation
|
||||
(set-lookup-handlers! 'tide-mode :async t
|
||||
:xref-backend #'xref-tide-xref-backend
|
||||
:documentation #'tide-documentation-at-point)
|
||||
(set-popup-rule! "^\\*tide-documentation" :quit t)
|
||||
|
||||
(setq tide-completion-detailed t
|
||||
tide-always-show-documentation t
|
||||
;; Fix #1792: by default, tide ignores payloads larger than 100kb. This
|
||||
;; is too small for larger projects that produce long completion lists,
|
||||
;; so we up it to 512kb.
|
||||
tide-server-max-response-length 524288
|
||||
;; We'll handle it
|
||||
tide-completion-setup-company-backend nil)
|
||||
|
||||
;; Resolve to `doom-project-root' if `tide-project-root' fails
|
||||
(advice-add #'tide-project-root :override #'+javascript-tide-project-root-a)
|
||||
|
||||
;; Cleanup tsserver when no tide buffers are left
|
||||
(add-hook! 'tide-mode-hook
|
||||
(add-hook 'kill-buffer-hook #'+javascript-cleanup-tide-processes-h
|
||||
nil 'local))
|
||||
|
||||
;; Eldoc is activated too soon and disables itself, thinking there is no eldoc
|
||||
;; support in the current buffer, so we must re-enable it later once eldoc
|
||||
;; support exists. It is set *after* tide-mode is enabled, so enabling it on
|
||||
;; `tide-mode-hook' is too early, so...
|
||||
(advice-add #'tide-setup :after #'eldoc-mode)
|
||||
|
||||
(map! :localleader
|
||||
:map tide-mode-map
|
||||
"R" #'tide-restart-server
|
||||
"f" #'tide-format
|
||||
"rrs" #'tide-rename-symbol
|
||||
"roi" #'tide-organize-imports))
|
||||
|
||||
|
||||
(use-package! js2-refactor
|
||||
:hook ((js2-mode rjsx-mode) . js2-refactor-mode)
|
||||
(use-package! nodejs-repl
|
||||
:defer t
|
||||
:init
|
||||
(map! :after js2-mode
|
||||
:map js2-mode-map
|
||||
:localleader
|
||||
(:prefix ("r" . "refactor")
|
||||
(:prefix ("a" . "add/arguments"))
|
||||
(:prefix ("b" . "barf"))
|
||||
(:prefix ("c" . "contract"))
|
||||
(:prefix ("d" . "debug"))
|
||||
(:prefix ("e" . "expand/extract"))
|
||||
(:prefix ("i" . "inject/inline/introduce"))
|
||||
(:prefix ("l" . "localize/log"))
|
||||
(:prefix ("o" . "organize"))
|
||||
(:prefix ("r" . "rename"))
|
||||
(:prefix ("s" . "slurp/split/string"))
|
||||
(:prefix ("t" . "toggle"))
|
||||
(:prefix ("u" . "unwrap"))
|
||||
(:prefix ("v" . "var"))
|
||||
(:prefix ("w" . "wrap"))
|
||||
(:prefix ("3" . "ternary"))))
|
||||
:config
|
||||
(when (modulep! :editor evil +everywhere)
|
||||
(add-hook 'js2-refactor-mode-hook #'evil-normalize-keymaps)
|
||||
(let ((js2-refactor-mode-map (evil-get-auxiliary-keymap js2-refactor-mode-map 'normal t t)))
|
||||
(js2r-add-keybindings-with-prefix (format "%s r" doom-localleader-key)))))
|
||||
|
||||
|
||||
;;;###package skewer-mode
|
||||
(map! :localleader
|
||||
(:after js2-mode
|
||||
:map js2-mode-map
|
||||
"S" #'+javascript/skewer-this-buffer
|
||||
:prefix ("s" . "skewer"))
|
||||
:prefix "s"
|
||||
(:after skewer-mode
|
||||
:map skewer-mode-map
|
||||
"E" #'skewer-eval-last-expression
|
||||
"e" #'skewer-eval-defun
|
||||
"f" #'skewer-load-buffer)
|
||||
|
||||
(:after skewer-css
|
||||
:map skewer-css-mode-map
|
||||
"e" #'skewer-css-eval-current-declaration
|
||||
"r" #'skewer-css-eval-current-rule
|
||||
"b" #'skewer-css-eval-buffer
|
||||
"c" #'skewer-css-clear-all)
|
||||
|
||||
(:after skewer-html
|
||||
:map skewer-html-mode-map
|
||||
"e" #'skewer-html-eval-tag))
|
||||
|
||||
|
||||
(use-package! npm-mode
|
||||
:hook ((js-mode typescript-mode) . npm-mode)
|
||||
:config
|
||||
(map! :localleader
|
||||
(:map npm-mode-keymap
|
||||
"n" npm-mode-command-keymap)
|
||||
(:after js2-mode
|
||||
:map js2-mode-map
|
||||
:prefix ("n" . "npm"))))
|
||||
(+javascript-common-config 'nodejs-repl-mode))
|
||||
|
||||
|
||||
;;
|
||||
|
||||
@@ -8,3 +8,7 @@
|
||||
(assert! (or (not (modulep! +tree-sitter))
|
||||
(modulep! :tools tree-sitter))
|
||||
"This module requires (:tools tree-sitter)")
|
||||
|
||||
(unless (modulep! +tree-sitter)
|
||||
(warn! "Typescript support is degraded without +tree-sitter (and Emacs 29+)")
|
||||
(warn! "No JSX/TSX support without +tree-sitter (and Emacs 29+)"))
|
||||
|
||||
@@ -2,18 +2,10 @@
|
||||
;;; lang/javascript/packages.el
|
||||
|
||||
;; Major modes
|
||||
(package! rjsx-mode :pin "b697fe4d92cc84fa99a7bcb476f815935ea0d919")
|
||||
(package! typescript-mode :pin "481df3ad2cdf569d8e6697679669ff6206fbd2f9")
|
||||
(unless (or (modulep! +tree-sitter)
|
||||
(fboundp 'treesit-available-p)
|
||||
(treesit-available-p))
|
||||
(package! typescript-mode :pin "481df3ad2cdf569d8e6697679669ff6206fbd2f9"))
|
||||
|
||||
;; Tools
|
||||
(package! js2-refactor :pin "e1177c728ae52a5e67157fb18ee1409d8e95386a")
|
||||
(package! npm-mode :pin "3ee7c0bad5b7a041d4739ef3aaa06a3dc764e5eb")
|
||||
|
||||
;; Eval
|
||||
;; Extensions
|
||||
(package! nodejs-repl :pin "130d49b073a50b7aad472ae8cd05848a9840e480")
|
||||
(package! skewer-mode :pin "e5bed351939c92a1f788f78398583c2f83f1bb3c")
|
||||
|
||||
;; Programming environment
|
||||
(package! tide :pin "6a35fe355f1442da34b976bf2decf008d6e4f991")
|
||||
(when (modulep! :tools lookup)
|
||||
(package! xref-js2 :pin "e215af9eedac69b40942fff9d5514704f9f4d43e"))
|
||||
|
||||
@@ -74,7 +74,6 @@
|
||||
(bibtex "https://github.com/latex-lsp/tree-sitter-bibtex" nil nil nil nil)
|
||||
(blueprint "https://github.com/huanie/tree-sitter-blueprint" nil nil nil nil)
|
||||
(commonlisp "https://github.com/tree-sitter-grammars/tree-sitter-commonlisp" nil nil nil nil)
|
||||
(javascript "https://github.com/tree-sitter/tree-sitter-javascript" "master" "src" nil nil)
|
||||
(latex "https://github.com/latex-lsp/tree-sitter-latex" nil nil nil nil)
|
||||
(make "https://github.com/tree-sitter-grammars/tree-sitter-make" nil nil nil nil)
|
||||
(nu "https://github.com/nushell/tree-sitter-nu" nil nil nil nil)
|
||||
@@ -85,8 +84,6 @@
|
||||
(sql "https://github.com/DerekStride/tree-sitter-sql" "gh-pages" nil nil nil)
|
||||
(surface "https://github.com/connorlay/tree-sitter-surface" nil nil nil nil)
|
||||
(toml "https://github.com/tree-sitter/tree-sitter-toml" nil nil nil nil)
|
||||
(tsx "https://github.com/tree-sitter/tree-sitter-typescript" "master" "tsx/src" nil nil)
|
||||
(typescript "https://github.com/tree-sitter/tree-sitter-typescript" "master" "typescript/src" nil nil)
|
||||
(typst "https://github.com/uben0/tree-sitter-typst" "master" "src" nil nil)
|
||||
(verilog "https://github.com/gmlarumbe/tree-sitter-verilog" nil nil nil nil)
|
||||
(vhdl "https://github.com/alemuller/tree-sitter-vhdl" nil nil nil nil)
|
||||
|
||||
Reference in New Issue
Block a user