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
$ curl https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.sh > installer.sh
$ sh ./installer.sh {specify the installation directory}
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/ ~/.vimor
- 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/ ~/.vimYouCompleteMe 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
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
- 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)
| 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 |
| Commands | Descriptions |
|---|---|
<space>s |
Find and open files |
<space>b |
Find file on buffer (open file) |
<space>c |
Close active buffer (clone file) |
| 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 |
| Commands | Descriptions |
|---|---|
<space>so |
Open Session |
<space>ss |
Save Session |
<space>sd |
Delete Session |
<space>sc |
Close Session |
| 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 |
| Commands | Descriptions |
|---|---|
<space>v |
Split vertical |
<space>h |
Split horizontal |
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
| 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 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 |
| 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.
vf
var functioname = function (arg){
//
}**
/**
*
**/ex
module.exports = yourmodcss
{yourobj}.css('atribuite', 'value')qs
document.querySelector('selector')
document.querySelectorAll('selector') //qsatrf
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 {
};
},
| 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'
});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