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/07/20(木) 23:43:34

      ひこーきさんのイラストが好きすぎて誠に勝手ながらマイPCの壁紙にしているんだけども、先日のけむりくんのイラストを壁紙にして、今一番やらなきゃいけないタスクファイルを中央付近に置いたら、けむりくんが私のタスクを無言で見つめている構図が完成してしまった

    2. 匿名希望
      2017/07/20(木) 23:43:34

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

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

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

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

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

    3. 匿名希望
      2017/07/20(木) 23:43:34

      デカイファイルをコピーする、デカイzipを展開する、大量の画像ファイルをリサイズするとかの「洗濯機を回すようなタスク」つーのも、画面に進行状況が表示されてると気になってなかなか別のことを並行してやれんもんだ。デュアルディスプレイの片側に表示をいれて画面消すのが良さそう

    4. 匿名希望
      2017/07/20(木) 23:43:34

      パスワードファイル:データベースの起動や、停止などデータベース管理タスクを実行するユーザを認証するときに使用するファイル。

    5. 匿名希望
      2017/07/20(木) 23:43:34

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

    記事に戻る

関連記事