Date: 2018/10/01

簡単!SublimeText3でPugファイルを扱えるようにする方法

こんにちは、コーダーの足立です。
朝方はすっかり涼しくなってきて長袖で外出しますが昼間暑い気分を味わっています。儘ならねぇ

この記事はPugとSublime textを知っていて、管理ツール「Package Control」がインストール済みなことが前提の方向けの記事になりますがご容赦ください。
・Pugについての詳しい説明はこちらのページが参考になります。
https://blog.mismithportfolio.com/web/20160326pugbegin
・Sublime textのダウンロードとインストールはこちら。
http://www.sublimetext.com/3

Sublime textでは、初期設定ではPugファイルを取り扱うことができません。私自身、初めにPugを使おうとした時使えないやんけ!ってなりました。

s_07

選択肢にないんです…拒否られてるんです…

エディター初心者も初心者だった頃だったので、Google先生にインストール方法を聞いたのですが、方法を探すのにも苦労した覚えがあります。
そのため今回記事としてまとめさせていただきました。

というわけで、タイトル通りテキストエディターである「Sublime text」でPugファイルを扱えるようにする方法をかいていきます。
まず、「Sublime Text」を起動して「Command + Shift + P」を押します。

s_02

すると、このようなPackage Control のフォームとインストールのためのそれぞれのコマンドが表示されます。

s_02

「Package Congrol: Install Package」と入力して、Pugファイルを扱うためのパッケージをインストールするためのフォームに切り替えましょう 切り替わったらPugを扱うためのパッケージをインストールしていきます。
フォームにPugと入力して…

・SublimeLinter-contrib-pug-lint

s_04

・Pug

s_03

の2つをインストールしてみてください。
インストールが完了しましたら、一度エディターを再起動してみれば…

s_05

Pugファイルが使えるようになっています。選択肢に有る!
Pugファイルを扱うようになってから、コーディングが上がりました。とても簡単な手順ですので、取りあえず使えるようにしとこう、から初めてみてはどうでしょうか。
以上、衣替えのタイミングがわからない足立でした。

足立

この記事を書いた人

2017年に成人したてながら、家族を支える鳥取出身の家族大好き娘。なんとなくふんわりと情報系の仕事に興味があった為、デザイン専門学校にてWebデザインを専攻する。講師の谷川から、真面目ぶりが買われてスカウトされ、インターンを経験後、入社を決める。コミュニケーションに対する苦手意識はあるものの、コーディング作業は楽しく、学べる事を嬉しく思っている。実家を離れてからは、趣味のTRPGを思う存分堪能している。現在大阪総合デザイン専門学校の非常勤講師として勤務中。