Hello I am new to Emacs and I am currently using it for web development projects. I am currently using Laravel and VueJS on my development. I search online what is the best major mode for this web development tools. I found out that web-mode is good for this.

But as I code I found out that it didn't detect.That I have a missing > on my html tags. enter image description here

As you can see above I have a missing > on my div. But the syntax highlighting below it is still the same.

I was using Sublime text 3 before and it has the functionality.

enter image description here

I wan't something like Sublime text 3. that can detect missing > and it will display different syntax highlighting below it.

I really want this functionality because I am coding html most of my works.

What is the tool that is good for this on Emacs?

EDIT: This file is a .vue file. Which is a component file for VueJS.

  • Have you tried C-c C-d d? It should be able to find malformed HTML. – DoMiNeLa10 Mar 6 '18 at 7:25
  • I just tried it and it says 0 errors detected – Yves Gonzaga Mar 6 '18 at 9:10
  • BTW. I am on a .vue file. Which is a component file for VueJS. – Yves Gonzaga Mar 6 '18 at 9:12
  • You can try html-check-frag.el available via melpa. – Tobias Mar 6 '18 at 23:28
  • flycheck also uses Tidy HTML5. – Tobias Mar 6 '18 at 23:34

Use builit flymake plus old cli tidy. tidy is available on Mac/Linux/Windows, tested on Emacs 24.4 and Emacs 25.3:

(defun flymake-html-init ()
       (let* ((temp-file (flymake-init-create-temp-buffer-copy
              (local-file (file-relative-name
                           (file-name-directory buffer-file-name))))
         (list "tidy" (list local-file))))

(defun flymake-html-load ()
  (when (and (not (null buffer-file-name)) (file-writable-p buffer-file-name))
    (set (make-local-variable 'flymake-allowed-file-name-masks)
         '(("\\.html\\|\\.ctp\\|\\.ftl\\|\\.jsp\\|\\.php\\|\\.erb\\|\\.rhtml\\|\\.vue" flymake-html-init))
    (set (make-local-variable 'flymake-err-line-patterns)
         ;; only validate missing html tags
         '(("line \\([0-9]+\\) column \\([0-9]+\\) - \\(Warning\\|Error\\): \\(missing <\/[a-z0-9A-Z]+>.*\\|discarding unexpected.*\\)" nil 1 2 4))
    (flymake-mode t)))

(add-hook 'web-mode-hook 'flymake-html-load)
(add-hook 'html-mode-hook 'flymake-html-load)
(add-hook 'nxml-mode-hook 'flymake-html-load)
(add-hook 'php-mode-hook 'flymake-html-load)

The trick is tidy will output some extra errors/warnings on modern HTML5 files. We use Elisp to ignore them.

I know there is tidy-html5 but I'm too lazy to compile and install it.


enter image description here

UPDATE: I tested https://github.com/TobiasZawada/html-check-frag which also works fine. There is only one difference. When you insert an open html tag without ending tag, my solution will highlight the open tag on the spot. For some reason, html-check-frag will highlight the last ending tag in the whole file. Maybe this is a bug of html-check-frag?

flymake: enter image description here

html-check-frag: enter image description here

  • Awesome! Thanks for all your effort answering my question. This is the answer I am looking for. – Yves Gonzaga Mar 7 '18 at 12:35

web-mode maintainer here. I've pushed a fix to use web-mode-html-tag-unclosed-face instead of web-mode-html-tag-face as long as the tag remains unclosed. This face can be customised (e.g. adding a red background to it)

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.