Using multiple flycheck syntax checkers in web-mode

Question

I'm trying to configure Flycheck to use both csslint and tidy checkers in web-mode without any success. This post suggests using this code for tidy:

(eval-after-load 'flycheck
  '(flycheck-add-mode 'html-tidy 'web-mode))

But adding an extra line like

'(flycheck-add-mode 'css-csslint 'web-mode)

is not possible which I think is due to eval-after-load. Any suggestions?

Or is it at all possible for web-mode to change Flycheck language say by using web-mode-cur-language and web-mode-language-at-pos?

Answer 1

eval-after-load takes a single form, hence:

(eval-after-load 'flycheck
  '(progn
     (flycheck-add-mode 'html-tidy 'web-mode)
     (flycheck-add-mode 'css-csslint 'web-mode)))

If you're using Emacs 24.4 or newer, with-eval-after-load is preferable, which neatly avoids this particular source of confusion:

(with-eval-after-load 'flycheck
  (flycheck-add-mode 'html-tidy 'web-mode)
  (flycheck-add-mode 'css-csslint 'web-mode))

---

However, while this arranges for both HTML-Tidy and CSS Lint to be available in Web Mode, the result is probably not what you'd like to have. You'll see an overwhelming amount of false errors, because neither HTML Tidy nor CSS Lint can deal with mixed-language files. CSS Lint specifically expects plain CSS, and will choke badly if applied to a HTML buffer, to the point that the result is likely entirely unusable.

Likewise, HTML Tidy will choke on any template language elements in the buffer, and frequently so bad that the result is unusable as well. In fact, Flycheck used to run HTML Tidy in Web Mode in the past, and I explicitly removed this feature because the results were generally very poor.

Presumably, you hope that you can somehow apply CSS Lint only to the CSS parts and HTML Tidy only to the HTML parts, but Flycheck does not support that, and quite likely never will. It'd be a major effort to write and test such a feature, and it'd be very hard to get it right.