22

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: asciicast

4 Answers 4

31

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))
3
  • 2
    for plain emacs just (setq-default typescript-indent-level 2) inside .emacs working Dec 23, 2018 at 22:21
  • This answer may now be out of date, on spacemacs version 0.999.0 I have no such variable when inside a tsx file, and, in setting it as a typescript variable, it had no effect on my tsx files
    – Caleb Jay
    Aug 16, 2022 at 2:16
  • 1
    @CalebJay does this answer help? Or maybe this?
    – NickD
    Nov 23, 2022 at 17:31
4

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.

2

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
                 )
    )
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.