Documentation

Create Package

Frontend Snippets

frontend-snippets

By Ira Sanchez

A simple package to make frontend development easier regardless of IDE.

frontend

html

development

Paste this command in a terminal to install the package

espanso install frontend-snippets

Description

Source

frontend-snippets

Make frontend easier and less time-consuming with this Espanso package!

Forked from the html-utils-package with additional matches added.

Triggers

HTML

Trigger

Result

::docskel

Generates an empty document with

utf-8

and

viewport

headers (unindented)

::doctype

<!DOCTYPE html>

::charset

<meta charset="">

::utf-8

<meta charset="UTF-8">

::viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

::meta-author

<meta name="author" content="">

::meta-desc

<meta name="description" content="">

::meta-keywords

<meta name="keywords" content="">

::title

<title></title>

::div

<div></div>

::html

<html></html>

::head

<head></head>

::body

<body></body>

::a

<a href=""></a>

::br

<br/>

::button

<button type="button"></button>

::style

<style></style>

::css

<link rel="stylesheet" type="text/css" href="">

::script

<script></script>

::js

<script type="text/javascript" src=""></script>

::form

<form action="" method=""></form>

::label

<label for=""></label>

::submit

<input type="submit" value="">

::img

<img src="" alt="">

::input-text

<input type="text" name="" id="">

::input-password

<input type="password" name="" id="">

::input-radio

<input type="radio" name="" id="" value="">

::input-checkbox

<input type="checkbox" name="" id="" value="">

::input-file

<input type="file" name="" id="">

JavaScript

Trigger

Result

::while

while (){ }

::forup

for (let i = 0; i < __; i++){ }

::fordown

for (let i = 0; i >= 0; i--){ }

React

Trigger

Result

::rfcep

Generates a React functional component with default props, prop types, and default export. Does not autogenerate the name.

Contributions

If you feel like there's any important tag/snippet missing, feel free to create a Pull Request or open an Issue.

package.yml


matches:
  # HTML
  - trigger: "::doctype"
    replace: >-
      <!DOCTYPE html>

  - trigger: "::charset"
    replace: >-
      <meta charset="$|$">

  - trigger: "::utf-8"
    replace: >-
      <meta charset="UTF-8">

  - trigger: "::viewport"
    replace: >-
      <meta name="viewport" content="width=device-width, initial-scale=1">

  - trigger: "::meta-author"
    replace: >-
      <meta name="author" content="$|$">

  - trigger: "::meta-desc"
    replace: >-
      <meta name="description" content="$|$">

  - trigger: "::meta-keywords"
    replace: >-
      <meta name="keywords" content="$|$">

  - trigger: "::title"
    replace: >-
      <title>$|$</title>

  - trigger: "::div"
    replace: >-
      <div>$|$</div>

  - trigger: "::html"
    replace: >-
      <html>$|$</html>

  - trigger: "::head"
    replace: >-
      <head>$|$</head>

  - trigger: "::body"
    replace: >-
      <body>$|$</body>

  - trigger: "::a"
    replace: >-
      <a href="">$|$</a>

  - trigger: "::br"
    replace: >-
      <br>

  - trigger: "::button"
    replace: >-
      <button type="button">$|$</button>

  - trigger: "::style"
    replace: >-
      <style>$|$</style>

  - trigger: "::css"
    replace: >-
      <link rel="stylesheet" type="text/css" href="$|$">

  - trigger: "::script"
    replace: >-
      <script>$|$</script>

  - trigger: "::js"
    replace: >-
      <script type="text/javascript" src="$|$"></script>

  - trigger: "::form"
    replace: >-
      <form action="" method="">$|$</form>

  - trigger: "::label"
    replace: >-
      <label for="">$|$</label>

  - trigger: "::submit"
    replace: >-
      <input type="submit" value="$|$">

  - trigger: "::img"
    replace: >-
      <img src="$|$" alt="" />

  - trigger: "::input-text"
    replace: >-
      <input type="text" name="" id="">

  - trigger: "::input-password"

Made with