【WebStorm/PhpStorm】新規ファイル作成からSCSSファイルを作成出来るようにテンプレートを用意する

統合開発環境のWebStormPhpStormは、デフォルトでSASS/SCSS(Compass)に対応しています。

ただ、何故か新規ファイル作成メニューにSCSSファイルの項目が無かったので追加することにしました。

これは簡単なテンプレートを用意することで可能になります。この方法を使えば他の拡張子のファイルも作成出来るようになりますね。

SCSSファイル用のテンプレートを用意する

左サイドバーに見えるプロジェクトエリアを右クリックし、「New > Edit File Templates…」を選択します。

webstorm-new-scss01

「File and Code Templates」という名前のウインドウが開きます。左上の緑色のプラス(+)ボタンをクリック。

webstorm-new-scss02'

新しいテンプレートが作成されるのでName(テンプレート名)、Extension(拡張子)、その下のダイアログボックスにテンプレートの中身を記述します。

「Reformat accordinig to style」はちょっと何言ってるのか分かりません
「Reformat accordinig to style」はちょっと何言ってるのか分かりません

今回はSCSSファイルのテンプレートを用意したいので、Nameには「SCSS File」、Extensionには「scss」と入力します。その下のダイアログボックには恒例の

[css firstline=”1″ highlight=””]@charset "utf-8";[/css]

を入れておきましょう。入力し終わったら右下の「Apply」をクリック。そして「OK」をクリックして閉じます。

すると、新規ファイル作成メニューにSCSSファイルが出てきました。でめたしでめたし。

webstorm-new-scss04

最終更新日:2014年9月28日

コメント

「何かそこ違うよ」「こうした方が良い」っていう部分があったら指摘して頂けると嬉しいです。

トラックバック

トラックバックは現在ありません。

Trackback: https://increment-log.com/webstorm-new-scss/trackback/