Detect missing > html emacs web-mode

Question

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.

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.

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.

Answer 1

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
                          'flymake-create-temp-inplace))
              (local-file (file-relative-name
                           temp-file
                           (file-name-directory buffer-file-name))))
         (list "tidy" (list local-file))))

(defun flymake-html-load ()
  (interactive)
  (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.

Screenshot:

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:

html-check-frag:

Answer 2

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)