Custom snippets for Emmet following the ITCSS pattern
Emmet is a set of plugins that allow for high-speed coding and editing in HTML, XML, XSL and other structured code formats (like CSS, SCSS, SASS, LESS, Stylus, etc).
For more information about Emmet, please visit the official website.
For more information about how Emmet works, please visit the official documentation.
Basically, most text editors out there allow you to store and re-use commonly used code chunks, called "snippets". While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime.
Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too.
ITCSS Emmet snippets is a package which utilizes the power of ITCSS and Emmet and provides a customized, opinionated snippets.json file adapted to the ITCSS pattern and providing many useful snippets.
In order to use this package you must download it on your local machine, extract it and copy the snippets.json file to the preferred location.
You can also download only the snippets.json file alone.
After that in your preferred text editor, you should set the Emmet extensions path to point to the folder which contains our custom snippets.json file.
You can follow the official documentation and overwrite the default snippets, but I would recommend overwriting only the settings for Emmet in your editor.
For example, in VS Code, this is done by adding/editing the following setting:
"emmet.extensionsPath": "PATH_TO_YOUR_SNIPPETS_JSON_FOLDER"In Sublime Text, you should define the extensions_path setting in Emmet.sublime-settings and make it point to your custom snippets folder.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent