Hacker News Reader

Comment by viksit | Hacker News Reader

yes But can someone please tell me how to get typescript auto complete like vscode (eg auto import, linting) that also works for jsx. running tests. oh and simple auto complete.

i couldn’t get that to work with

https://github.com/viksit/prelude/blob/master/init.el

as someone else said - need to get work done :))

View on HN

For good autocompletion you‘ll need both an autocompletion framework and a language server client.

I am still using „lsp-mode“ as a language server client which works well for me and it comes with „company-mode“ integration for good autocompletion:

https://emacs-lsp.github.io/lsp-mode/page/lsp-typescript/

Later that day I can paste you the relevant lines out of my init.el.

Starting with Emacs 29 you can also use the treesitter mode „typescript-ts-mode“ for better syntax highlighting an navigation.

First, for every IDE experience you definitely need flycheck mode:

  (use-package flycheck
    :diminish flycheck-mode
    :init
    (global-flycheck-mode))

This will underline syntax errors for you. (It'll use the language server as a backend once lsp-mode runs.)

Next we install and set up "company-mode" for simple autocompletion. Basically, it starts the (minor) company mode after starting "lsp-mode", sets up key bindings and reduces the delay to zero:

  (use-package company
      :after lsp-mode
      :hook (lsp-mode . company-mode)
      :bind
      (:map company-active-map
            ("<tab>" . company-complete-selection))
      (:map lsp-mode-map
            ("<tab>" . company-indent-or-complete-common))
      :custom
      (company-minimum-prefix-length 1)
      (company-idle-delay 0.0))

This stuff is for basic JSX/TSX support you'll need to work on React projects. "web-mode" is old-school but it still works for me quite well. Since Emacs 29 you can use "typescript-ts-mode" instead but I haven't tried it out yet:

  (use-package web-mode
    :config
    ;; plain HTML may also contain JS
    (add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
    ;; JSX
    (add-to-list 'auto-mode-alist '("\\.jsx\\'" . web-mode))
    ; TSX
    (add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))
    ;; web-mode overrides these key strokes with "link" and "reload"
    ;; which I *never* needed. But I love compile mode:
    :bind (:map web-mode-map
                ("C-c C-l" . 'compile)
                ("C-c C-r" . 'recompile)))

The next stuff is for setting up lsp mode integrating the various language modes and company mode in a single user experience:

  (defun gernoti/lsp-mode-setup ()
    "Gernot's Emacs: My personal modifications to lsp mode."
    (setq lsp-headerline-breadcrumb-segments '(path-up-to-project file symbols))
    (lsp-headerline-breadcrumb-mode)
    (lsp-treemacs-sync-mode 1))

  ;; I am still using "web-mode" for react projects. The function
  ;; activates lsp mode only if the file actually contains
  ;; javascript/typescript (IIRC it'll also work for TSX):
  (defun gernoti/lsp-deferred-maybe-jsx ()
    (if (string= web-mode-content-type "jsx")
        (lsp-deferred)))

  (use-package lsp-mode
    :commands (lsp lsp-deferred)
    :hook
    (lsp-mode . gernoti/lsp-mode-setup)
    (js-mode . lsp-deferred)
    (typescript-mode . lsp-deferred)
    ;; We only turn lsp-mode on if web-mode runs in JSX or TSX mode.
    (web-mode . gernoti/lsp-deferred-maybe-jsx)
    :init
    (setq lsp-keymap-prefix "C-c l")  ;; Or 'C-l', 's-l'
    :config
    ;; You want this if you want to discover all lsp mode's goodies.
    ;; Though I found I actually don't use many features, really.
    (lsp-enable-which-key-integration t))

At first startup it'll download and run the default js/ts language server. It seems to be working well for me.

You definitely want the "lsp-ui" extensions for jumping around in definitions, too:

  (use-package lsp-ui
    :after lsp-mode
    :hook (lsp-mode . lsp-ui-mode)
    :custom
    (lsp-ui-doc-position 'bottom)
    ;; remap "M-." and "M-?" to point to the nice looking lsp-ui
    ;; replacements
    :config
    (define-key lsp-ui-mode-map [remap xref-find-definitions] #'lsp-ui-peek-find-definitions)
    (define-key lsp-ui-mode-map [remap xref-find-references] #'lsp-ui-peek-find-references))

Sounds great, I love time-consumingly setting up a bunch of fragile config for a less-than-fully-functional result instead of a 1-click installation of any number of IDEs that require none of that and work better and more completely in every way

Well, Emacs is all about choice and flexibility -- not 1-click convenience. If you do not want to spend some time learning your tool, it's definitely not for you. I respect that.

See, if you hate "lsp-mode" and "lsp-ui" you can go for the more minimal "eglot.el". Similarly, you can exchange "company.el" with "corfu.el" if you prefer the latter. It's all about freedom of choice. Emacs means to many people different things.

The code I pasted, however, are standard "use-package" expressions that work the same for every Emacs extension. And all of the configuration options you've got for an extension are usually well documented on the corresponding project page (at least for matured ones). And if you look closely, I haven't actually made a lot of modifications -- so the lines actually boil down to just installing five extensions.

While language ecosystems evolve so is Emacs and correspondingly my Emacs configuration. Sometimes you'll need to look into new alternatives. Especially in web development I'll probably need to switch over to "javascript-ts-mode" for JS and "typescript-ts-mode" for TS soon. For my configuration this will mean I'll remove the lines corresponding to "web-mode" and modify my language server client like this:

  (use-package lsp-mode
    :commands (lsp lsp-deferred)
    :hook
    (lsp-mode . gernoti/lsp-mode-setup)
  - (js-mode . lsp-deferred)
  - (typescript-mode . lsp-deferred)
  - ;; We only turn lsp-mode on if web-mode runs in JSX or TSX mode.
  - (web-mode . gernoti/lsp-deferred-maybe-jsx)
  + (js-ts-mode . lsp-deferred)
  + (typescript-ts-mode . lsp-deferred)
    :init
    (setq lsp-keymap-prefix "C-c l")  ;; Or 'C-l', 's-l'
    :config
    ;; You want this if you want to discover all lsp mode's goodies.
    ;; Though I found I actually don't use many features, really.
    (lsp-enable-which-key-integration t))

That's about it.

So it's not like I have to trash all of my configuration every other week. But it certainly looks a bit obscure to someone who is not familiar with ELISP. For me learning that to some extent has certainly has paid off as I did not have to relearn a new editor every couple of years.

Lol at the arrogance of thinking I do not take the time to learn or customize my tools while you advocate usage of a development environment that objectively lacks essential features for efficient professional programming such as functional semantic code search and navigation

Not sure why you're going so hard at OP. Just don't use the tool and move on, man :) Its totally OK if you like different tools. The acerbic response is totally unnecessary.

I am not even an emacs user yet know it has semantic code search and navigations. Sure you gottu install a couple of packages, but whats the big deal ?

omg you may be the most helpful answer i ever got on hn.

will check this out this week thank you!

I use tide-mode for Typescript/TSX and it works perfectly. All it needs is a package.json file to find the ts server.

Reply on news.ycombinator.com