やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

📌 ？
トップ > espanso > espansoでHTML,CSS,JSのテンプレを書く

espansoでHTML,CSS,JSのテンプレを書く

espanso

　espansoはテキスト・エキスパンダ。キー入力したらテキスト出力される。

espano

マッチを書く

~/.config/espanso/user/html.yml

# HTML
name: html
parent: default
matches:
  - trigger: ":html"
    replace: |
        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <link rel="stylesheet" type="text/css" href="style.css">
            <script src="./main.js"></script>
        </head>
        <body>
        </body>
        </html>

  - trigger: ":css"
    replace: |
        @charset "utf-8";
        * {
            margin 0;
            padding 0;
        }

  - trigger: ":js"
    replace: |
        window.addEventListener('load', async(event) => {
            console.log('HelloJS');
        });

espanoを再起動する

　端末で以下コマンドを入力する。

espanso restart

マッチさせる

　テキストエディタなどで:jsと入力すると、以下のテキストが出力される。

　`window.addEventListener('load', async(event) => {
    console.log('HelloJS');
});

　OK！

所感

　これで楽になるだろう。

  • HTMLはいつも面倒
  • CSSはいつも忘れる
  • JSはメソッド名が長くて面倒

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux