How to debug tide formatting that results in eslint prettier failure

[steinarb]

Platform: Mac OSX, emacs 27.1, tide 20210517.507, web-mode-17

I have problems in that when I save, files are autoformatted into something prettier in eslint doesn't accept, and I need help debugging how to align autoformatting with prettier, and failing that: how to switch off autoformatting.

When I save .tsx files, then e.g. this

      {dokumentOpenInNewWindow ? (
        <NewWindow onUnload={() => setDokumentOpenInNewWindow(false)}>
          <PDFDokument />
        </NewWindow>
      ) : (
        <PDFDokument style={{ minHeight: 700 }} />
      )}

is turned into this:

      {dokumentOpenInNewWindow ? (
        <NewWindow onUnload={() => setDokumentOpenInNewWindow(false)}>
          <PDFDokument />
        </NewWindow>
      ) : (
          <PDFDokument style={{ minHeight: 700 }} />
        )}

My web-mode/tide config in .emacs, is:

(when (locate-library "web-mode")
  (defun setup-tide-mode ()
    (interactive)
    (tide-setup)
    (flycheck-mode +1)
    (setq flycheck-check-syntax-automatically '(save mode-enabled))
    (eldoc-mode +1)
    (tide-hl-identifier-mode +1)
    (company-mode +1))

  ;; aligns annotation to the right hand side
  (setq company-tooltip-align-annotations t)

  ;; formats the buffer before saving
  (add-hook 'before-save-hook 'tide-format-before-save)

  (add-hook 'typescript-mode-hook #'setup-tide-mode)

  (require 'web-mode)
  (add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))
  (add-hook 'web-mode-hook
            (lambda ()
              (when (string-equal "tsx" (file-name-extension buffer-file-name))
                (setup-tide-mode))))
  ;; enable typescript-tslint checker
  (flycheck-add-mode 'typescript-tslint 'web-mode))

My first attempt was to just switch off autoformatting, but I have failed to do so.

I have tried removing the tide-format-before-save setting. But emacs still formatted the file on save.

I then tried removing the flycheck-check-syntax-automatically setting. But emacs still formatted the file on save (it did seem to be worsening the formatting, though...?).

I then tried figuring out how tide picked up the prettier settings, and have found the code that locates the tsfmt.json file (tide-tsfmt-options and tide-project-root) and the top level directory has both an tsconfig.json file and a tsfmt.json.

The contents of the tsfmt.json file, is:

{
  "indentSize": 2,
  "tabSize": 2,
  "insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
  "insertSpaceInEmptyObjectLiteral": false,
  "placeOpenBraceOnNewLineForFunctions": false,
  "placeOpenBraceOnNewLineForControlBlocks": false
}

Any ideas as to what I can do...?

Thanks!

• Steinar

[ananthakumaran]

;; formats the buffer before saving
(add-hook 'before-save-hook 'tide-format-before-save)

Did you restart after commenting out the code? You either need a restart or manually remove the hook using remove-hook function. To check the current hook list, try C-h v before-save-hook.

As for aligning the formatting with other tools like prettier, this is something that is best asked to https://github.com/microsoft/TypeScript repo. Tide just passes along the config to tsserver and asks it for formatted text.

[steinarb]

>>>> Anantha Kumaran ***@***.***>: ```elisp ;; formats the buffer before saving (add-hook 'before-save-hook 'tide-format-before-save) ``` Did you restart after commenting out the code?

Yes, I started an entirely new emacs instance.

You either need a restart or manually remove the hook using `remove-hook` function. To check the current hook list, try `C-h v before-save-hook`.

It was nil in the restarted emacs instance. But still code was reformatted on save. That's when I got confused.

As for aligning the formatting with other tools like prettier, this is something that is best asked to https://github.com/microsoft/TypeScript repo. Tide just passes along the config to tsserver and asks it for formatted text.

Ok, so tsserver is the place to look? Thanks!

[ananthakumaran]

But still code was reformatted on save.

It might be done by something else. Tide doesn't format the buffer unless tide-format is called via hook or manually.

Ok, so tsserver is the place to look?

You can look at the Debugging section in the readme to get more details

[steinarb]

Just FYI I got a debugging tip from Tassilo Horn on the help-gnu-emacs mailing list https://lists.gnu.org/archive/html/help-gnu-emacs/2021-09/msg00059.html

I did

M-: (add-hook 'before-change-functions #'debug nil t) RET

in a .tsx buffer in a restarted emacs with nil before-save-hook and I found that the reformatting is done by web-mode-on-post-command and is run immediately after my change, and not just before save.

web-mode-on-post-command is run from the post-command-hook, and runs indent-region on the buffer when the command is a yank https://github.com/fxbois/web-mode/blob/master/web-mode.el#L2918

The formatting done by tide-format-before-save is different from the formatting done by indent-region in web-mode-on-post-command, and with tide-format-before-save in place, it's the tide-format-before-save formatting that wins.

[steinarb]

For any googlers that drop by: I ended up removing tide-formatting on save, and add prettier formatting on save, using Prettier-js for emacs:

modified   .emacs
@@ -542,6 +542,7 @@ to be something different.")
 ;; typescript (js with some typesafety)
 ;; Sadly rjsx and js2-mode doesn't support typescript, need to use tide and web-mode
 ;; Requires additional ELPA-packages: typescript-mode, web-mode, tide
+(add-hook 'web-mode-hook 'prettier-js-mode)
 (when (locate-library "web-mode")
   (defun setup-tide-mode ()
     (interactive)
@@ -558,9 +559,6 @@ to be something different.")
   ;; aligns annotation to the right hand side
   (setq company-tooltip-align-annotations t)
 
-  ;; formats the buffer before saving
-  (add-hook 'before-save-hook 'tide-format-before-save)
-
   (add-hook 'typescript-mode-hook #'setup-tide-mode)
 
   (require 'web-mode)
@@ -859,7 +857,7 @@ to be something different.")
      ("org" . "https://orgmode.org/elpa/")
      ("melpa stable" . "https://stable.melpa.org/packages/")))
  '(package-selected-packages
-   '(company tide web-mode groovy-mode yaml-mode selectrum projectile json-mode sparql-mode magit rjsx-mode flycheck editorconfig crappy-jsp-mode))
+   '(prettier-js company tide web-mode groovy-mode yaml-mode selectrum projectile json-mode sparql-mode magit rjsx-mode flycheck editorconfig crappy-jsp-mode))
  '(projectile-completion-system 'ido)
  '(projectile-globally-ignored-directories
    '(".idea" ".vscode" ".ensime_cache" ".eunit" ".git" ".hg" ".fslckout" "_FOSSIL_" ".bzr" "_darcs" ".tox" ".svn" ".stack-work" ".ccls-cache" ".cache" ".clangd" "node_modules" "target" "build"))