Zenn
🔧

VSCodeでRiot.jsのシンタックスハイライト＋フォーマット+自動で閉じタグを追加

2022/01/16に公開
VS Code
Riot.js
tech

この記事はQiitaに投稿していたものです。初版:2020年12月13日

軽量なフロントエンドフレームワークの一つであるRiot.jsをVSCodeで編集しやすくするためのメモ。

手順

1. VSCode拡張をインストール

以上の3パッケージを導入する。

2. setings.jsonの編集

Ctrl+Shift+Pでsetings.jsonを検索し、そこに以下を追記。

{
    "files.associations": {
        "*.tag": "htmltag",
        "*.riot": "htmltag"
    },
    "beautify.language": {
        "html": ["htm", "html","htmltag"]
    },
    "[htmltag]": {
        "editor.defaultFormatter": "HookyQR.beautify",
        "editor.formatOnSave": true
    },
    "auto-close-tag.activationOnLanguage": [
        "htmltag",
    ]
}

以上で3つの機能が使えるようになっている。

3. 追加設定(オプション)

閉じタグのスラッシュを入力したタイミングで補完する設定が良ければ、以下も加えて追記する。

    "auto-close-tag.SublimeText3Mode": true

また、以下も加えて追記すればJavaSciptはPrettier、riotはbeautifyなどとフォーマッターを共存させることもできる。

"[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
}

これは余談になるが、Prettierは指定された拡張子以外を登録する方法が分からなかったため、今回はBeautifyを利用することにした。

参考記事

Discussion