{"id":13674853,"url":"https://github.com/victorvoid/vim-frontend","last_synced_at":"2025-04-28T14:32:25.083Z","repository":{"id":89705997,"uuid":"63828164","full_name":"victorvoid/vim-frontend","owner":"victorvoid","description":":star: Vim Frontend is a Vim configured for Front-end Developers. ","archived":true,"fork":false,"pushed_at":"2018-07-26T20:55:50.000Z","size":43,"stargazers_count":284,"open_issues_count":1,"forks_count":25,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-11-11T14:43:07.650Z","etag":null,"topics":["learning-vim","vim","vim-frontend"],"latest_commit_sha":null,"homepage":"","language":"Vim script","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/victorvoid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-07-21T01:54:07.000Z","updated_at":"2024-07-01T06:10:37.000Z","dependencies_parsed_at":"2024-01-19T17:18:40.425Z","dependency_job_id":"cf5b1b6d-226e-4cd3-b6b4-564d8a20a89b","html_url":"https://github.com/victorvoid/vim-frontend","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorvoid%2Fvim-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorvoid%2Fvim-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorvoid%2Fvim-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/victorvoid%2Fvim-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/victorvoid","download_url":"https://codeload.github.com/victorvoid/vim-frontend/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251330455,"owners_count":21572286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["learning-vim","vim","vim-frontend"],"created_at":"2024-08-02T11:01:05.040Z","updated_at":"2025-04-28T14:32:24.707Z","avatar_url":"https://github.com/victorvoid.png","language":"Vim script","readme":"Vim Frontend: a Vim configured for Front-end Developers.\n===========================================================\n![Licence](https://img.shields.io/badge/licence-MIT-red.svg?style=flat)\n![asciinema](https://img.shields.io/badge/asciinema-demos-brightgreen.svg)\n\n- [Introduction](#introduction)\n- [Installation](#installation)\n    - [Mac OS X](#mac-os-x)\n    - [Linux x64](#linux-x64)\n- [Features Summary](#features-summary)\n- [User Guide](#user-guide)\n    - [General Commands](#general-commands)\n    - [Learning Vim](#learning-vim)\n        - [Super Fast Navigation](#super-fast-navigation)\n    - [HTML Commands](#html-commands)\n    - [JavaScript Commands](#javascript-commands)\n        - [JavaScript ES6 React](#javascript-es6-react)\n        - [AngularJS 1 e 2](#angularjs-1-e-2)\n        - [TypeScript](#typescript)\n    - [CSS Commands](#javascript-commands)\n    \nIntroduction\n------------\n\nIs you a Front-end Developer ? Are you using Sublime Text, Atom, Brackets, Visual Studio Code or anything ?\n\n\u003e \"Give me a chance. Don't worry, I'm easy :smile: \" - Vim\n\n[Quick demo videos](https://asciinema.org/~victorvoid)\n\nInstallation\n------------\n\n\n### If you are using Unix/Linux or Mac OS X.\n\n```\n$ curl https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.sh \u003e installer.sh\n$ sh ./installer.sh {specify the installation directory}\n```\n\n### Mac OS X\n\n*Pre-requisite*:\n\n```\n$ brew install git ctags\n```\n\n**Just replace your .vimrc :shipit:**\n\n```bash\ngit clone https://github.com/VictorVoid/vim-frontend.git\nmv vim-frontend/.vimrc ~/ \u0026\u0026 mv vim-frontend/autoload/ ~/.vim \u0026\u0026 mv vim-frontend/ultisnips/ ~/.vim\n```\n\nor\n\n```bash\n- Download ZIP\ncd /Users/yourusername/Download\n- Open terminal\nunzip vim-frontend-master.zip\nmv vim-frontend/.vimrc ~/ \u0026\u0026 mv vim-frontend/autoload/ ~/.vim \u0026\u0026 mv vim-frontend/ultisnips/ ~/.vim\n```\n    \n*YouCompleteMe Plugin INFO:* :ear:\n\n**Remember:** YCM is a plugin with a compiled component. If you **update** YCM\nusing Vundle and the ycm_core library APIs have changed (happens\nrarely), YCM will notify you to recompile it. You should then rerun the install\nprocess.\n\nDon't worry, it's easy :smile: Let's go.\n\nInstall [Homebrew](http://brew.sh/)\n\n    /usr/bin/ruby -e \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)\"\n\nInstall cmake via Homebrew\n\n    brew install cmake\n    \nCompiling YCM **with** semantic support for C-family languages:\n\n    cd  ~/.cache/dein/repos/github.com/Valloric/YouCompleteMe\n    ./install.py --clang-completer\n    \n[More info](https://github.com/Valloric/YouCompleteMe)\n\n### Linux x64\n*Pre-requisite*:\n* Ubuntu\\Debian\n\n```\n$ sudo apt-get install git exuberant-ctags ncurses-term python-jinja2\n```\n\n* Gentoo\n```\n$ sudo emerge dev-util/ctags sys-libs/ncurses dev-vcs/git dev-python/pyflakes dev-python/jinja\n```\n\n* Arch Linux via *pacman* (recomend used *pacaur*)\n```\n$ sudo pacman -S git-core ctags ncurses python-jinja\n```\n* Fedora\n\n```\n$ sudo dnf install ncurses-devel git ctags-etags\n```\n\n**Just replace your .vimrc :shipit:**\n\n    git clone https://github.com/VictorVoid/vim-frontend.git\n    mv vim-frontend/.vimrc ~/ \u0026\u0026 mv vim-frontend/autoload/ ~/.vim \u0026\u0026 mv vim-frontend/ultisnips/ ~/.vim\n\nor\n\n    - Download ZIP\n    cd /Users/yourusername/Download\n    - Open terminal\n    sudo apt-get install unzip\n    unzip file.zip -d\n    mv vim-frontend/.vimrc ~/ \u0026\u0026 mv vim-frontend/autoload/ ~/.vim \u0026\u0026 mv vim-frontend/ultisnips/ ~/.vim\n    \n    \n*YouCompleteMe Plugin INFO:* :ear:\n\n**Remember:** YCM is a plugin with a compiled component. If you **update** YCM\nusing Vundle and the ycm_core library APIs have changed (happens\nrarely), YCM will notify you to recompile it. You should then rerun the install\nprocess.\n\nUbuntu\\Debian: \n\nInstall development tools and CMake: `sudo apt-get install build-essential cmake`\n\nMake sure you have Python headers installed: `sudo apt-get install python-dev\npython3-dev`.\n\nCompiling YCM **with** semantic support for C-family languages:\n\n    cd ~/.cache/dein/repos/github.com/Valloric/YouCompleteMe\n    ./install.py --clang-completer\n    \n[Other distribution](https://github.com/Valloric/YouCompleteMe/blob/master/doc/youcompleteme.txt#L327)    \n[More info](https://github.com/Valloric/YouCompleteMe)\n\nFeatures Summary\n-----\n\n- Automatic syntax and codestyle checks.\n- JavaScript autocomplete ([ternjs](http://ternjs.net/))\n- HTML with auto close tag\n- Integration with Git\n- Emmet\n- Snippets\n- TagBar (overview of its structure)\n- Vim Session (restore your Vim editing sessions)\n- Surround (provides mappings to easily delete, change and add such surroundings in pairs)\n- Integration with CSS Pre-processors (SASS, LESS and Stylus)\n- Color preview (css/less/sass/stylus/html)\n- Beautify (HTML, CSS, JS)\n\nUser Guide\n------------\n\n### General Commands\n\n## Git\n\nCommands    | Descriptions\n--- | ---\n`\u003cspace\u003ega` | Execute *git add* on current file\n`\u003cspace\u003egc` | git commit (splits window to write commit message)\n`\u003cspace\u003egsh`| git push\n`\u003cspace\u003egll`| git pull\n`\u003cspace\u003egs` | git status\n`\u003cspace\u003egb` | git blame\n`\u003cspace\u003egd` | git diff\n`\u003cspace\u003egr` | git remove\n\n## Find buffers and file\n\nCommands    | Descriptions\n--- | ---\n`\u003cspace\u003es`  | Find and open files\n`\u003cspace\u003eb`  | Find file on buffer (open file)\n`\u003cspace\u003ec`  | Close active buffer (clone file)\n\n## Navigations\n\nCommands    | Descriptions\n--- | ---\n`\u003cspace\u003e.` | Set path working directory\n`:cd \u003cpath\u003e` | Open path */path*\n`\u003cControl\u003e+w+w` | Alternative navigate vim split panels\n`\u003cspace\u003ew or \u003cspace\u003ex` | Next buffer navigate\n`\u003cspace\u003eq or \u003cspace\u003ez` | previous buffer navigate\n`SHIFT+n` | Create a tab\n`SHIFT+TAB` | previous tab navigate\n`TAB` | next tab navigate\n`\u003cControl+w\u003e+\u003chjkl\u003e` | Navigate via split panels\n`F2`  | Open tree navigate in actual opened file\n`F3`  | Open/Close tree navigate files\n`F4`  | List all class and method, support for python, go, lua, ruby and php\n`\u003cspace\u003e+0`  | Focus on tree navigate files\n\n## Sessions\n\nCommands    | Descriptions\n--- | ---\n`\u003cspace\u003eso` | Open Session\n`\u003cspace\u003ess` | Save Session\n`\u003cspace\u003esd` | Delete Session\n`\u003cspace\u003esc` | Close Session\n\n\n## Code\n\nCommands    | Descriptions\n--- | ---\n`\u003e`   | indent to right\n`\u003c`   | indent to left\n`gc`  | Comment or uncomment lines that {motion} moves over\n`YY`  | Copy to clipboard\n`\u003cspace\u003ep`  | Paste\n`\u003cControl+l\u003e` |  UltiSnips Expand Trigger\n`\u003cControl+y\u003e,` | Activate Emmet plugin\n\n## Splits\n \n Commands    | Descriptions\n--- | ---\n`\u003cspace\u003ev`  | Split vertical\n`\u003cspace\u003eh`  | Split horizontal\n\n\nLearning Vim\n------------\n\nYou can learn basic vim here: \n\n* [The 11 Steps to Learning Vim](https://github.com/damassi/learn-vim)\n* [The 30 Basic Vim Commands You'll Use Every Day](https://spin.atomicobject.com/2016/04/19/vim-commands-cheat-sheet/)\n* [Vimbook (in portuguese)](https://cassiobotaro.gitbooks.io/vimbook/content/)\n* [Vim para noobs (in portuguese)](https://woliveiras.com.br/vimparanoobs/)\n* [VIM Editor Commands ](http://www.radford.edu/~mhtay/CPSC120/VIM_Editor_Commands.htm)\n\n### Super Fast Navigation\n\nCommands | Descriptions\n--- | ---\n`e` | Move to the end of a word\n`w` | :arrow_right: Move forward to the beginning of a word -\u003e\n`W` | :arrow_right: Move forward a WORD (any non-whitespace characters)\n`b` | :arrow_left: Move backward to the beginning of a word\n`(` | :arrow_down: Jump backward one sentence\n`)` | :arrow_up: Jump forward one sentence.\n`3w, 3b` | :left_right_arrow: Move forward three words, Move backward three words\n`$` | Move to the end of the line\n`0\"` | Move to the beginning of the line\n`H` | Jump to the top of the screen\n`M` | Jump to the middle of the screen\n`L` | Jump to the bottom of the screen\n`mx` | Set mark x at the current cursor position\n`'x` | Jump to the beginning of the line of mark x\n``x` | Jump to the cursor position of mark x\n\nHTML Visual Navigation | Descriptions\n--- | ---\n`at` | Select the outer tag block by pressing\n`it` | Select the inner tag block\n\n\n\nHTML Commands\n------------\n\n[![asciicast](https://asciinema.org/a/80816.png)](https://asciinema.org/a/80816)\n\nCommands | Descriptions\n--- | ---\n`html5+\u003cctrl l\u003e` | snippet html tree\n`css+\u003cctrl l\u003e` | snippet link css\n`ysiw` | wrap tag in word\n`yss` | wrap the entire line\n`cst \u003cupdatetag\u003e` | change tag to update tag\n`cs\"'` | change \" to '\n`ds\"` |  remove the delimiters entirely\n`dst\"` |  remove the delimiters entirely (t == tag)\n\n**Navigating HTML tags in Vim**\n\n1. Enter visual mode\n2. Select the outer tag block by pressing  **a** + **t** or **i** + **t** for inner tag block.\n\n- [Video demonstration](https://asciinema.org/a/80816)\n- [Emmet Cheat Sheet](http://docs.emmet.io/cheat-sheet/)\n- [Vim-surround](https://github.com/tpope/vim-surround)\n\nJavaScript Commands\n-------------------\n\n### JavaScript ES6 React\n[![asciicast](https://asciinema.org/a/80829.png)](https://asciinema.org/a/80829)\n\n**vf**\n\n```js\nvar functioname = function (arg){\n    //\n}\n```\n\n**\n\n```js\n/**\n*\n**/\n```\n\n**ex**\n\n```js\n\nmodule.exports = yourmod\n\n```\n\n**css**\n\n```js\n\n{yourobj}.css('atribuite', 'value')\n\n```\n\n**qs**\n\n```js\n\ndocument.querySelector('selector')\n\ndocument.querySelectorAll('selector') //qsa\n\n```\n\n**trf**\n\n```js\n\ntry {\n\n} catch (e) {\n\n} finally {\n\n}\n```\n\n**proto**\n\n```js\n\nclass_name.prototype.method_name = function(){\n    \n}\n```\n\n**props**\n\n```js\n\nvar my_object = Object.defineProperties{\n    new Object(),\n    {\n        property: {\n            get: function my_object_property_getter(){\n            \n            },\n            set: function my_object_property_setter(value){\n            \n            },\n            value       : value,\n            writeable   : boolean,\n            enumerable  : boolean,\n            configurable: boolean\n        }\n    }\n}\n```\n\n**us**\n\n```js\n'use strict';\n```\n\n**=\u003e**\n\n```js\n\n( ) =\u003e {\n\n}\n\n```\n\n**cla**\n\n```js\n\nClass classname{\n\n\n}\n```\n\n**clax**\n\n\n```js\nClass classname extends classname{\n\n}\n\n```\n\n**imp**\n\n```js\nimport ModuleName from 'ModuleName'\n\n```\n\n\n**cc**\n\n\n```js\n\nconst app = React.createClass({\n    render: function(){\n    \n    }\n})\n\n```\n\n\n**cdm**\n\n\n```js\n\ncomponentDidMount: function(){\n\n},\n\n```\n\n\n**gis**\n\n\n```js\ngetInitialState: function(){\n    return {\n    \n    };\n},\n```\n\n- [Video demonstration](https://asciinema.org/a/80829)\n- [More information about Snippets](https://github.com/honza/vim-snippets)\n\n### AngularJS 1 e 2\n\n[![asciicast](https://asciinema.org/a/81384.png)](https://asciinema.org/a/81384)\n\nCommands | Directive\n--- | ---\n`na` | ng-app=\"\"\n`nc` | ng-click=\"\"\n`nctrl` | ng-controller=\"\"\n`ncl` |  ng-class=\"\"\n`nm` | ng-model=\"\"\n`ns` | ng-show=\"\"\n`nh` | ng-hide=\"\"\n`nb` | ng-bind=\"\"\n`{{` | {{}}\n`n2c` | (click)=\"\"\n`n2dbc` | (dblclick)=\"\"\n`n2ctrl` | ngController=\"\"\n`n2m` | [(ngModel)]=\"\"\n`n2cl` | [ngClass]=\"\"\n\n**ngsa**\n```html\n \u003cscript src=\"https://ajax.googleapis.com/ajax/libs/angularjs/x.x.xx/angular.js\"\u003e\u003c/script\u003e \n```\n\n**$v**\n```js\n$scope.variable = value;\n```\n\n**ngc**\n```js\nvar controllerName = function(scope, injectables){\n\n};\n```\n\n**ngfor**\n```js\nangularforEach(iterateOver, function(value, key){\n    \n});\n```\n\n**ngm**\n```js\nangular.module('moduleName', [moduleDependencies]);\n```\n\n**ngma**\n```js\nvar moduleName = angular.module('moduleName', [moduleDeps]);\n```\n\n**ngmfa**\n```js\nfactory('factoryName', function(dependencies){\n\n});\n```\n\n**ngms**\n```js\nservice('serviceName', function(injectables){\n\n});\n```\n\n**ngmfi**\n```js\nfilter('filterName', function(injectables){\n    return function(inputs, args){\n    \n    };\n});\n```\n\n**ngrwr**\n```js\n\n$routeProvider.when('url', {\n    templateUrl: 'templateUrl',\n    controller: 'controller',\n    resolve: {\n    \n    }\n});\n\n```\n\n**ngro**\n```js\n$routeProvider.otherwise({\n    redirectTo: 'url'\n});\n```\n\n### TypeScript\n\n\nSnippets from [Martin Prins](https://github.com/magarcia/vim-angular2-snippets)\n\n```typescript\nng2-component-root  // Angular 2 root App component\nng2-bootstrap     // Angular 2 bootstraping, for main.ts\nng2-component     // Angular 2 component\nng2-pipe          // Angular 2 pipe\nng2-route-config  // Angular 2 @RouteConfig\nng2-route-path    // Angular 2 routing path\nng2-service       // Angular 2 service\nng2-subscribe     // Angular 2 observable subscription\n```\n\nCSS Commands\n-------------------\n\n[CSS Abbreviations](http://docs.emmet.io/css-abbreviations/)\n","funding_links":[],"categories":["Vim script"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictorvoid%2Fvim-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvictorvoid%2Fvim-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvictorvoid%2Fvim-frontend/lists"}