Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bernalrs/webnvim
Web NeoVim port based on WebVim
https://github.com/bernalrs/webnvim
neovim plugin syntax-highlighting vim web
Last synced: 15 days ago
JSON representation
Web NeoVim port based on WebVim
- Host: GitHub
- URL: https://github.com/bernalrs/webnvim
- Owner: bernalrs
- License: gpl-3.0
- Created: 2017-01-30T21:48:18.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-26T21:58:43.000Z (almost 8 years ago)
- Last Synced: 2024-11-07T12:57:24.193Z (about 2 months ago)
- Topics: neovim, plugin, syntax-highlighting, vim, web
- Language: Vim script
- Homepage:
- Size: 97.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
===============================
------------------------------------------------------
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/bernalrs/webnvim.git ~/.config/nvim
nvim
## 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 ``
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](http://fprintf.net/vimCheatSheet.html) 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 | `e` | n | |
| Reload .vimrc | `s` | n | |
| |
| __File Tree (NERDTree)__ |
| Toggle Tree | `` | 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 | `` | n | |
| Move to right tab | `` | n | |
| Change window (ie. tree to tab) | `` | | |
| Help | `?` | | Tree |
| Documentation | `:help NERDTree` | | |
| |
| __Comment__ |
| Toggle comments | `` | nv | |
| Comments | `cc` | nv | |
| Sexy Comments | `cs` | nv | |
| UnComments | `cu` | nv | |
| Yank and Comments | `cy` | nv | |
| Documentation | `:help NERDCommenter` | | |
| |
| __Align__ |
| Start interactive alignment | `EasyAlign` | v | selection |
| Align next paragraph on = | `a=` | n | |
| Align next paragraph on : | `a:` | n | |
| Align next paragraph on delimiter _x_ | `ax` | n | |
| Right align selection on = | `a=` | v | |
| Right align selection on : | `a:` | v | |
| Right align selection on _x_ | `ax` | v | |
| Documentation | `:help :EasyAlign` | | |
| |
| __Format__ |
| Format the file | `` | n | js,json,html,css |
| Format the selection | `` | n | js,json,html,css |
| |
| __Multiple Cursor__ |
| Start multiple cursor | `` | v | Visual Bloc |
| Multiple cursor insert | `i` | | multiple cursor |
| Multiple cursor remove | `x` | | multiple cursor |
| Leave multiple cursor | `` | | multiple cursor |
| |
| __Paste__ |
| cycle backward through your history of yanks | `p` | nv | after paste `p` |
| cycle forward through your history of yanks | `P` | nv | after paste `p` |
| |
| __AutoCompletion__ |
| Select next proposal in menu | `` | i | complete menu |
| Select previous proposal in menu | `` | 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 | `` | n | |
| |
| __Editing__ |
| Move line up | `-` | nv | |
| Move line down | `_` | 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
- `a` or `a` a keyboard command
- `` means `CTRL and `/` (this is the Vim notation)
- `` means `Shift` and `left arrow`
- `b` means `CTRL` and `a`, then `b`
- `` is mapped to `,`
- `` 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](https://github.com/goatslacker/mango.vim) A nice color scheme
- [VimAirline](https://github.com/bling/vim-airline) Lean and mean statusbars
### Manage your project
- [NERDTree](https://github.com/scrooloose/nerdtree) Manage your project files
- [VimFugitive](https://github.com/tpope/vim-fugitive) Git integration
- [VimGitGutter](https://github.com/airblade/vim-gitgutter) Git diff in the gutter
- [EditorconfigVim](https://github.com/editorconfig/editorconfig-vim) Shared coding conventions
### Code writing
- [NERDCommenter](https://github.com/scrooloose/nerdcommenter) Comments made easy
- [VimTrailingWhitespace](https://github.com/bronson/vim-trailing-whitespace) Highlight trailing spaces
- [Syntastic](https://github.com/scrooloose/syntastic) Syntax check and validation
- [VimEasyAlign](https://github.com/junegunn/vim-easy-align) Realign pieces of code
- [VimMultipleCursors](https://github.com/terryma/vim-multiple-cursors) Write on multiple lines easily
- [VimJsBeautify](https://github.com/maksimr/vim-jsbeautify) Reformat JavaScript, HTML and JSON files
- [VimYankStack](https://github.com/maxbrunsfeld/vim-yankstack) Iterate over yanked stack on paste
- [VimSurround](https://github.com/tpope/vim-surround) Quoting and parenthesizing
- [YouCompleteMe](https://github.com/Valloric/YouCompleteMe) Autocompletion engine
- [VimForTern](https://github.com/marijnh/tern_for_vim) Smart JavaScript autocompletion
- [VimNode](https://github.com/moll/vim-node) Navigate through node.js code/modules
- [VimLint](https://github.com/syngan/vim-vimlint) Linter used by syntastic for VimL
- [VimLParser](https://github.com/ynkdir/vim-vimlparser) VimL parser (required by VimLint)
### Code reading
- [VimJson](https://github.com/elzr/vim-json) JSON highlighting and quote concealing
- [YaJS](https://github.com/othree/yajs.vim) JavaScript syntax (ES5 and ES6)
- [JavaScriptLibrariesSyntax](https://github.com/othree/javascript-libraries-syntax.vim) Syntax highlighting for well-known JS libraries
- [VimCSS3](https://github.com/hail2u/vim-css3-syntax) CSS3 syntax
- [ScssSyntax](https://github.com/cakebaker/scss-syntax.vim) SCSS syntax
- [HTML5](https://github.com/othree/html5.vim) 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](https://github.com/krampstudio/webvim/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](https://gratipay.com/~krampstudio/)
## License
The content of this repository is licensed under the [GPLv3](http://www.gnu.org/licenses/gpl-3.0.txt)