2

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?\\'"
           "/themes/.*\\.php?\\'"
           "/\\(components\\|containers\\|src\\)/.*\\.js[x]?\\'"
           "\\.\\(handlebars\\|hbs\\)\\'")
    :config (progn
              (setq
               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
               web-mode-content-types-alist
               '(("jsx" . "/\\(components\\|containers\\|src\\)/.*\\.js[x]?\\'")))))

tern setup

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

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

1 Answers1

2

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

https://github.com/prettier/prettier-emacs#usage-with-web-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 ()
                            (enable-minor-mode
                             '("\\.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 ()
                            (enable-minor-mode
                             '("\\.jsx?\\'" . tern-mode)
                 )))
(add-hook 'web-mode-hook #'(lambda ()
                            (enable-minor-mode
                             '("\\.jsx?\\'" . company-mode)
                 )))

I hope this helps!

ruderngespra
  • 21
  • 3