Ⅰ. 插件描述

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

Ⅱ. 基本信息

创建日期： 2016-07-21

使用用户： 1

Github星： 259

插件作者： Victor Igor

Ⅲ. 安装方法

使用Vundle管理器安装

在你的.vimrc下添加:

Plugin 'victorvoid/vim-frontend'

… 然后在Vim中运行以下命令:

:source %
:PluginInstall

对于Vundle版本 < 0.10.2，请用上面的Bundle替换Plugin。

使用NeoBundle管理器安装

在你的.vimrc下添加:

NeoBundle 'victorvoid/vim-frontend'

… 然后在Vim中运行以下命令:

:source %
:NeoBundleInstall

使用VimPlug管理器安装

在你的.vimrc下添加:

Plug 'victorvoid/vim-frontend'

… 然后在Vim中运行以下命令:

:source %
:PlugInstall

使用Pathogen管理器安装

在终端中运行以下命令:

cd ~/.vim/bundle
git clone https://github.com/victorvoid/vim-frontend

Ⅳ. 文档说明

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 :smile: " - 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

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

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

UbuntuDebian

$ 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

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

UbuntuDebian:

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`	:arrow_right: Move forward to the beginning of a word ->
`W`	:arrow_right: Move forward a WORD (any non-whitespace characters)
`b`	:arrow_left: Move backward to the beginning of a word
`(`	:arrow_down: Jump backward one sentence
`)`	:arrow_up: Jump forward one sentence.
`3w, 3b`	:left_right_arrow: 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

Vim插件网

vim-frontend

Ⅰ. 插件描述

Ⅱ. 基本信息

Ⅲ. 安装方法

使用Vundle管理器安装

使用NeoBundle管理器安装

使用VimPlug管理器安装

使用Pathogen管理器安装

Ⅳ. 文档说明

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

Installation

If you are using Unix/Linux or Mac OS X.

Mac OS X

Linux x64

Features Summary

User Guide

General Commands

Git

Find buffers and file

Navigations

Sessions

Code

Splits

Learning Vim

Super Fast Navigation

HTML Commands

JavaScript Commands

JavaScript ES6 React

AngularJS 1 e 2

TypeScript

CSS Commands

添加新评论