WebStorm/PhpStormでCSSを書くのがちょっと楽になるかもしれないTips

⌘B(ctrl+B)でCSSの定義箇所にジャンプする

HTMLのクラスにカーソルを当てた状態で⌘B(ctrl+B)でクラスに適用されているCSSがどの箇所にあるのか表示することができます。

例えば、class="header"にカーソルを当てた状態で実行すると、その定義箇所が.c .header /path/to/style.scss: 100のような形式で、ファイル名と行数を表示してくれます。複数候補がある場合は矢印キーで移動してエンターを押すことで該当の箇所が開きます。対象のファイルを開いているかによって挙動が少し変わるので要注意です。

  • 対象のファイルがタブ上にある場合 => ファイルを表示して、該当する行まで移動します。
  • 対象のファイルがタブ上にない場合 => ファイルを開いて、該当する行まで移動します。
  • 対象のファイルが複数開かれている場合 => 直近で選択していたファイル側のタブで、ファイルを表示して該当する行まで移動します。

BEMを&__Element、&–modifierにしない

Sassを使う場合、BEMを以下のように書くことができますが、上記の⌘B(ctrl+B)が効かなくなるので、&で連結せずに書く方がコーディングしやすいです。

.block {
  // block style

  &__element {
    // element style

    &--modifier {
      // modifier style
    }
  }
}

Sassで変数をネストしない

Sassのmap-get関数を使うと、ネストされた変数を利用できますが、下記のように書くと$text-colorは補完されますが、blackは補完されません。map-getを使うたびに定義を見に行くのは面倒なので、変数はネストしない方がちょっと楽です。(map-getを使っても色はきちんと表示されます。)

$text-color: (
  black: #333
);
@debug map-get($text-color, black); // #333

package.jsonを右クリックしてタスクリストを表示・実行する

package.json, gulpfile.js, Gruntfile.jsは右クリックするとshow npm Scripts(package.jsonの場合)が表示され、クリックすると、タスク一覧を確認することができます。また、タスクが選択されている状態でエンター、もしくはタスクをダブルクリックするとRunペイン(`⌘4(ctrl+4))で実行されます。コマンドを打つときにタスク名を確認する必要がなくなるので少し楽になります。

参考

Markup Languages and Style Sheets

[紹介元] CSSタグが付けられた新着投稿 – Qiita WebStorm/PhpStormでCSSを書くのがちょっと楽になるかもしれないTips

  • コメント

    1. 匿名希望
      2017/08/21(月) 02:09:34

      今週末のタスクの内、残りの
      ・9/10のえくれー新刊プロットと原稿ファイルを作る
      ・Pixiv用の書き掛けのえくれーをリハビリ代わりに完成させる
      をしないままどーばーについてツイートしてたら夕暮れが過ぎてしまった

    2. 匿名希望
      2017/08/21(月) 02:09:34

      【覚えておこう!ショートカットキー】
      <Shift編>

      Shift+スペース 半角スペース

      Shift+Delete ファイルを完全に削除

      Shift+ひらがな カタカナ入力に切替

      Shift+Ctrl+Esc タスクマネージャーを開く

    3. 匿名希望
      2017/08/21(月) 02:09:34

      タスクマネージャーのプロセスから優先順位変えるやつ効果あるんすねえ 通常から高にしたらファイルのやり取りが半分以下の時間で終わった ありがたい

    4. 匿名希望
      2017/08/21(月) 02:09:34

      いろいろ試したけど、結局Onedriveのアプデっぽいやつが一番ディスク容量喰ってるみたい。設定で変えられるといいけどないっぽいし、ファイルを削除してもすぐ復活するので、毎回タスクマネージャーで終了させるのが結局お手軽で効果があるような。

    5. 匿名希望
      2017/08/21(月) 02:09:34

      手書きメモ・音声メモ・タスク・MTG議事録・Webクリップ・写真・Twitterログ・PDFファイル・ライフログ等は全て、外部脳であるEvernoteで一元管理しています。なんでも頬袋に詰め込む時代は終わった。

    記事に戻る

関連記事