⭐️ Vim Frontend is a Vim configured for Front-end Developers.
Switch branches/tags
Nothing to show
Clone or download
victorvoid Merge pull request #10 from aniude/master
modify the frontend file identation rules
Latest commit 6509323 Jul 26, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
autoload add autocomplete conf and ultisnips Jul 24, 2016
ultisnips Angular snippets Jul 30, 2016
.vimrc modify the frontend file identation rules Jul 25, 2018
LICENSE add license Jul 23, 2016
README.md updating dein install Nov 23, 2017

README.md

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

Licence asciinema

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

Quick demo videos

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:

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

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

asciicast

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

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

JavaScript Commands

JavaScript ES6 React

asciicast

vf

var functioname = function (arg){
    //
}

**

/**
*
**/

ex

module.exports = yourmod

css

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

qs

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

us

'use strict';

=>

( ) => {

}

cla

Class classname{


}

clax

Class classname extends classname{

}

imp

import ModuleName from 'ModuleName'

cc

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

cdm

componentDidMount: function(){

},

gis

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

AngularJS 1 e 2

asciicast

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> 

$v

$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