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

Created on 21 Jan 2020 · 3Comments · Source: hlissner/doom-emacs

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

:checkers syntax :lang javascript question resolved

Source

gueorgui

Most helpful comment

@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.

afontaine on 27 Jan 2020

👍4

All 3 comments

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 😄

gueorgui on 23 Jan 2020

@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.

afontaine on 27 Jan 2020

👍4

@afontaine Thank you very much for this!

gueorgui on 27 Jan 2020

Was this page helpful?

0 / 5 - 0 ratings