5 vim plugins for web development

[Linux Hint]

Developing for the web depends on a lot of code; when you have not used vim before, you will feel like you have to type every web page character. You may come from other editors and wonder where are all the code completion features and other helpful stuff? Taking a cursory look at vim, the conclusion is to leave and never touch it again. If you follow a few simple guides and install the appropriate plugins, you will change your mind. To be efficient when programming, you need a few features. Namely, documentation links, code completion, and syntax highlighting. This will not make you a master programmer, but it will make your experience much better.

File Handling

There are many tools to handle files better; you really should use a project-style work-flow. With that said, one enhancement is to be able to see your files in a tree to the side of the editor. Add NERDtree!

Nerdtree is published on GitHub; most plugin managers take the value “preservim/nerdtree”. The extension places a tree listing of your files where you would expect it. You have many options for tweaking its behaviour, including setting the arrows to anything you want. Looking at GitHub, you also have many forks that may suit your needs better.

In writing software, you will need to search for files and text in other files. Without features inside Vim, you would be forced to do that on the command line in another terminal. Denite integrates with ripgrep and allows you to search right there in Vim. It requires Python and pynvim and is very fast and efficient.

To install Denite, you need to install ‘Shougo/denite.nvim’, in your vim plugin directory or use your favourite plugin manager. You also need to set the Python you use with the host program parameters. Use ‘checkhealth’ in vim to verify and for more information.

let g:python_hostprog = ‘/usr/bin/python’ let g:python3_hostprog = ‘/usr/bin/python3’

Install the ripgrep program and upgrade your pynvim to the correct version. They are in the regular repo and in the python, respectively.

Code Completion

Many users who move from VSCode wonder how to do things like code-completion. Not to worry, people are working to help you and to solve their own problems. Neoclide on GitHub has many vim extensions for all your needs. The “Conquer of Completion”, coc from now on, includes code completion that resembles VSCode.

COC also has many sub plugins that all use the main plugin. Some are useful for specific languages. You can use eslint to keep your code correct and find bugs. The prettier extension makes your code better formatted. The list of languages you can use is long. You should look it through after you have started using COC; switching to others may be worth it, but not without very good reasons.

To make it even faster to code, you can use abbreviations to create your code. This is what you do with Emmet; the system exists for many editors and IDEs. In Vim, you just add your plugin using the init.vim or vimrc file. To be really efficient, you will need to learn the abbreviations that correspond to the code you want. Once you know those, coding speed picks up exponentially. To install, add https://github.com/mattn/emmet-vim to your plugin config.

Git

If you are serious about programming, you must have a version control system. If you do not use git, then you have a very rare project on your hands. You run Git on the command line outside of your editor until you find a great extension that runs it for you. Since you heard about Coc, you should know there is an extension for that framework, but they admit themselves that it is short on features. So the most popular is vim-fugitive. Install it using your favourite plugin manager. Once you have it installed, you can run git just as if you were on the command line. It also adds many features that both act on your repository and your buffer. You can use it to run the difference in vim, and it also has many plugins for famous providers. You also have a statusline option that you can add to your status line. You will see an example of this further down.

Other odd ones you might like.

Once you have all the functions in your editor, you may want to spice up your experience. You may want to have a nice status line at the bottom of the screen. Use vim-airline for that, there are many others, but this one looks light and airy. To install, add ‘vim-airline/vim-airline’ to your configuration. Your taskbar will instantly look better, and you can tweak more at your leaisure.

https://github.com/vim-airline/vim-airline

One way to make both your status bar look better and most other parts of the interface is to add nice icons to the install. The ‘ryanoasis/vim-dev-icons’ is a great choice for these icons. Install the regular way; it plays well with vim-airline and many other extensions.

https://github.com/ryanoasis/vim-devicons

You should also consider how you can see your web page live while you are coding outside of vim. For node.js, there is a ready solution for this. It is called browser-sync. You install it with npm and run it with the command and the directory where your project is. As soon as the command runs, it will start your browser on the ‘localhost:3000’ address. Any changes will show immediately as you upgrade the code.

Conclusion

To get started programming for the web, you first must put in the effort to follow a few tutorials and then create your own projects. Find people who you can help so they may help you at the end. For your coding experience to be efficient and pleasant, use the extensions you heard about here. You should also keep looking for ways to improve yourself first and then your tools.

View the full article