Termux is a terminal emulator and Linux environment app for Android devices which can convert your phone, or tablet, into a rather powerful web development machine.
Termux can be used for many other purposes, including data processing and hacking. You can read more about Termux on the official website.
Vim is the much-loved text editor for Linux machines. If you do not know Vim read this tutorial.
Emmet is a text-editor-plugin which greatly improves the HTML/CSS workflow. You can find the docs here.
In this tutorial, I'll show you how you can install Emmet along with Vim in Termux.
Firstly, you need to install Termux from the Google Play store.
After installation, open Termux and type:
$ apt update && apt upgrade
Then install Vim.
$ apt install vim
After Vim is installed, create a folder in the current home directory by typing
$ mkdir .vim
Navigate to that directory.
$ cd .vim
Create another folder called 'plugged' here.
$ mkdir plugged
Cd back into the home directory.
$ cd ..
There are several ways to install the 'emmet-matt' plugin. In this tutorial, I'm going to use a Vim plugin manager called vim-plug. We need to install that by typing
$ curl -fLo ~/.vim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
After the vim-plug installation, make a .vimrc file.
$ vim .vimrc
Vim will open a new file for editing.
Press 'i' on the keyboard to toggle input mode in Vim.
call plug#begin('~/.vim/plugged') Plug 'mattn/emmet-vim' call plug#end()
and press 'Esc'.
:wq to save changes.
For installing the emmet-vim plugin, we need to install git. This is a crucial step. Without git, the plugin installation will fail and Vim will show an error.
$ pkg install git
After the git installation, Type
$ vim to open Vim and type
If everything goes well, we'll now have the Emmet plugin installed.
Emmet manual says to type
html:5 and use the key combination Ctrl+y+, (the comma is important). But on my phone, I just typed
!and the key combination; and Voila! I got the starter HTML boilerplate.
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html>
Vinod Mathew Sebastian is a Full Stack Developer