vim-fidget
vim-fidget copied to clipboard
mohitleo9
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.
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:
- Copy the files to your
.vimdirectory - then run
npm installin the repo
- Copy the files to your
-
Pathogen
-
cd ~/.vim/bundle && git clone git://github.com/mohitleo9/vim-fidget.git && npm install
-
-
Vundle
- Add
Bundle 'mohitleo9/vim-fidget'to .vimrc - Run
:BundleInstall - Then
go to the bundle/vim-fidget && run npm install
- Add
-
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.htmlfile as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vim Fidget</title>
<script src="socket.io.js"></script>
<script src="socket_client.js"></script>
<script src="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="main.css" type="text/css" media="all" />
<script src="modernizr.dev.2.8.3.js"></script>
</head>
<body>
<div class="thing">
</div>
<script src="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