`.editorconfig` not taken into account when formatting multiple lines of tsx

[Invertisment]

Description :octocat:

.editorconfig is not taken into account when indenting line-selection-mode-selected lines in a tsx file. Occurs in evil mode and when indenting the whole buffer.

Reproduction guide :beetle:

Preparation:

• add .editorconfig to your project (Let's say configure 2 spaces for typescript files, default is 4 spaces)
• Start Emacs
• Open a source file

Multiple line selection format with LSP mode:

• Select text via line selection mode (Shift+v)
• Press = to indent the lines
• Indents by 4 spaces

Buffer format with LSP mode:

• execute lsp-format-buffer
• Indents by 4 spaces

Single-line formatting works:

• Do not select any text
• Press = twice (to indent the current line)
• Indents by 2 spaces

Observed behaviour: :eyes: :broken_heart: Multi-line-selected indentation is not consistent with config in .editorconfig

Expected behaviour: :heart: :smile: Should be consistent

System Info :computer:

• OS: gnu/linux
• Emacs: 27.2
• Spacemacs: 0.300.0
• Spacemacs branch: develop (rev. a862d1ac5)
• Graphic display: t
• Distribution: spacemacs
• Editing style: vim
• Completion: helm
• Layers:

(sql python ruby javascript
     (typescript :variables typescript-backend 'lsp typescript-linter 'eslint typescript-fmt-on-save t)
     html csv yaml markdown
     (go :variables go-use-golangci-lint t go-format-before-save t gofmt-command "goimports" go-tab-width 2)
     (lsp :variables lsp-ui-doc-enable nil lsp-ui-sideline-enable t lsp-ui-sideline-show-code-actions t lsp-headerline-breadcrumb-enable nil)
     (clojure :variables clojure-enable-clj-refactor t clojure-backend 'cider)
     react c-c++ rust java
     (scala :variables scala-backend 'scala-metals)
     (auto-completion :variables auto-completion-enable-help-tooltip nil)
     emacs-lisp helm spell-checking
     (syntax-checking :variables syntax-checking-enable-tooltips nil)
     treemacs sql)

• System configuration features: XPM JPEG TIFF GIF PNG RSVG CAIRO SOUND GPM DBUS GSETTINGS GLIB NOTIFY INOTIFY ACL GNUTLS LIBXML2 FREETYPE HARFBUZZ M17N_FLT LIBOTF ZLIB TOOLKIT_SCROLL_BARS GTK3 X11 XDBE XIM MODULES THREADS LIBSYSTEMD JSON PDUMPER LCMS2 GMP

[lebensterben]

The default formatter is tide. You should report to upstream: https://github.com/ananthakumaran/tide#readme

[Invertisment]

I've looked for tide through my config and found these lines:

(safe-local-variable-values
   '(
;;; ...
     (typescript-backend . tide)
     (typescript-backend . lsp)
     (javascript-backend . tide)
     (javascript-backend . tern)
     (javascript-backend . lsp)
;;; ...

))

This seems quite odd that something generated them. From what I see in my backup config it was generated by something in the past. And if I'm correct it sets the back-end for typescript. So if I understand correctly the last value should override the tide with lsp.

I also found that tide package is also installed.

Edit:

The issue is still present I comment out it this way and restart emacs:

     (typescript-backend . tide)
;;     (typescript-backend . lsp)
     (javascript-backend . tide)
     (javascript-backend . tern)
     (javascript-backend . lsp)

;;     (typescript-backend . tide)
     (typescript-backend . lsp)
     (javascript-backend . tide)
     (javascript-backend . tern)
     (javascript-backend . lsp)

;;     (typescript-backend . tide)
;;     (typescript-backend . lsp)
     (javascript-backend . tide)
     (javascript-backend . tern)
     (javascript-backend . lsp)

The default formatter is tide. You should report to upstream: https://github.com/ananthakumaran/tide#readme

I'm not sure if it's tide's fault. In the bottom of my screen I see that the tsx file is being handled by LSP and ts-ls:

[lebensterben]

What's the LSP client you're using? (, b d)

[Invertisment]

I already wrote about it -- ts-ls

 `-[-] ts-ls:237369
    |-[-] Buffers
    |  `-[+] App.tsx
    `-[+] Capabilities

[lebensterben]

You need to report this to upstream. It doesn't seem to look for .editorconfig.

https://github.com/theia-ide/typescript-language-server/blob/b9cf57816ca07b9b3f3631130b7b5250b0db7ced/server/src/lsp-server.ts#L561

[Invertisment]

So what should I do? Previously it worked (well it worked about a month ago and I did a pause since I wasn't working on this specific project). And for some reason it stopped. Does that mean that ts-ls should look up the .editorconfig itself but it doesn't do that anymore?

[lebensterben]

You can try to checkout an earlier commit of spacemacs and see whether it works. If so, there's some bug in spacemacs. Otherwise it's from upstream.

[Invertisment]

My previous pull from upstream was 125 commits ago, this will be fun ;D Anyway, thanks ;D

[Invertisment]

This issue doesn't come up if I use jsts-ls as my LSP backend. Disregarding the commit of the develop branch completely - it works the same for all of the commits. So it's not an issue with spacemacs code.

But jsts-ls doesn't have fancy TS features like object?.maybeProp and even destructuring. Where can I report this? Where can I find a repository for ts-ls? Github doesn't have anything with this exact name.

[lebensterben]

You can close this now.

[lebensterben]

It's reported upstream but the upstream maintainer believes it's out of their scope.

So I'm re-opening it here.

[kevinji]

Since typescript-tsx-mode is a derived mode of web-mode, is there something missing from web-mode that's preventing it from passing the correct indentation variables to lsp-mode? Does something need to be added to editorconfig-indentation-alist as well?

[komali2]

This is also happening for me with typescript-tsx-mode. I'm not even sure which indentation setting I need to set to get this working properly "manually" (rather than automatically via editorconfig), I'm depending on eslint --fix to fix my files for me before I commit now, it's infuriating lol. I poked around the typescript layer folder but didn't see anything standing out that I could sort on my own.

This is not me trying to format multiple lines or anything. For example, if I press o to start a new line, it will create the new line with an extra bit of whitespace as if my setting is for 4 spaces, unlike my editorconfig which is at 2 spaces. As in:

  multiple = false,
  label,
    test

My editorconfig is:

root = true

[*]
end_of_line = lf
insert_final_newline = true

[**.js,**.jsx,**.ts,**.tsx]
indent_style = space
indent_size = 2

EDIT: Aha, it's web-mode-code-indent-offset. For some reason that's not being set in tsx files based off editorconfig. A quick dirty fix is adding this to my .spacemacs, anywhere in dotspacemacs/user-config :

(defun my-web-mode-hook ()
  "Hooks for Web mode."
  (setq web-mode-markup-indent-offset 2)
  (setq web-mode-code-indent-offset 2)
  )
(add-hook 'web-mode-hook  'my-web-mode-hook)

[lebensterben]

@komali2

I don't think .editorconfig is read by LSP or web-mode.

You might be interested in https://github.com/editorconfig/editorconfig-emacs but I've not tested it.

[komali2]

I have that library, I didn't see this line though so thanks for pointing that out! I'll try this shortly

editorconfig-format-buffer does not work well with lsp-mode

By default, lsp-mode configures indent-region-function so that Emacs uses language servers' textDocument/rangeFormatting request to format text in buffers. So EditorConfig settings are ignored unless language servers themselves support loading configs from .editorconfig.

To avoid this behavior ad-hocly, set lsp-enable-indentation to nil.

[lebensterben]

• We need to document in lsp layer about this incompatibility with editorconfig.
• Optionally prompt user about it when lsp-mode starts and detects .editorconfig, and give user an option to turn of lsp-enable-identation.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please let us know if this issue is still valid!