naichi's lab

3日後の自分(他人)への書き置き

JetBrains IDEハンズオンに行ってきた

行ってきた

せっかくjetbrainsのAll Products Packのライセンスを買ったので行ってきた。

samuraism.doorkeeper.jp

感想

めちゃめちゃ便利やないか・・・

ショートカット使いこなすと生産性10倍ぐらいになりそう。

つよい。

ハンズオン

プロジェクト作成

ideaだと static web -> static web

f:id:naichilab:20170907195949p:plain

左下に色々ある

f:id:naichilab:20170907200024p:plain

極力デフォルトで使うといいよって。

ファイル作成(ショートカットで

プロジェクトペイン開閉 cmd+1

ファイル作成 cmd+n

f:id:naichilab:20170907200317p:plain

このようなポップアップは 全て 絞り込める

f:id:naichilab:20170907200351p:plain

index.html作成 f:id:naichilab:20170907200419p:plain

タイトル

赤くなってる箇所はテンプレート展開時に入力を促すもの

f:id:naichilab:20170907200445p:plain

確定はEnter2回

すぐにbodyにカーソルが行く

f:id:naichilab:20170907200553p:plain

デバッグ

プロジェクトペインでindex.htmlを選んで、ctrl+shift+d でデバッグ開始

Windowsはショートカットがないらしい?

f:id:naichilab:20170907200659p:plain

狭い

f:id:naichilab:20170907200821p:plain

Shift + Cmd + F12 でエディタ画面だけを広げられる

f:id:naichilab:20170907200830p:plain

閉じタグは勝手に入る

f:id:naichilab:20170907200920p:plain

タグ名+タブ だけでタグで囲まれる

f:id:naichilab:20170907200957p:plain

aだとhrefも書いてくれたり

f:id:naichilab:20170907201022p:plain

タグ名.クラス名 でクラスも展開できる

f:id:naichilab:20170907201136p:plain

Emmetっていう省略記法

ブラウザ同期

これらはリアルタイムでブラウザに同期されている

f:id:naichilab:20170907201220p:plain

cssを作る

クラス名にカーソルを合わせて、option+enter

create selectorでさらにEnter

f:id:naichilab:20170907201736p:plain

挿入される

f:id:naichilab:20170907201807p:plain

色はエディタに出る

f:id:naichilab:20170907201937p:plain

クリックするとカラーピッカー

f:id:naichilab:20170907201958p:plain

リアルタイムに補間

f:id:naichilab:20170907202152p:plain

パワーセーブモード

リアルタイム補間が止まったり。

バッテリー節約したければどうぞ

f:id:naichilab:20170907202215p:plain

JS

getBigger(n1,n2) 大きい方を返す関数を作る

script:src -> タブ

f:id:naichilab:20170907202412p:plain

これもEmmet

f:id:naichilab:20170907202434p:plain

js作る

option+enter で作れる・・・はずが

バグがある。

f:id:naichilab:20170907202532p:plain

エラーしたら手動で作って。

hello.js

func -> タブ で補間

f:id:naichilab:20170907202640p:plain

getBigger -> Enter

f:id:naichilab:20170907202706p:plain

引数入れてEnter

f:id:naichilab:20170907202733p:plain

次々ナビゲートしてくれるの便利だなー

補間を楽しむ

式だけ書く

f:id:naichilab:20170907202904p:plain

.if をつけてタブ

f:id:naichilab:20170907203002p:plain

ifで囲まれる

f:id:naichilab:20170907203023p:plain

Post Fix Completion

.return もできる

f:id:naichilab:20170907203051p:plain

タブ

f:id:naichilab:20170907203105p:plain

arg2.return -> タブ

f:id:naichilab:20170907203145p:plain

かっこまで選択

f:id:naichilab:20170907203452p:plain

適当に選んで option + 上

f:id:naichilab:20170907203508p:plain

かっこ単位で簡単に範囲選択できる

変数抽出

cmt+opt+v

f:id:naichilab:20170907203627p:plain

変数リネーム

shift + F6

log

.log タブ

f:id:naichilab:20170907203740p:plain

f:id:naichilab:20170907203810p:plain

post fix completion

  • .not
  • .var
  • .if
  • .sout/.echo/.print/.log
    • rubyだけ未対応・・・
  • .for
  • .return

他にも色々

preference -> postfix completion で確認できる

f:id:naichilab:20170907205952p:plain

ここまでで

f:id:naichilab:20170907203941p:plain

直前のファイルを選択

タブをクリックはやめよう

ctrl + tab 押して離す。これで1つ前のファイルに戻る

最近開いたファイルを選択

cmd + e で直近ファイルのポップアップが出る

もちろん絞り込み可能

f:id:naichilab:20170907204152p:plain

ファイルを開く

shift + ctrl + O

Shift 2回

Search Everywhere(どこでも検索)

ファイル名でもクラス名でも関数名でも、なんでも検索できる

ハンズオンに戻る

補間される〜

f:id:naichilab:20170907204439p:plain

cmd + p でインテリセンス開く

f:id:naichilab:20170907204517p:plain

動いた

f:id:naichilab:20170907204629p:plain

getBigger -> max shift + f6 でリネーム

ファイル跨っても問題なし

クラス名のリネーム

shift + F6

f:id:naichilab:20170907204743p:plain

ちゃんと参照関係もみてくれる

ファイル名も。

f:id:naichilab:20170907204858p:plain

データベース

データベースタブからDBに直接接続できる

  • DDL生成 -> テーブル作成とかできる
  • データ閲覧、編集もできる
  • cmd + enter でコミット
  • もちろんDMLも書いて実行できる
    • select 結果を変更してコミットもOK
  • 右クリック -> Transform? で縦横軸入れ替えられる
    • カラムが多くてスクロール大変なときとか便利

マジか・・・

language inspection

他の言語の補間を使いたいとき

  • js内でsqlの補間は効かないが、option -> enter でここはSQLだ!って宣言すると、フィールド名の補間とかも効くようになる

    • SQLから、DBのリファクタリングもできてしまう
      • 危険すぎる場合は接続設定で readonly にしておくと良い
  • option + enter からの language inspection

    • 正規表現も可能
      • 正規表現のテストも可能。これも option + enter check regex

f:id:naichilab:20170907205615p:plain

f:id:naichilab:20170907205639p:plain

  • もちろんjsonも。
    • Edit Json Flagment
    • \n してくれる

f:id:naichilab:20170907205808p:plain

警告とエラー

黄色や赤い箇所は警告とエラー

f:id:naichilab:20170907210144p:plain

これらはUpSource上でも見られる

エラーがないと、エディタ右上に緑のチェックがつく

f:id:naichilab:20170907210332p:plain

他にも

Help -> Productivity Guide

f:id:naichilab:20170907210413p:plain

便利な機能、使った回数とともに見られる。

使ってない機能があればぜひ使ってくださいとのこと

f:id:naichilab:20170907210440p:plain