Lsp mode does not respect web mode indentation variables

[vikigenius]

Thank you for the bug report

• I am using the latest version of lsp-mode related packages.
• I checked FAQ and Troubleshooting sections
• You may also try reproduce the issue using clean environment using the following command

emacs -q -l lsp-start-plain.el

where lsp-start-plain.el can be downloaded here.
Alternatively, it will be great if you can reproduce the issue using lsp-docker which provides the minimal configurations for lsp-mode and ships with most of the language servers.

Bug description

So I am using a custom derived more of web-mode to handle my .tsx files. This does not respect my indendation configurations.

For eg:

import {
  Stack,
} from '@chakra-ui/react';

In the above snippet if I try to add another import and use completion, it indents to 4 spaces instead of two. Even though according to normal indentation rules, I consistently use 2 spaces.

Steps to reproduce

1. Set web-mode-code-indent-offset to 2
2. Verify that standard indendation uses 2 spaces.
3. Try to use completion when doing imports in .tsx files with web-mode.

Expected behavior

lsp-mode should respect web-mode indendation variables.

Which Language Server did you use?

ESLint and typescript-language-server

OS

Linux

Error callstack

No response

Anything else?

Adding the following advice in doom-emacs fixes the issue.

(defadvice! +lsp--fix-indent-width-in-web-mode-a (orig-fn mode)
  :around #'lsp--get-indent-width
  (if (provided-mode-derived-p mode 'web-mode)
      'tab-width
    (funcall orig-fn mode)))

[kiennq]

@vikigenius Can you try

(setf (alist-get 'web-mode lsp--formatting-indent-alist) 'web-mode-code-indent-offset)

There is no web-mode mapping to its indent variable so lsp-mode cannot determine correct indentation for it.
if you can provide a PR to add web-mode to lsp--formatting-indent-alist it would be great

[vikigenius]

So it does work in my specific case since I am using web mode for typescript mostly. But web-mode provides multiple indentation variables

web-mode-css-indent-offset
web-mode-markup-indent-offset
web-mode-sql-indent-offset
web-mode-code-indent-offset (for js, php, ts etc.)

I am not really sure how to handle that nicely.

I will probably no longer be using web-mode for tsx once emacs-typescript/typescript.el#4 gets resolved.

But meanwhile I will use the suggestion you provided since that works out ok for me. If you have any better ideas on handling the multiple indentation variables that web-mode provides I can provide a more generic PR.

[yyoncho]

But meanwhile I will use the suggestion you provided since that works out ok for me. If you have any better ideas on handling the multiple indentation variables that web-mode provides I can provide a more generic PR.

What we can do is allow providing a matcher function in the indent alist. Marking as closed since the issue has a workarround. If you want to extend lsp-mode to support matcher function feel free to provide a PR.

[Freder211]

Hi @yyoncho,
I encountered this same problem myself and I tried to implement a solution with 1aa8a96. The indentation is not determined only by the current major mode, but also by the file extention.
The decision priority is:

1. Check current major mode
2. Check parent major mode
3. Check current file extention (pick the indentation value from lsp--extention-formatting-indent-alist)
4. Fallback to default mode

What we can do is allow providing a matcher function in the indent alist

I didn't go for the matcher function that you suggested. I decided to go this way becuase it makes the configuration easier as you don't have to create a custom function but you can just map a file extention (a string) to a variable.
The donwnside is arguably the fact that now you have two alists (one for the modes and one for the file extentions).

If you don't like this approach then I can try to implement the matcher function.

I think this is a really common problem as LSP and web-mode are typical packages used by devs, so please tell me what you think so that we can reach a solution, thank you!