README.md

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

• Introduction
• Installation
  • Mac OS X
  • Linux x64
• Features Summary
• User Guide
  • General Commands
  • Learning Vim
    • Super Fast Navigation
  • HTML Commands
  • JavaScript Commands
    • JavaScript ES6 React
    • AngularJS 1 e 2
    • TypeScript
  • CSS 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 ? " - 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

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

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

Find buffers and file

Navigations

Sessions

Code

Splits

Learning Vim

You can learn basic vim here:

• The 11 Steps to Learning Vim
• The 30 Basic Vim Commands You'll Use Every Day
• Vimbook (in portuguese)
• Vim para noobs (in portuguese)
• VIM Editor Commands

Super Fast Navigation

HTML Commands

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
• Emmet Cheat Sheet
• Vim-surround

JavaScript Commands

JavaScript ES6 React

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 {
    
    };
},

• Video demonstration
• More information about Snippets

AngularJS 1 e 2

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