How to change indent size for typescript layer in Spacemacs?

Question

I have a tsfmt.json file with

{
  "indentSize": 2,
  "tabSize": 2
}

which does get picked up appropriately by tide when running M-x tide-format.

But when I start a new line by pressing RET or 'o', it gets indented 4 spaces. How do I change this?

---

Using Spacemacs v.0.200.10 on GNU Emacs 27.0.50 (build 1, x86_64-apple-darwin16.7.0, NS appkit-1504.83 Version 10.12.6 (Build 16G29)) of 2017-09-17

---

Repro:

Answer 1

There is a variable called typescript-indent-level that, by default is set to 4. For Spacemacs specifically, you can change the value of this variable by directly setting it in your dotspacemacs/user-config function like so:

(defun dotspacemacs/user-config ()
  (setq-default typescript-indent-level 2))

Answer 2

I ran into the same problem with .tsx files. Turns out you also have to set the variable web-mode-code-indent-offset to your preferred indent level as well.

If you go M-x customize then search for the variable you can set it there and it will automatically update your config files.

Answer 3

Besides the accepted answer there was a comment about *.tsx files. The indention of *.tsx files is controlled by typescript-tsx mode, which is inheriting the settings from web-mode, which is covered by the html layer.

I have the following in my dotspacemac/layers:

   (html :variables
         web-mode-markup-indent-offset 2
         web-mode-code-indent-offset 2
         web-mode-css-indent-offset 2
         web-mode-sql-indent-offset 2
   )
   (typescript :variables
         typescript-indent-level 2
   )

This will set the indention level to 2 in both modes.

Answer 4

You can initialize this configuration with the layer.

In your ~/.spacemacs file, you can set your layers like this..

   dotspacemacs-configuration-layers
   '(systemd
     (typescript :variables
                 typescript-indent-level 2
                 )
    )