Can't load tsx-tide checker

[ianyepan]

I have the following defined for editing .tsx files:

    (define-derived-mode web-tsx-mode web-mode "Web-TSX")
    (add-to-list 'auto-mode-alist '("\\.tsx$" . web-tsx-mode))
    (add-hook 'web-tsx-mode-hook 'tide-setup)
    (with-eval-after-load 'flycheck
      (flycheck-add-mode 'tsx-tide 'web-tsx-mode))
    (define-key web-tsx-mode-map (kbd "s-b") 'tide-jump-to-definition)
    (define-key web-tsx-mode-map (kbd "s-[") 'tide-jump-back)

Emacs tells me that tsx-tide is not a valid syntax checker, which is weird because if tide hasn't loaded up by then, how would the following two define-keys work? Strangely enough, tide-jump-to-definition and tide-jump-back work perfectly fine.

[ananthakumaran]

I think it's only enabled for web-mode, not sure if it would work in derived mode

[ianyepan]

This kind of makes sense. Thanks for the prompt reply.

Since you probably know more about flycheck and web-mode than I do, I hope you don't mind me asking:

If I have js, jsx, html, css, ts, tsx all bound to the same plain web-mode, how does flycheck know which checker to use? Does it actually look at the file extensions apart from the current major mode?

[ananthakumaran]

There are two different checks, we will check if tide-mode is enabled and also check for file extension. You can search for flycheck-define-generic-checker in the tide code, it's pretty self-explanatory.

[ianyepan]

Cheers, I will.

In the end, I solved my problem with this code I tweaked (posted here to help other people):

    (defun my/tsx-setup ()
      (when (and (stringp buffer-file-name)
                 (string-match "\\.tsx$" buffer-file-name))
        (tide-setup)))
    (add-hook 'web-mode-hook 'my/tsx-setup)
    (define-key tide-mode-map (kbd "s-b") 'tide-jump-to-definition)
    (define-key tide-mode-map (kbd "s-[") 'tide-jump-back)

So now I can enable tide in web-mode only if the file ends with .tsx, this is useful since I don't want to enable tide in, say .html and .css (both in web-mode).

P.s. Closing issue since problem solved.

[ianyepan]

A similar question I might as well ask here: would it be possible to have jsx-tide be enabled for all rjsx-mode regardless of the file extension (since I also code jsx syntax in js files, after hooking both .js and .jsx to rjsx-mode)? In other words, I want jsx-tide to be my checker for both .js files and .jsx files.

• In an rjsx-mode buffer with jsx file extension: jsx-tide is enabled and its predicate is t
• In an rjsx-mode buffer with js file extension: No checker to run in this buffer. jsx-tide predicate: nil

It seems to me that predicates play an important part in enabling checkers in flycheck (but I don't really understand the usecase of predicates). How do I interact with it?

[ananthakumaran]

Looks like I missed this message.

A similar question I might as well ask here: would it be possible to have jsx-tide be enabled for all rjsx-mode regardless of the file extension

No, the reason being how the checker is defined. tide explicitly adds a check for file extension.

(flycheck-define-generic-checker 'jsx-tide
  "A JSX syntax checker using tsserver."
  :start #'tide-flycheck-start
  :verify #'tide-flycheck-verify
  :modes '(web-mode js2-jsx-mode rjsx-mode)
  :predicate (lambda ()
               (and
                (tide-file-extension-p "jsx")
                (tide-flycheck-predicate))))

(add-to-list 'flycheck-checkers 'jsx-tide t)

But flycheck is extensible. You can just use the above config as template and define a new one with different name for rjsx-mode.

Another options is to add rjsx-mode to the list of modes in javascript-tide. The reason it's not there is because I thought rjsx is for editing jsx files only?

[ianyepan]

No, the reason being how the checker is defined. tide explicitly adds a check for file extension.

Thanks for the reply! I see.

To answer you question "because I thought rjsx is for editing jsx files only?", in modern web development (at least the projects I've taken part in), it's common to use a .js file extension yet still have jsx syntax in the code. Perhaps, tide would want to allow jsx-tide to also be enabled for both .js and .jsx files, but of course, that's entirely up to you.

Feel free to close this issue if you find further discussions unnecessary.

Have a nice day!

[ni-ko-o-kin]

Another options is to add rjsx-mode to the list of modes in javascript-tide. The reason it's not there is because I thought rjsx is for editing jsx files only?

I'm using rjsx-mode only for js files. But it can be used for jsx and js.

BTW: thanks for this awesome package @ananthakumaran !!!