loading...

How to install Emmet with Vim in Termux

vinodvms profile image Vinod Mathew Sebastian Updated on ・2 min read

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.

Type

call plug#begin('~/.vim/plugged')
Plug 'mattn/emmet-vim'
call plug#end()

and press 'Esc'.

Then type :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.

Type

$ pkg install git

After the git installation, Type $ vim to open Vim and type

:PlugInstall

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>

Enjoy coding!


Vinod Mathew Sebastian is a Full Stack Developer

Posted on by:

vinodvms profile

Vinod Mathew Sebastian

@vinodvms

Full Stack Developer. Computer Programmer.

Discussion

pic
Editor guide