DEV Community

Vinod Mathew Sebastian
Vinod Mathew Sebastian

Posted on • Edited on

How to install Emmet with Vim in Termux

#tutorial #termux #vim #emmet

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
Enter fullscreen mode Exit fullscreen mode

Then install Vim.

$ apt install vim
Enter fullscreen mode Exit fullscreen mode

After Vim is installed, create a folder in the current home directory by typing

$ mkdir .vim
Enter fullscreen mode Exit fullscreen mode

Navigate to that directory.

$ cd .vim
Enter fullscreen mode Exit fullscreen mode

Create another folder called 'plugged' here.

$ mkdir plugged
Enter fullscreen mode Exit fullscreen mode

Cd back into the home directory.

$ cd ..
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

After the vim-plug installation, make a .vimrc file.

$ vim .vimrc
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

:PlugInstall
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Enjoy coding!

Vinod Mathew Sebastian is a Full Stack Developer

Top comments (4)

Collapse
 
kcubeterm profile image
Krishna Kanhaiya •

Cool man

Collapse
 
standiki profile image
Stanley Diki • • Edited

Awesome. I noticed exiting with [wq] is difficult so one need to press colon [ : ] followed by the command. Example:
:wq then hit enter. Thanks

Collapse
 
zoomlin profile image
Denis Troepolskiy •

try ZZ

Collapse
 
ahmed_onour profile image
Ahmed Onour •

it's AWOSOME asf
good job man

Read next

radchenko profile image

Practical Experience: Integrating Over 50 Neural Networks Into One Open-Source Project

Vladislav Radchenko -

iayeshasahar profile image

AI-Powered Web Dev: Build a Full Stack App with Just a Few Prompts Using Supabase & Lovable

Ayesha Sahar -

lico profile image

Why Spaces Are Encoded: %20 with encodeURI and +(plus) with URL / Differences Between encodeURI and URL

SeongKuk Han -

blamsa0mine profile image

Build a Shopping Cart App with React, TypeScript, and Material-UI 🚀

A0mineTV -