A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).

IDE: Difference between revisions

From WHATWG Wiki
Jump to navigation Jump to search
No edit summary
(update for pathogen)
Line 1: Line 1:
= vim =
= vim =


<video controls src="http://static.natalian.org/2010-10-24/html5-vim.ogv">
vim natively ships with CSS, Javascript & HTML syntax highlighting provided the feature is switched on.


=== HTML5 text/html syntax ===
vim also has completion features documented at http://vimdoc.sourceforge.net/htmldoc/insert.html#ft-css-omni


https://vim.svn.sourceforge.net/svnroot/vim/vim7/runtime/autoload/xml/ and ''':help xml-omni-datafile''' might help you get started.
== Install ==


Ideally some sort of tool to convert http://syntax.whattf.org/relaxng/ into a '''xml-omni-datafile''' is required. Updating https://vim.svn.sourceforge.net/svnroot/vim/vim7/runtime/autoload/xml/html40s.vim looks a bit too painful.
After installing [https://github.com/tpope/vim-pathogen Pathogen] to easily manipulate vim's runtimepath.


=== Lint ===
    cd ~/.vim/bundle; git clone https://github.com/kaihendry/vim-html5


See the [http://blog.whatwg.org/vim-checker HTML5 conformance checking in Vim blog entry] for an introduction.
== Usage ==


Idea is to integrate Web services via [http://en.wikipedia.org/wiki/CURL curl] with your editor that supports [[Validator.nu_GNU_Output]], e.g. [http://en.wikipedia.org/wiki/Vim_editor vim]:
* Using `:make` whilst editing HTML will upload your HTML buffer to http://validator.nu
 
* Using `:make` whilst editing Javascript will upload your Javascript buffer to http://jslint.dabase.com
* HTML validation with [http://validator.nu/ validator.nu] script
* JavaScript validation with [http://www.jslint.com/ JSlint] script - [http://git.webvm.net/?p=jslint service source]
* CSS validation is [http://lists.w3.org/Archives/Public/www-validator-css/2008Jul/thread.html being worked on]


=== [http://jsbeautifier.org/ Javascript unpacker and beautifier] ===
=== [http://jsbeautifier.org/ Javascript unpacker and beautifier] ===


Drop it into ~/.vim/ftplugin/jsbeautify.vim from http://www.vim.org/scripts/script.php?script_id=2727 and simply `source ~/.vim/ftplugin/jsbeautify.vim` from http://svn.natalian.org/projects/html5/javascript.vim
Drop it into ~/.vim/ftplugin/javascript/jsbeautify.vim from http://www.vim.org/scripts/script.php?script_id=2727  
 
To run the beautifier, typically it's the keystrokes [\]+[f]+[f].
 
=== Installation instructions ===


http://svn.natalian.org/projects/html5/INSTALL
To run the beautifier, employ the keystrokes [\]+[f]+[f].


Any suggestions? Please get in contact with [http://hendry.iki.fi/ Kai Hendry]


Caveats:
* Vim's errorformat has issues parsing anything too complex, so best edit the stream for the errorformat (not the other way around)
* Vim's quickfix list (:cope) seems to require a filename (%f) in the error format


= Emacs =
= Emacs =

Revision as of 16:15, 20 November 2011

vim

vim natively ships with CSS, Javascript & HTML syntax highlighting provided the feature is switched on.

vim also has completion features documented at http://vimdoc.sourceforge.net/htmldoc/insert.html#ft-css-omni

Install

After installing Pathogen to easily manipulate vim's runtimepath. 

    cd ~/.vim/bundle; git clone https://github.com/kaihendry/vim-html5

Usage

Javascript unpacker and beautifier

Drop it into ~/.vim/ftplugin/javascript/jsbeautify.vim from http://www.vim.org/scripts/script.php?script_id=2727

To run the beautifier, employ the keystrokes [\]+[f]+[f].


Emacs

XHTML5 or polyglot documents

Emacs ships with nxml-mode, a major mode for editing XML which does on-the-fly validation with RELAX NG schema. You can plug fantasai and hsivonen's schema into nxml-mode. The necessary shim code is included in the hober/html5-el project on github.

Retrieved from "https://wiki.whatwg.org/index.php?title=IDE&oldid=7726"