init-web.el

;;; init-wel.el --- Everything web related here.
;;; Commentary:
;;; This is the file that handles everything related to web-mode.
;;; Code:

(require 'web-mode)
(require 'emmet-mode)
(require 'tern)
(require 'company-tern)
(require 'yasnippet)
(require 'flycheck)

(add-to-list 'auto-mode-alist '("\\.phtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.[agj]sp\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.as[cp]x\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.mustache\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.jsx\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.js\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.json\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.ts\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))

(setq web-mode-content-types-alist '(("jsx" . "\\.js[x]?\\'")))

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

(defadvice company-tern (before web-mode-set-up-ac-sources activate)
  "Turn on tern mode if current language is javascript or jsx."
  (if (equal major-mode 'web-mode)
      (let ((web-mode-curr-language (web-mode-language-at-pos)))
        (if (or (string= web-mode-curr-language "jsx")
                (string= web-mode-curr-language "javascript"))
            (unless tern-mode (tern-mode))
          (if tern-mode (tern-mode -1))))))

(defadvice yas-expand (before web-mode-set-up-ac-sources activate)
  "Turn on appropriate yasnippet."
  (let ((web-mode-curr-language (web-mode-language-at-pos)))
    (if (or (string= web-mode-curr-language "jsx")
            (string= web-mode-curr-language "javascript"))
        (yas-activate-extra-mode 'js-mode)
      (yas-deactivate-extra-mode 'js-mode))
    (if (string= web-mode-curr-language "css")
        (setq emmet-use-css-transform t)
      (setq emmet-use-css-transform nil))))
  
(defun my-web-mode-hook ()
  "Hook for web-mode."
  (emmet-mode 1)
  (setq web-mode-markup-indent-offset 2)
  (setq web-mode-code-indent-offset 2)
  (setq web-mode-css-indent-offset 2)
  (setq web-mode-sql-indent-offset 4))

(defun setup-tide-mode ()
  "Setup tide mode."
  (interactive)
  (tide-setup)
  (flycheck-mode +1)
  (setq flycheck-check-syntax-automatically '(save mode-enabled))
  (eldoc-mode +1)
  (tide-hl-identifier-mode +1)
  ;; company is an optional dependency. You have to
  ;; install it separately via package-install
  ;; `M-x package-install [ret] company`
  (company-mode +1))

(add-hook 'web-mode-hook 'my-web-mode-hook)

(add-hook 'web-mode-before-auto-complete-hooks 'my-set-up-web-mode-yas-hook)

(provide 'init-web)
;;; init-web.el ends here