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)
- Emmet support
- jsdoc generation (coming soon)
- debugging (coming soon)
- grunt/gulp support (coming soon)
- all the awesomeness from Vim
The WebVim idea is to provide you a vim distribution: something that comes prepackaged, preconfigured, built on a kernel to serve a goal. WebVim is to vim what Debian is to Linux, a vim distribution for the web.
Only tested on Linux
On a Ubuntu (from 15.04)
- 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.
- Some tools to compile YouCompleteMe
apt-get install build-essential cmake python-dev exuberant-ctags libclang-3.4-dev
- Node.js and npm
curl -sL https://deb.nodesource.com/setup_0.12 | bash -
apt-get install -y nodejs
- Some npm packages
npm install -g eslint csslint jshint jsonlint handlebars
Please report me what you did to make it work on your OS
sudo dnf install cmake python-devel npm vim
npm install -g npm eslint csslint jshint jsonlint handlebars
git clone https://github.com/krampstudio/webvim.git ~/.vim
ln -s ~/.vim/.vimrc ~/.vimrc
vim
The plugins install can take some times, especially since there's a compilation made by YouCompleteMe. If you've the feeling the install has frozen, you can finish the install after by entering the command :PlugInstall
.
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.
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.
Command | Mode | Context | |
---|---|---|---|
Plugins | |||
Install Plugins | :PlugInstall |
n | |
Update Plugins | :PlugUpdate |
n | |
Config | |||
Edit .vimrc | <leader>ev |
n | |
Reload .vimrc | <leader>sv |
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 | |
Search in files (grep) | g |
Tree Menu | |
Next match in grep | :cn |
Grep > Quickfix | |
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 Block |
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 | |||
Get type | <leader>gt |
n | under cursor |
Get documentation | <leader>gd |
n | under cursor |
Go to | <leader>go |
n | under cursor |
Jump to definition | <leader>gf |
n | under cursor |
Go to references | <leader>gr |
n | under cursor |
Rename | <leader>r |
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 | |
Wrap in single quote | <leader>' |
nv | |
Wrap in double quote | <leader>" |
nv | |
Emmet | |||
Expand abbreviation | kj |
i | |
Next sections to come soon | |||
Modes :
n
normali
insertv
visual
Commands :
:command
a Vim command:set something
can also be replaced by:setlocal something
to apply it to the current buffer only<c-m>a
ora
a keyboard command<c-/>
meansCTRL and
/` (this is the Vim notation)<s-left>
meansShift
andleft arrow
<c-a>b
meansCTRL
anda
, thenb
<leader>
is mapped to,
<localleader>
is mapped to\
WebVim is only a distribution that contains plugins. The plugin authors have made the hard work.
Plugin authors rocks!
- vim-plug Minimalist Vim Plugin Manager
- Mango A nice color scheme
- VimAirline Lean and mean statusbars
- NERDTree Manage your project files
- VimFugitive Git integration
- VimGitGutter Git diff in the gutter
- EditorconfigVim Shared coding conventions
- 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
- VimNode Navigate through node.js code/modules
- VimLint Linter used by syntastic for VimL
- VimLParser VimL parser (required by VimLint)
- Emmet-vim Expanding abbreviations similar to emmet
- 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
- 1.2.0 Fix #28, support new esint config files, update installe
- 1.1.0 Add user config, autocmd file, fix easyalign mapping, update Nerdtree config, better mouse support in insert 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
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
The content of this repository is licensed under the GPLv3