Skip to content
This repository has been archived by the owner on Dec 22, 2021. It is now read-only.

Latest commit

 

History

History
598 lines (420 loc) · 11.9 KB

README.md

File metadata and controls

598 lines (420 loc) · 11.9 KB

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