Vim Frontend: a Vim configured for Front-end Developers.

Introduction
Installation
- Mac OS X
- Linux x64
Features Summary
User Guide

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 😄 " - Vim

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

git clone https://github.com/VictorVoid/vim-frontend.git
mv vim-frontend/.vimrc ~/ && mv vim-frontend/autoload/ ~/.vim && mv vim-frontend/ultisnips/ ~/.vim

- 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: 👂

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 😄 Let's go.

Install Homebrew

/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

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

git clone https://github.com/VictorVoid/vim-frontend.git
mv vim-frontend/.vimrc ~/ && mv vim-frontend/autoload/ ~/.vim && mv vim-frontend/ultisnips/ ~/.vim

- 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: 👂

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
More info

Features Summary

Automatic syntax and codestyle checks.
JavaScript autocomplete (ternjs)
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
`<space>ga`	Execute git add on current file
`<space>gc`	git commit (splits window to write commit message)
`<space>gsh`	git push
`<space>gll`	git pull
`<space>gs`	git status
`<space>gb`	git blame
`<space>gd`	git diff
`<space>gr`	git remove

Find buffers and file

Commands	Descriptions
`<space>s`	Find and open files
`<space>b`	Find file on buffer (open file)
`<space>c`	Close active buffer (clone file)

Navigations

Commands	Descriptions
`<space>.`	Set path working directory
`:cd <path>`	Open path /path
`<Control>+w+w`	Alternative navigate vim split panels
`<space>w or <space>x`	Next buffer navigate
`<space>q or <space>z`	previous buffer navigate
`SHIFT+n`	Create a tab
`SHIFT+TAB`	previous tab navigate
`TAB`	next tab navigate
`<Control+w>+<hjkl>`	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
`<space>+0`	Focus on tree navigate files

Sessions

Commands	Descriptions
`<space>so`	Open Session
`<space>ss`	Save Session
`<space>sd`	Delete Session
`<space>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
`<space>p`	Paste
`<Control+l>`	UltiSnips Expand Trigger
`<Control+y>,`	Activate Emmet plugin

Splits

Commands	Descriptions
`<space>v`	Split vertical
`<space>h`	Split horizontal

Learning Vim

You can learn basic vim here:

Super Fast Navigation

Commands	Descriptions
`e`	Move to the end of a word
`w`	➡️ Move forward to the beginning of a word ->
`W`	➡️ Move forward a WORD (any non-whitespace characters)
`b`	⬅️ Move backward to the beginning of a word
`(`	⬇️ Jump backward one sentence
`)`	⬆️ Jump forward one sentence.
`3w, 3b`	↔️ 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

Commands	Descriptions
`html5+<ctrl l>`	snippet html tree
`css+<ctrl l>`	snippet link css
`ysiw`	wrap tag in word
`yss`	wrap the entire line
`cst <updatetag>`	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

Enter visual mode
Select the outer tag block by pressing a + t or i + t for inner tag block.

JavaScript Commands

JavaScript ES6 React

var functioname = function (arg){
    //
}

/**
*
**/

module.exports = yourmod

css

{yourobj}.css('atribuite', 'value')

document.querySelector('selector')

document.querySelectorAll('selector') //qsa

trf

try {

} catch (e) {

} finally {

}

proto

class_name.prototype.method_name = function(){
    
}

props

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
        }
    }
}

'use strict';

( ) => {

}

cla

Class classname{


}

clax

Class classname extends classname{

}

imp

import ModuleName from 'ModuleName'

const app = React.createClass({
    render: function(){
    
    }
})

cdm

componentDidMount: function(){

},

gis

getInitialState: function(){
    return {
    
    };
},

AngularJS 1 e 2

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

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/x.x.xx/angular.js"></script>

$scope.variable = value;

ngc

var controllerName = function(scope, injectables){

};

ngfor

angularforEach(iterateOver, function(value, key){
    
});

ngm

angular.module('moduleName', [moduleDependencies]);

ngma

var moduleName = angular.module('moduleName', [moduleDeps]);

ngmfa

factory('factoryName', function(dependencies){

});

ngms

service('serviceName', function(injectables){

});

ngmfi

filter('filterName', function(injectables){
    return function(inputs, args){
    
    };
});

ngrwr

$routeProvider.when('url', {
    templateUrl: 'templateUrl',
    controller: 'controller',
    resolve: {
    
    }
});

ngro

$routeProvider.otherwise({
    redirectTo: 'url'
});

TypeScript

Snippets from Martin Prins

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

victorvoid/vim-frontend

victorvoid

Reviews

Repository Details