Using flymake in emacs to validate html as you type

February 23, 2009 at 11:46 pm 3 comments

Flymake is a general emacs plugin which allows you to run an external validator against a buffer’s content and visually report errors. The effects are quite similar to the red underlining you will see in some IDEs (e.g visual studio) – but can, with some work, be used for any file format with a validator. The following settings let flymake validate html in emacs.

Motivation

  • Seeing mistakes earlier can make them easier to correct
  • Valid html makes future browsers less likely to mangle your page
  • Remembering to run a validator takes effort

Setup

  • Install html tidy (this is available under cygwin on windows, and using apt under most linuxes)
  • Create this perl script[1]; make it executable and place it on your path. Call it flymakehtml.
    #!/usr/bin/perl
    open(INPUT, "rxp $ARGV[0] 2>&1|");
    while (<INPUT>){
        /^Error/ && chomp;
        print;
    }
  • Add the following code to your .emacs file:
  • (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))))
    
    
    (add-to-list 'flymake-allowed-file-name-masks 
    	     '("\\.html\\'" flymake-html-init)) 
    
    (add-to-list 'flymake-err-line-patterns 
    	     '("line \\([0-9]+\\) column \\([0-9]+\\) - \\(Warning\\|Error\\): \\(.*\\)"
    	      nil 1 2 4))
    
  • Ensure that you have the following command somewhere in your .emacs file
     (add-hook 'find-file-hook 'flymake-find-file-hook)

You might like to change the face used to show errors with M-x customize-face flymake-errline. Hovering over an error will show you a description of the error

[1] This is to trim the tidied document from the output and only leave error messages.

Caveats
Sometimes error messages will use slightly strange tenses – since html tidy is a tool to tidy html rather than validate it – but the meaning is usually clear enough.

You might be interested in the nxhtml plugin as an alternative: this has more features such as context dependent autocompletion. Beware that this can take some setting up, and is a little overwhelming at times.

Advertisements

Entry filed under: Uncategorized.

Using flymake in emacs to validate xml as you type Flash broken by upgrade to ubuntu intrepid

3 Comments Add your own

  • 1. James  |  April 30, 2009 at 5:31 pm

    Eugh – that’s a fine illustration of why I hate Perl. It obfuscates the simplest tasks

    Why on earth do you need a script, doesn’t this do the job?:

    rxp 2>&1 | grep “^Error”

    Reply
    • 2. existentiality  |  April 30, 2009 at 6:16 pm

      Hmm… there was a good reason at the time.

      I seem to remember that flymake doesn’t use a shell execute so you can’t use pipes (and have an angry comment in my .emacs file to this effect).

      The perl script does a little more than this. It prints all lines removing the trailing new-lines from those lines which begin with error. This is because html tidy prints output like this

      Error: details of error...
          more details or error..
      

      To make flymake pay attention to both lines rather than juts the first we concatenate these lines together. I remember this being slightly difficult to do with a bash one liner.

      I suspect I started off doing this in perl because I knew that perl can easily pipe input from a program whereas you have to do a few more imports in python to get this working.

      P.S There appears to have been a typo in the perl program. (not very helpful). This should now be fixed.

      Reply
  • 3. sunilwilliams  |  July 15, 2011 at 4:57 am

    This is brilliant. I was able to set it up and get it working in no time, and it works.

    Only thing is, that my html5 elements get flagged:
    ” is not recognized!”

    I don’t know tidy very well, and I’ve never really used it. I’m guessing that it either is outdated, or needs flags to recognize html5.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


February 2009
M T W T F S S
« Sep   Mar »
 1
2345678
9101112131415
16171819202122
232425262728  

%d bloggers like this: