Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsmunim/html-tag-auto-complete
An atom editor plugin that enables auto completion of html tags with class and ids
https://github.com/itsmunim/html-tag-auto-complete
atom atom-package autocomplete emmet html
Last synced: about 2 months ago
JSON representation
An atom editor plugin that enables auto completion of html tags with class and ids
- Host: GitHub
- URL: https://github.com/itsmunim/html-tag-auto-complete
- Owner: itsmunim
- License: mit
- Created: 2018-04-11T16:50:18.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-02-27T08:18:03.000Z (almost 4 years ago)
- Last Synced: 2024-02-23T09:43:03.771Z (11 months ago)
- Topics: atom, atom-package, autocomplete, emmet, html
- Language: JavaScript
- Size: 141 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
## html-tag-auto-complete
A simple atom editor package that enables auto completion of
html elements with/without class and id.
![demo](https://github.com/dibosh/html-tag-auto-complete/raw/master/demo.gif)### Features
- Nothing much, but does exactly what it is supposed to do
- Works with any file type(e.g. `.php`, `.js`, `.jsx`, `.md` etc.) as long as the word you are executing it on is a valid html tag(e.g. `div`, `p`, `abbr` etc.)
### Installation
```
apm install html-tag-auto-complete
```or, go to `Preferences > Install` and search for `html-tag-auto-complete`
### Usage
- Type in the tag name along with class and id in emmet like fashion-
```
{tag-name}
{tag-name}#{id}
{tag-name}.{class-1}.{class-2}
```or, the following is also allowed, `div` will be used as tag-
```
.{class-1}
.{class-1}.{class-2}
#{id}
```Finally, press: alt + tab or, right click and do `Run HTML Tag AutoComplete`.
- You will also find it available under `Packages` in menubar.
### Why?
- The `emmet` plugin is bloated while it's super lightweight. Also there are people like me who only requires this feature rather than all the magics `emmet` can do!
### Development
- Clone this repo locally
- Open `atom` in developer mode: `atom -d`
- Open the source code in `atom`, make whatever changes you would like to make in `lib/html-tag-auto-complete.js` and do `View > Developer > Reload Window` to see if your changes are reflected(e.g. by applying the formatter from context menu or `Package` menu on top)
- Feel free to create a PR with your changes