[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」はちょっと何言ってるのか分かりません

今回はSCSSファイルのテンプレートを用意したいので、Nameには「SCSS File」、Extensionには「scss」と入力します。その下のダイアログボックにはマルチバイト(日本語)に対応するため以下の1行を入れておきました。

@charset "utf-8";

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

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

webstorm-new-scss04

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone