vim-fidget - JsFiddle for Vim

What??

This is a plugin (with a very creative name!) that emulates JsFiddle in vim and lets you post it to actual jsfiddle.com so that it can be shared. SCREENCAST

Why??

I am a web developer and the whole concept of trying out small chunks of programs makes JsFiddle really cool BUT...

WHERE IS MY VIM....? this plugin answers that (it also does live update say whatt)

Installation

Manual installation:
1. Copy the files to your .vim directory
2. then run npm install in the repo
Pathogen
- cd ~/.vim/bundle && git clone git://github.com/mohitleo9/vim-fidget.git && npm install
Vundle
1. Add Bundle 'mohitleo9/vim-fidget' to .vimrc
2. Run :BundleInstall
3. Then go to the bundle/vim-fidget && run npm install

NeoBundle

Add

NeoBundle 'mohitleo9/vim-fidget',{
    \ 'build' : {
    \    'unix' : 'npm install',
    \    'mac' : 'npm install',
    \ },
\}

to .vimrc

Run :NeoBundleInstall

How to use ??

It adds two commands

VimFidget : create a fidget and open a browser window for live preview

VimFidgetBrowse : upload the fidget to jsfiddle Also the server dies when you quit index.html buffer

Amending the default templates

You can change the template files in bundle/vim-fidget/template to include stuff that you frequently use. For example, if you work locally and would like a base Fidget that includes jQuery, Modernizr and a meta tag for correct display of HTML on mobile devices you could:

download jQuery and Modernizr to your template folder
amend the index.html file as follows:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vim Fidget</title>
        <script src="https://github.com/mohitleo9/vim-fidget/raw/master/socket.io.js"></script>
        <script src="https://github.com/mohitleo9/vim-fidget/raw/master/socket_client.js"></script>
        <script src="https://github.com/mohitleo9/vim-fidget/raw/master/jquery-2.1.1.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <link rel="stylesheet" href="https://github.com/mohitleo9/vim-fidget/blob/master/main.css" type="text/css" media="all" />
        <script src="https://github.com/mohitleo9/vim-fidget/raw/master/modernizr.dev.2.8.3.js"></script>
    </head>
    <body>
        <div class="thing">

        </div>
        <script src="https://github.com/mohitleo9/vim-fidget/raw/master/main.js"></script>
    </body>
</html>

You can also alter the default CSS (main.css) and JS (main.js) in the same manner.

Credits:

I took a lot of ideas from (and some code!) vim-fiddle
Also for using nodeJs and other stuff I looked(and took some code) at suan/vim-instant-markdown

mohitleo9 / vim-fidget

readme