WebVim is a Vim based distribution targeting JavaScript and Web development.

It targets :

• JavaScript development (ES5, ES6, node.js)
• HTML5
• CSS3 and SCSS

And contains the features you expect from a modern code editor :

• syntax highlighting
• syntax and error checking
• autocompletion
• multi cursor
• git support
• code format
• support coding conventions (editorconfig)
• hardcore mode (for real Vim users)
• jsdoc generation (coming soon)
• debugging (coming soon)
• grunt/gulp support (coming soon)
• all the awesomeness from Vim

Install

Only tested on linux (Ubuntu and Debian)

Dependencies

1. A modern version of Vim

   apt-get install vim vim-runtime vim-gui-common

or compile a recent version with xterm_clipboard and ruby or python support.

2. Some tools to compile YouCompleteMe

   apt-get install build-essential cmake python-dev exuberant-ctags libclang-3.4-dev

3. Node.js and npm

   curl -sL https://deb.nodesource.com/setup_0.12 | bash - apt-get install -y nodejs

4. Some npm packages

   npm install -g eslint csslint jshint jsonlint handlebars

Install it:

git clone https://github.com/krampstudio/webvim.git ~/.vim
ln -s ~/.vim/.vimrc ~/.vimrc
vim

Hardcore mode

The hardcore mode remap some keys to force you use Vim in a productive way:

• no arrow keys for moving instead use the common Vim movement commands.
• in insert mode, use jk to switch back to normal mode instead of <esc>

Restricting commands is the best way to make your fingers learn. After one or two days, you should be more productive and have learned lots of Vim commands.

You can disable the hardcore mode by setting the value of g:hardcoreMode to 0 in .vimrc. You can also change the mappings.

Usage

Vim

WebVim is only a Vim distribution with plugins and configuration, so all common Vim commands and basic mapping are available. You must know how to use Vim before using this IDE. If you're not comfortable with Vim enough I suggest you to take the interactive Vim tutorial (run vimtutor in a terminal), and keep a common usage cheat sheet close to you until your fingers get all the mappings in memory.

WebVim

	Command	Mode	Context
Plugins
Install Plugins	:PlugInstall	n
Update Plugins	:PlugUpdate	n
Config
Edit .vimrc	<leader>e	n
Reload .vimrc	<leader>s	n
File Tree (NERDTree)
Toggle Tree	<c-n>	n
Open a node in a new tab	t		Tree Node
Change Root	C		Tree Node
Tree menu	m		Tree Node
Add a file	a		Tree Menu
Delete a file	d		Tree Menu
Move a file	m		Tree Menu
Copy a file	c		Tree Menu
Move to left tab	<s-left>	n
Move to right tab	<s-right>	n
Change window (ie. tree to tab)	<c-w><c-w>
Help	?		Tree
Documentation	:help NERDTree
Comment
Toggle comments	<c-/>	nv
Comments	<leader>cc	nv
Sexy Comments	<leader>cs	nv
UnComments	<leader>cu	nv
Yank and Comments	<leader>cy	nv
Documentation	:help NERDCommenter
Align
Start interactive alignment	EasyAlign	v	selection
Align next paragraph on =	<leader>a=	n
Align next paragraph on :	<leader>a:	n
Align next paragraph on delimiter x	<leader>ax	n
Right align selection on =	<leader>a=	v
Right align selection on :	<leader>a:	v
Right align selection on x	<leader>ax	v
Documentation	:help :EasyAlign
Format
Format the file	<c-f>	n	js,json,html,css
Format the selection	<c-f>	n	js,json,html,css
Multiple Cursor
Start multiple cursor	<c-m>	v	Visual Bloc
Multiple cursor insert	i		multiple cursor
Multiple cursor remove	x		multiple cursor
Leave multiple cursor	<esc>		multiple cursor
Paste
cycle backward through your history of yanks	<leader>p	nv	after paste p
cycle forward through your history of yanks	<leader>P	nv	after paste p
AutoCompletion
Select next proposal in menu	<tab>	i	complete menu
Select previous proposal in menu	<shift><tab>	i	complete menu
Syntax checking
Checkers infos	:SyntasticInfo	n
Check	:SyntasticCheck	n
Toggle check	:SyntasticToggleMode	n
Error window	:Errors	n
Jump next error	:lnext	n
Jump previous error	:lprev	n
JavaScript
Jump to the definition	:TernDef	n	under cursor
Look up the documentation	:TernDoc	n	under cursor
Find the type	:TernType	n	under cursor
Show all references to the variable or prop	:TernRefs	n	under cursor
Rename the variable	:TernRename	n	under cursor
jump to the source of a require	gf	n	node.js, cursor
Edit the main file of a CJS module	:Nedit module	n	node.js
Edit a file of a CJS module	:Nedit module/foo.js	n	node.js
Edit projects main (from package.json)	:Nedit	n	node.js
Git
git diff	:Gdiff	n
git status	:Gstatus	n
git commit	:Gcommit	n
git blame	:Gblame	n
git mv	:Gmove	n
git rm	:Gremove	n
Open the current file in Github	:Gbrowse	n
Spell Check
Enable checking	set spell	n
move to the next misspelled word	]s	n
move to the previous misspelled word	[s	n
add a word to the dictionary	zg	n
undo the addition of a word to the dictionary	zug	n
view spelling suggestions for a misspelled word	z=	n
Search
clear highlights	<c-l>	n
Editing
Move line up	<leader>-	nv
Move line down	<leader>_	nv
Next sections to come soon

Modes :

• n normal
• i insert
• v visual

Commands :

• :command a Vim command
• :set somthing can also be replaced by :setlocal something to apply it to the current buffer only
• <c-m>a or a a keyboard command
  • <c-/> means CTRL and /` (this is the Vim notation)
  • <s-left> means Shift and left arrow
  • <c-a>b means CTRL and a, then b
  • <leader> is mapped to ,
  • <localleader> is mapped to \

Plugins

WebVim is only a distribution that contains plugins. The plugin authors have made the hard work. Plugin authors, you rocks!

User interface

• Mango A nice color scheme
• VimAirline Lean and mean statusbars

Manage your project

• NERDTree Manage your project files
• VimFugitive Git integration
• VimGitGutter Git diff in the gutter
• EditorconfigVim Shared coding conventions

Code writing

• NERDCommenter Comments made easy
• VimTrailingWhitespace Highlight trailing spaces
• Syntastic Syntax check and validation
• VimEasyAlign Realign pieces of code
• VimMultipleCursors Write on multiple lines easily
• VimJsBeautify Reformat JavaScript, HTML and JSON files
• VimYankStack Iterate over yanked stack on paste
• VimSurround Quoting and parenthesizing
• YouCompleteMe Autocompletion engine
• VimForTern Smart JavaScript autocompletion
• VimNode Navigate through node.js code/modules
• VimLint Linter used by syntastic for VimL
• VimLParser VimL parser (required by VimLint)

Code reading

• VimJson JSON highlighting and quote concealing
• YaJS JavaScript syntax (ES5 and ES6)
• JavaScriptLibrariesSyntax Syntax highlighting for well-known JS libraries
• VimCSS3 CSS3 syntax
• ScssSyntax SCSS syntax
• HTML5 HTML5 syntax

History

• 1.1.0 Add user config, autocmd file, fix easyalign mapping, update Nerdtree config, better mouse support in in sert mode
• 1.0.0 Becomes webvim with an install process, a better configuration system, better plugins neighborhood
• 0.1.0 A basic dotvim repository with my own Vim configuration

Contributing

Every contribution is more than welcomed. You can:

• report issues
• Fix, improve the configuration, add new features. The best is to fork and submit a pull request
• Test and adapt to other OS
• Fix my English mistakes
• Update the documentation
• Create a better logo
• Offer me a coffee

License

The content of this repository is licensed under the GPLv3