Hei Blog

Movable Typeのこと、いろいろメモっとこうと思ってブログつくりました。

MTタグ入力補完スニペットの Visual Studio Code 版をつくってみました


これは「Movable Type Advent Calendar 2019​」16日目の記事です。

ひとつ前の記事でAtom版のMTタグ入力補完スニペットを作った話を書いたのですが、最近のエディタ界では Visual Studio Code の評判がいいというのを聞いていたので、そちらでもスニペットが使えると便利かなーと思って作成にチャレンジしてみました。


使い方

VSCodeのメニューから「基本設定」→「ユーザー スニペット」と選択し、「html」と入力すると「html.json」が開きます。
ここに、下記の Gist コードをコピペしてください。



Gist のコードは、リンク先を開くとコードの右上に「Raw」ボタンがあるので、それをクリックして生ファイルを表示させてからすべてコピーすると良いと思います。

また、開いたファイルは JSON 形式になっていますので、まるごと上書きしていただくか、開始と終了の の間に貼り付けるようにしてください。
既に何か記述している方は、既存の内容の最後に「 , 」を追加してから、そのうしろに Gist のコードの の内側を貼り付けるとうまくいくと思います。

ちなみに、行頭に「//」をつけてコメントしてあるところがあるのですが、一般的なJSONファイルではエラーになってしまうと思いますが、VSCodeのスニペット設定用の JSON では大丈夫なようなので、気にせず貼り付けちゃってください。
(もしエラーになるようでしたら、お手数ですが // の付いた行を削除してください)




拡張子の関連付け

これだけだと、拡張子が html のファイルでしかスニペットが使えませんので、これをMTのテーマで使われている mtml のファイルにも関連付けしておきましょう。

VSCodeのメニューから「基本設定」→「設定」と選択し、開いた画面の右上にあるファイルのマークをクリックすると、「setting.json」というファイルが開きます。

このJSONファイルの中に、下記の設定を追加してください。

"files.associations": {
    "*.mtml": "html"
}



すると、拡張子が mtml のファイルでも htmlファイルと同様にスニペットを使うことができます。

まとめ

個人的にはまだ Atom を使っているのですが、この機会に VSCode もいろいろさわってみて、よさそうなら乗り換えようかなーとも思っています。

VSCode で MTML を書かれている方がいらっしゃいましたら、ぜひ使ってみてください!


スポンサードリンク




コメント

お名前 必須

名前を入力してください。

メールアドレス

正しいメールアドレスを入力してください。

URL

正しいURLを入力してください。

タイトル

タイトルを入力してください。

タイトルに不適切な言葉が含まれています。

コメント必須

コメントを入力してください。

コメントに不適切な言葉が含まれています

パスワード必須

パスワードを入力してください。

パスワードは半角小文字英数字で入力してください。

Cookie

RSS 2.0 Login