I would like for tern to work only on React related files and Tern to only activate when working on React files with Web Mode turned on. Currently, I have tern generally set up with Web Mode, but the issue is that when I edit, let's say, a php file, Tern activates even though it does not need to. So, I would like for Tern to work in the context of Web Mode when I edit a React file only and NOT when I edit other Web Mode related files. Is this possible? Below is my setup, please assume Company is set up as well.

web mode setup

(use-package web-mode
    :defer 2
    :after (add-node-modules-path)
    :ensure t
    :mode ("\\.html?\\'"
    :config (progn
               web-mode-markup-indent-offset 2
               web-mode-css-indent-offset 2
               web-mode-code-indent-offset 2
               web-mode-enable-auto-closing t
               web-mode-enable-auto-opening t
               web-mode-enable-auto-pairing t
               web-mode-enable-auto-indentation t
               web-mode-enable-auto-quoting t
               web-mode-enable-current-column-highlight t
               web-mode-enable-current-element-highlight t
               '(("jsx" . "/\\(components\\|containers\\|src\\)/.*\\.js[x]?\\'")))))

tern setup

(use-package tern
    :ensure t
    :ensure-system-package (tern . "npm i -g tern")
    (add-hook 'js2-mode-hook 'tern-mode)
    (add-hook 'web-mode-hook 'tern-mode))

(use-package company-tern
    :requires tern
    :ensure t
    (add-to-list 'company-backends 'company-tern))

I had the same problem and what helped me was this config proposal from the Readme of the prettier-emacs mode:


You can declare a function "enable-minor-mode" in your .emacs-file:

(defun enable-minor-mode (my-pair)
  "Enable minor mode if filename match the regexp.  MY-PAIR is a cons cell (regexp . minor-mode)."
  (if (buffer-file-name)
      (if (string-match (car my-pair) buffer-file-name)
      (funcall (cdr my-pair)))))

Then you can hook up any minor-mode that you want to to files that match a certain regexp:

(add-hook 'web-mode-hook #'(lambda ()
                             '("\\.jsx?\\'" . any-minor-mode))))

So in your case (with company and tern) I guess all the code you would have to insert would be something like this:

(defun enable-minor-mode (my-pair)
  "Enable minor mode if filename match the regexp."
  (if (buffer-file-name)
      (if (string-match (car my-pair) buffer-file-name)
      (funcall (cdr my-pair)))

(require 'company)
(require 'company-tern)
(add-to-list 'company-backends 'company-tern)

(add-hook 'web-mode-hook #'(lambda ()
                             '("\\.jsx?\\'" . tern-mode)
(add-hook 'web-mode-hook #'(lambda ()
                             '("\\.jsx?\\'" . company-mode)

I hope this helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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