As a web developer using frameworks like React/Angular, I spend a lot of time on web components.

A component instance is like:

<GenericTable onSelectRow={ row => console.log(row) } numberOfPinnedColumns={2} withToolBar onClickCell={ cell => console.log(cell) } > <PaginationButtons /> <TotalSum /> <ReportButtons /> </GenericTable>

Basically a component instance is a big chunk of html tags.

I created a new package EACL (Emacs auto complete lines) which could help me input components in unbelievable speed.

The idea is simple. If I've already used one component elsewhere in the project. It's unnecessary to re-type the similar code again.

All I need to do is to input the first characters of the component and run M-x eacl-complete-tag which will grep the project and input the remaining part of component.

Here is a demo to input component ButtonToolbar :

Please note EACL is generic and can be use in any programming language.

M-x eacl-complete-statement to complete below Javascript code:

import { Button, Row, Column } from 'react-bootstrap';

M-x eacl-complete-snippet to complete below C code:

static int v9fs_drop_inode(struct inode *inode) { struct v9fs_session_info *v9ses; v9ses = v9fs_inode2v9ses(inode); if (v9ses->cache == CACHE_LOOSE || v9ses->cache == CACHE_FSCACHE) return generic_drop_inode(inode); /* * in case of non cached mode always drop the * the inode because we want the inode attribute * to always match that on the server. */ return 1; }

You can also create your own commands based on API eacl-complete-multi-lines-internal .

For example, it is a piece of cake to support Lisp by creating command my-complete-lisp :