Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/victorvoid/vim-frontend
:star: Vim Frontend is a Vim configured for Front-end Developers.
https://github.com/victorvoid/vim-frontend
learning-vim vim vim-frontend
Last synced: about 2 months ago
JSON representation
:star: Vim Frontend is a Vim configured for Front-end Developers.
- Host: GitHub
- URL: https://github.com/victorvoid/vim-frontend
- Owner: victorvoid
- License: mit
- Archived: true
- Created: 2016-07-21T01:54:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-07-26T20:55:50.000Z (over 6 years ago)
- Last Synced: 2024-08-03T11:09:41.610Z (5 months ago)
- Topics: learning-vim, vim, vim-frontend
- Language: Vim script
- Homepage:
- Size: 42 KB
- Stars: 284
- Watchers: 10
- Forks: 26
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Vim Frontend: a Vim configured for Front-end Developers.
===========================================================
- [Introduction](#introduction)
- [Installation](#installation)
- [Mac OS X](#mac-os-x)
- [Linux x64](#linux-x64)
- [Features Summary](#features-summary)
- [User Guide](#user-guide)
- [General Commands](#general-commands)
- [Learning Vim](#learning-vim)
- [Super Fast Navigation](#super-fast-navigation)
- [HTML Commands](#html-commands)
- [JavaScript Commands](#javascript-commands)
- [JavaScript ES6 React](#javascript-es6-react)
- [AngularJS 1 e 2](#angularjs-1-e-2)
- [TypeScript](#typescript)
- [CSS Commands](#javascript-commands)
Introduction
------------
Is you a Front-end Developer ? Are you using Sublime Text, Atom, Brackets, Visual Studio Code or anything ?
> "Give me a chance. Don't worry, I'm easy :smile: " - Vim
[Quick demo videos](https://asciinema.org/~victorvoid)
Installation
------------
### If you are using Unix/Linux or Mac OS X.
```
$ curl https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.sh > installer.sh
$ sh ./installer.sh {specify the installation directory}
```
### Mac OS X
*Pre-requisite*:
```
$ brew install git ctags
```
**Just replace your .vimrc :shipit:**
```bash
git clone https://github.com/VictorVoid/vim-frontend.git
mv vim-frontend/.vimrc ~/ && mv vim-frontend/autoload/ ~/.vim && mv vim-frontend/ultisnips/ ~/.vim
```
or
```bash
- Download ZIP
cd /Users/yourusername/Download
- Open terminal
unzip vim-frontend-master.zip
mv vim-frontend/.vimrc ~/ && mv vim-frontend/autoload/ ~/.vim && mv vim-frontend/ultisnips/ ~/.vim
```
*YouCompleteMe Plugin INFO:* :ear:
**Remember:** YCM is a plugin with a compiled component. If you **update** YCM
using Vundle and the ycm_core library APIs have changed (happens
rarely), YCM will notify you to recompile it. You should then rerun the install
process.
Don't worry, it's easy :smile: Let's go.
Install [Homebrew](http://brew.sh/)
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Install cmake via Homebrew
brew install cmake
Compiling YCM **with** semantic support for C-family languages:
cd ~/.cache/dein/repos/github.com/Valloric/YouCompleteMe
./install.py --clang-completer
[More info](https://github.com/Valloric/YouCompleteMe)
### Linux x64
*Pre-requisite*:
* Ubuntu\Debian
```
$ sudo apt-get install git exuberant-ctags ncurses-term python-jinja2
```
* Gentoo
```
$ sudo emerge dev-util/ctags sys-libs/ncurses dev-vcs/git dev-python/pyflakes dev-python/jinja
```
* Arch Linux via *pacman* (recomend used *pacaur*)
```
$ sudo pacman -S git-core ctags ncurses python-jinja
```
* Fedora
```
$ sudo dnf install ncurses-devel git ctags-etags
```
**Just replace your .vimrc :shipit:**
git clone https://github.com/VictorVoid/vim-frontend.git
mv vim-frontend/.vimrc ~/ && mv vim-frontend/autoload/ ~/.vim && mv vim-frontend/ultisnips/ ~/.vim
or
- Download ZIP
cd /Users/yourusername/Download
- Open terminal
sudo apt-get install unzip
unzip file.zip -d
mv vim-frontend/.vimrc ~/ && mv vim-frontend/autoload/ ~/.vim && mv vim-frontend/ultisnips/ ~/.vim
*YouCompleteMe Plugin INFO:* :ear:
**Remember:** YCM is a plugin with a compiled component. If you **update** YCM
using Vundle and the ycm_core library APIs have changed (happens
rarely), YCM will notify you to recompile it. You should then rerun the install
process.
Ubuntu\Debian:
Install development tools and CMake: `sudo apt-get install build-essential cmake`
Make sure you have Python headers installed: `sudo apt-get install python-dev
python3-dev`.
Compiling YCM **with** semantic support for C-family languages:
cd ~/.cache/dein/repos/github.com/Valloric/YouCompleteMe
./install.py --clang-completer
[Other distribution](https://github.com/Valloric/YouCompleteMe/blob/master/doc/youcompleteme.txt#L327)
[More info](https://github.com/Valloric/YouCompleteMe)
Features Summary
-----
- Automatic syntax and codestyle checks.
- JavaScript autocomplete ([ternjs](http://ternjs.net/))
- HTML with auto close tag
- Integration with Git
- Emmet
- Snippets
- TagBar (overview of its structure)
- Vim Session (restore your Vim editing sessions)
- Surround (provides mappings to easily delete, change and add such surroundings in pairs)
- Integration with CSS Pre-processors (SASS, LESS and Stylus)
- Color preview (css/less/sass/stylus/html)
- Beautify (HTML, CSS, JS)
User Guide
------------
### General Commands
## Git
Commands | Descriptions
--- | ---
`ga` | Execute *git add* on current file
`gc` | git commit (splits window to write commit message)
`gsh`| git push
`gll`| git pull
`gs` | git status
`gb` | git blame
`gd` | git diff
`gr` | git remove
## Find buffers and file
Commands | Descriptions
--- | ---
`s` | Find and open files
`b` | Find file on buffer (open file)
`c` | Close active buffer (clone file)
## Navigations
Commands | Descriptions
--- | ---
`.` | Set path working directory
`:cd ` | Open path */path*
`+w+w` | Alternative navigate vim split panels
`w or x` | Next buffer navigate
`q or z` | previous buffer navigate
`SHIFT+n` | Create a tab
`SHIFT+TAB` | previous tab navigate
`TAB` | next tab navigate
`+` | Navigate via split panels
`F2` | Open tree navigate in actual opened file
`F3` | Open/Close tree navigate files
`F4` | List all class and method, support for python, go, lua, ruby and php
`+0` | Focus on tree navigate files
## Sessions
Commands | Descriptions
--- | ---
`so` | Open Session
`ss` | Save Session
`sd` | Delete Session
`sc` | Close Session
## Code
Commands | Descriptions
--- | ---
`>` | indent to right
`<` | indent to left
`gc` | Comment or uncomment lines that {motion} moves over
`YY` | Copy to clipboard
`p` | Paste
`` | UltiSnips Expand Trigger
`,` | Activate Emmet plugin
## Splits
Commands | Descriptions
--- | ---
`v` | Split vertical
`h` | Split horizontal
Learning Vim
------------
You can learn basic vim here:
* [The 11 Steps to Learning Vim](https://github.com/damassi/learn-vim)
* [The 30 Basic Vim Commands You'll Use Every Day](https://spin.atomicobject.com/2016/04/19/vim-commands-cheat-sheet/)
* [Vimbook (in portuguese)](https://cassiobotaro.gitbooks.io/vimbook/content/)
* [Vim para noobs (in portuguese)](https://woliveiras.com.br/vimparanoobs/)
* [VIM Editor Commands ](http://www.radford.edu/~mhtay/CPSC120/VIM_Editor_Commands.htm)
### Super Fast Navigation
Commands | Descriptions
--- | ---
`e` | Move to the end of a word
`w` | :arrow_right: Move forward to the beginning of a word ->
`W` | :arrow_right: Move forward a WORD (any non-whitespace characters)
`b` | :arrow_left: Move backward to the beginning of a word
`(` | :arrow_down: Jump backward one sentence
`)` | :arrow_up: Jump forward one sentence.
`3w, 3b` | :left_right_arrow: Move forward three words, Move backward three words
`$` | Move to the end of the line
`0"` | Move to the beginning of the line
`H` | Jump to the top of the screen
`M` | Jump to the middle of the screen
`L` | Jump to the bottom of the screen
`mx` | Set mark x at the current cursor position
`'x` | Jump to the beginning of the line of mark x
``x` | Jump to the cursor position of mark x
HTML Visual Navigation | Descriptions
--- | ---
`at` | Select the outer tag block by pressing
`it` | Select the inner tag block
HTML Commands
------------
[](https://asciinema.org/a/80816)
Commands | Descriptions
--- | ---
`html5+` | snippet html tree
`css+` | snippet link css
`ysiw` | wrap tag in word
`yss` | wrap the entire line
`cst ` | change tag to update tag
`cs"'` | change " to '
`ds"` | remove the delimiters entirely
`dst"` | remove the delimiters entirely (t == tag)
**Navigating HTML tags in Vim**
1. Enter visual mode
2. Select the outer tag block by pressing **a** + **t** or **i** + **t** for inner tag block.
- [Video demonstration](https://asciinema.org/a/80816)
- [Emmet Cheat Sheet](http://docs.emmet.io/cheat-sheet/)
- [Vim-surround](https://github.com/tpope/vim-surround)
JavaScript Commands
-------------------
### JavaScript ES6 React
[](https://asciinema.org/a/80829)
**vf**
```js
var functioname = function (arg){
//
}
```
**
```js
/**
*
**/
```
**ex**
```js
module.exports = yourmod
```
**css**
```js
{yourobj}.css('atribuite', 'value')
```
**qs**
```js
document.querySelector('selector')
document.querySelectorAll('selector') //qsa
```
**trf**
```js
try {
} catch (e) {
} finally {
}
```
**proto**
```js
class_name.prototype.method_name = function(){
}
```
**props**
```js
var my_object = Object.defineProperties{
new Object(),
{
property: {
get: function my_object_property_getter(){
},
set: function my_object_property_setter(value){
},
value : value,
writeable : boolean,
enumerable : boolean,
configurable: boolean
}
}
}
```
**us**
```js
'use strict';
```
**=>**
```js
( ) => {
}
```
**cla**
```js
Class classname{
}
```
**clax**
```js
Class classname extends classname{
}
```
**imp**
```js
import ModuleName from 'ModuleName'
```
**cc**
```js
const app = React.createClass({
render: function(){
}
})
```
**cdm**
```js
componentDidMount: function(){
},
```
**gis**
```js
getInitialState: function(){
return {
};
},
```
- [Video demonstration](https://asciinema.org/a/80829)
- [More information about Snippets](https://github.com/honza/vim-snippets)
### AngularJS 1 e 2
[](https://asciinema.org/a/81384)
Commands | Directive
--- | ---
`na` | ng-app=""
`nc` | ng-click=""
`nctrl` | ng-controller=""
`ncl` | ng-class=""
`nm` | ng-model=""
`ns` | ng-show=""
`nh` | ng-hide=""
`nb` | ng-bind=""
`{{` | {{}}
`n2c` | (click)=""
`n2dbc` | (dblclick)=""
`n2ctrl` | ngController=""
`n2m` | [(ngModel)]=""
`n2cl` | [ngClass]=""
**ngsa**
```html
```
**$v**
```js
$scope.variable = value;
```
**ngc**
```js
var controllerName = function(scope, injectables){
};
```
**ngfor**
```js
angularforEach(iterateOver, function(value, key){
});
```
**ngm**
```js
angular.module('moduleName', [moduleDependencies]);
```
**ngma**
```js
var moduleName = angular.module('moduleName', [moduleDeps]);
```
**ngmfa**
```js
factory('factoryName', function(dependencies){
});
```
**ngms**
```js
service('serviceName', function(injectables){
});
```
**ngmfi**
```js
filter('filterName', function(injectables){
return function(inputs, args){
};
});
```
**ngrwr**
```js
$routeProvider.when('url', {
templateUrl: 'templateUrl',
controller: 'controller',
resolve: {
}
});
```
**ngro**
```js
$routeProvider.otherwise({
redirectTo: 'url'
});
```
### TypeScript
Snippets from [Martin Prins](https://github.com/magarcia/vim-angular2-snippets)
```typescript
ng2-component-root // Angular 2 root App component
ng2-bootstrap // Angular 2 bootstraping, for main.ts
ng2-component // Angular 2 component
ng2-pipe // Angular 2 pipe
ng2-route-config // Angular 2 @RouteConfig
ng2-route-path // Angular 2 routing path
ng2-service // Angular 2 service
ng2-subscribe // Angular 2 observable subscription
```
CSS Commands
-------------------
[CSS Abbreviations](http://docs.emmet.io/css-abbreviations/)