Plugins Vim for Frontend

Plugins Vim for Frontend

Plugins Vim for Frontend: It is not common to see FrontEnd developers using Vim on a daily basis, either by fear, afraid to think too complicated, or not knowing all the power that Vim may have after personalising it a bit.

Plugins Vim for Frontend: While in fact, it can indeed be considered a fairly complete IDE with many features, visually appealing, agile, and already old acquaintance of sysadmins and backend developers.

See some of the plugins that make my day to day FrontEnd Developer:




Plugins Vim for Frontend:

Pathogen.vim
Emmet.vim
NERDTree.vim
HTML5.vim
HTML5Validator.vim
JSLint.vim
JSBeautify.vim
CSSSyntax.vim
CSScomb.vim
SuperTab.vim

Pathogen.vim

Remote repository on GitHub: Pathogen.vim

Pathogen.vim for me is the most important plugin from this list. It has the function to manage all plugins in a specific folder structure, in order to facilitate the installation and updating of plugins, as I explained in the post How to install plugins in Vim. We can say that it is a plugin manager.
Emmet.vim

Remote repository on GitHub: Emmet.vim

Emmet.vim is the most important plugin for Frontend Developer, it aims to make the development of HTML, CSS and JavaScript much more agile and fun. No more wind, watch the video below, it demonstrates how the Emmet.vim actually works.
NERDTree.vim

Remote repository on GitHub: NERDTree.vim

NERDTree makes it possible to navigate the project tree through a sidebar and can open multiple files divided into the same terminal window, as the image below:

NERDTree
HTML5.vim

Remote repository on GitHub : HTML5.vim

HTML5.vim is a simple autocomplete plugin only for HTML tags.
HTML5Validator.vim

Remote repository on GitHub : HTML5Validator.vim

HTML5Validator.vim uses http://html5.validator.nu API to perform validation of your HTML5. To use the plugin is only run the command: HTML5Validate, and when he finished the validation if there are any errors he informs them within the same Vim.
JSLint.vim

Remote repository on GitHub: JSLint.vim

JSLint.vim is a very judicious JavaScript validator that uses http://www.jslint.com API, a reliable system and well known for JavaScript developers. There is no need to run any command to validate your JavaScript code as you write it reports if any error has. To represent the error in your code the plugin JSLint.vim marks the line in red, and to find the description of the error, just let the cursor anywhere on the red line he tells within the same Vim.
JSBeautify.vim

Remote repository on GitHub: JSBeautify.vim

JSBeautify.vim is a magical plugin, it indents to JavaScript codes that are minified. That’s right just one line can define what he does, but like all other plugins, it performs the magic of indenting your JavaScript without leaving Vim, just by running the command: call JsBeautify ( ).

CSS3Syntax.vim

Remote repository on GitHub : CSSSyntax.vim

CSSSyntax.vim with this plugin installed Vim can recognize the new CSS3 properties.
CSScomb.vim

Remote repository on GitHub : CSScomb.vim

CSScomb.vim aims to sort and organise your CSS code specifically. It uses the API http://csscomb.com online tool that ranks as the greatest tool in its segment.
The rule that applies the tool to sort and organise your CSS is simple, as the image below demonstrates:

comb-your-code
SuperTab.vim

Remote repository on GitHub: SuperTab.vim

SuperTab.vim used as a database to inform you autocomplete suggestions when you press the TAB key, which is the file that you opened in the terminal tab, where you are using your Vim. So, it just makes your typing or refreshes your memory so you or your team has developed in the project.

If you have suggestions of Plugins Vim for Frontend, I created a repository on GitHub.




LEAVE A REPLY

Please enter your comment!
Please enter your name here