Doom-emacs: How do I use Eslint to check .ts/.tsx files instead of tsx-tide

[gueorgui]

What are you trying to achieve?
Since TSLint has been deprecated and Eslint is now the recommended way to lint Typescript/TSX files, I would like to lint my Typescript files using Eslint.

I'm at a bit of a loss on how to prevent the use of Tide for linting and default to Eslint instead like for .js files.

What have you tried?
I have configured my .eslintrc file to correctly handle Typescript by installing the typescript-eslint package.

System information

((emacs

  (version . "26.3")

  (features . "NOTIFY ACL GNUTLS LIBXML2 ZLIB TOOLKIT_SCROLL_BARS THREADS")

  (build . "Dec 28, 2019")

  (buildopts "--enable-locallisppath=/usr/local/share/emacs/site-lisp --infodir=/usr/local/Cellar/emacs-mac/emacs-26.3-z-mac-7.8/share/info/emacs --prefix=/usr/local/Cellar/emacs-mac/emacs-26.3-z-mac-7.8 --with-mac --enable-mac-app=/usr/local/Cellar/emacs-mac/emacs-26.3-z-mac-7.8 --with-gnutls")

  (windowsys . batch)

  (daemonp . server-running))

 (doom

  (version . "2.0.9")

  (build . "HEAD -> develop 453e20534 2020-01-15 11:19:32 -0500")

  (dir . "~/work/dotfiles/emacs/.doom.d/"))

 (system

  (type . darwin)

  (config . "x86_64-apple-darwin18.7.0")

  (shell . "/usr/local/bin/fish")

  (uname . "Darwin 18.7.0 Darwin Kernel Version 18.7.0: Tue Aug 20 16:57:14 PDT 2019; root:xnu-4903.271.2~2/RELEASE_X86_64 x86_64")

  (path "~/.nvm/versions/node/v12.13.0/bin" "~/go/bin" "~/.bin" "~/.yarn/bin" "~/.config/yarn/global/node_modules/.bin" "~/.rbenv/bin" "~/.rbenv/shims" "/usr/local/bin" "/usr/bin" "/bin" "/usr/sbin" "/sbin" "/usr/local/go/bin" "/usr/local/MacGPG2/bin" "/Library/Frameworks/Mono.framework/Versions/Current/Commands" "/Library/TeX/texbin" "~/go/bin" "~/.bin" "~/.yarn/bin" "~/.config/yarn/global/node_modules/.bin" "~/.rbenv/bin" "~/.rbenv/shims" "~/.rbenv/versions/2.6.3/bin" "/usr/local/Cellar/rbenv/1.1.2/libexec" "/usr/local/Cellar/emacs-mac/emacs-26.3-z-mac-7.8/libexec/emacs/26.3/x86_64-apple-darwin18.7.0"))

 (config

  (envfile . envvar-file)

  (elc-files . 0)

  (modules :completion company ivy :ui doom doom-dashboard doom-quit hl-todo modeline nav-flash ophints (popup +all +defaults) treemacs unicode vc-gutter vi-tilde-fringe window-select workspaces :editor (evil +everywhere) file-templates fold multiple-cursors rotate-text snippets :emacs (dired +icons) electric vc :term vterm :tools editorconfig eval :checkers syntax :tools (lookup +docsets) macos magit pdf :lang common-lisp data emacs-lisp go javascript latex ledger markdown (org +dragndrop +ipython +pandoc +present) plantuml python ruby rust sh web :config literate (default +bindings +smartparens))

  (packages "n/a")

  (elpa "ox-hugo")))

[gueorgui]

Following up on my own question, I have figured out how to run javascript-eslint in typescript-mode:

(defun typescript-mode-setup ()
  "Custom setup for Typescript mode"
  (setq flycheck-checker 'javascript-eslint)
  )
(add-hook 'typescript-mode-hook 'typescript-mode-setup)

The issue then becomes that .tsx files are not opened in typescript-mode (as that mode does not support JSX/TSX) but rather in web-mode, and it appears that javascript-eslint is not a valid Flycheck checker for web-mode.

Thus I'm stuck with either using typescript-mode for TSX files, losing the niceties of syntax highlighting and indentation for the JSX part, or I have to give up using Eslint.

Any insight would be greatly appreciated 😄

[afontaine]

@gueorgui I had to do something similar for vue to work nicely, ended up with the following

(define-derived-mode vue-mode web-mode "Vue mode")
(add-to-list 'auto-mode-alist '("\\.vue\\'" . vue-mode))
(after! flycheck
  (flycheck-add-mode 'javascript-eslint 'vue-mode)
  (flycheck-add-mode 'css-stylelint 'vue-mode)
  (add-hook 'vue-mode-hook (lambda () (flycheck-add-next-checker 'lsp-ui 'javascript-eslint)))
  (add-hook 'vue-mode-hook (lambda () (flycheck-add-next-checker 'javascript-eslint 'css-stylelint))))

You could replace instances of vue with tsx, and remove the stylelint support as well. This also uses lsp, so you might need to adjust for that as well.

[gueorgui]

@afontaine Thank you very much for this!