WebStorm の設定を複数の端末で共有する

WebStorm の設定、例えばショートカットキーやエディター画面の色、等を Git で管理して、保存、参照することができます。現在の最新版、WebStorm 2017.1 には必要なプラグインが最初から入っています。

同期といってもローカルの設定を変更した場合に、それがリモートのリポジトリに勝手に反映されるのではないようです。ローカルでの変更をリモートのリポジトリに反映させたい場合には、File → Setting Repository から Overwrite Remote してあげればいいようです。

なので運用としては、常にローカルの設定をリモートと同期させておいて、ローカルで設定変更をしたら、それをリモートにプッシュ。でいいのではないでしょうか。

https://www.jetbrains.com/help/webstorm/2017.1/settings-repository.html

Sharing Your IDE Settings

On this page:

Introduction

WebStorm allows you to share your IDE settings between different instances of WebStorm (or other IntelliJ platform-based) products installed on different computers.

WebStorm は、複数の異なるコンピューターにインストールされていても、その設定を共有することができます。

This is useful if you are using several WebStorm installations, or want to implement the same settings among your team members or company-wide.

この機能は次の場合に有用です。例えばウェブストームを複数のパソコンにインストールしている場合や、同じ設定をチームメンバーや会社で共有したい場合です。

Prerequisites

 

Before you start working with Settings Repository, make sure that the Settings Repository plugin is enabled. The plugin is bundled with WebStorm and is activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.

設定保存用のレポジトリでの作業をするまえに、まずは Setting Repository プラグインが有効になっていることを確認してください。このプラグインはウェブストームに最初から含まれており、初期設定で有効になっています。もし有効になっていなければ設定画面のプラグインページで有効にしてください。

Configuring settings repository

If you want to share your IDE settings, perform the following steps:

IDE の設定を共有するためには、次の作業をおこなってください。

  1. Create a Git repository on any hosting service, such as Bitbucket or GitHub.  Git リポジトリを Bitbucket や GitHub といたホスティングサービス上で作成してください。
  2. On the computer where the WebStorm instance whose settings you want to share is installed, navigate to File | Settings Repository. Specify the URL of the repository you’ve created and click Overwrite Remote.
    共有したい設定がされているウェブストームがインストールされているパソコンで次の作業をします。File → Settings Repository → 設定を保存するためのリポジトリのURLを記入します。その上で Overwite Remote を選択して、リポジトリに上書きします。
  3. On each computer where you want your settings to be applied, in the Settings/Preferences dialog, expand the Tools node and choose Settings Repository, specify the URL of the repository you’ve created, and click Overwrite Local.You can click Merge if you want the repository to keep a combination of the remote settings and your local settings. If any conflicts are detected, a dialog will be displayed where you can resolve these conflicts.
    次に、保存した設定を適用させたいパソコンでは次の作業をおこないます。Settings/Preferences → Tools → 先程作り設定を保存したリポジトリの URL を設定します。そして Overwrite Local をクリックしてローカルの設定を上書きします。もしリモートリポジトリの設定と自分のローカルの設定との組み合わせにしたい場合は、Merge を選択します。それによってコンフリクトが発生した場合は、そのコンフリクトを解消するようにダイアログが表示されます。If you want to overwrite the remote settings with your local settings, click Overwrite Remote.
    ローカルセッティングをリポジトリに上書きしたい場合には Overwrite Remote を選択します。

    Your local settings will be automatically synchronized with the settings stored in the repository each time you perform an Update Project or a Push operation, or when you close your project or exit WebStorm.

    ローカルの設定は自動的にリポジトリに保存された設定と、次のタイミングで同期します。プロジェクトをアップデートした時、プッシュした時、プロジェクトを閉じた時、ウェブストームを閉じたときです。

If you want to disable automatic settings synchronization, navigate to File | Settings | Tools | Settings Repository and disable the Auto Sync option. You will be able to update your settings manually by choosing VCS | Sync Settings from the main menu.

設定の自動同期を無効にしたい場合は、File → Setting → Tools → Settings Repository から Auto Sync を向こうにしてください。その場合は、VCS → Sync Setting から手動で同期を行うことができます。

Authentication

On the first sync, you will be prompted to specify a username and password.

It is recommended to use an access token for GitHub authentication. If, for some reason, you want to use a username and password instead of an access token, or your Git hosting provider doesn’t support it, it is recommended to configure theGit credentials helper.

Note that the macOS Keychain is supported, which means you can share your credentials between all IntelliJ Platform-based products (you will be prompted to grant access if the original IDE is different from the requestor IDE).

Configuring a read-only source

Apart from the Settings Repository, you can configure any number of additional repositories containing any types of settings you want to share, including live templates, file templates, schemes, deployment options, etc.

These repositories are referred to as Read-only sources, as they cannot be overwritten or merged, just used as a source of settings as is.

To configure such repositories, do the following:

  1. In the Settings/Preferences dialog, expand the Tools node and choose Settings Repository.
  2. Click /help/img/idea/2017.1/add_icon.png and add the URL of the GitHub repository that contains the settings you want to share.

Synchronization with the settings from read-only sources is performed in the same way as for the Settings Repository.

WebStormのショートカットキー

WebStom のショートカットのリストが英語なので、どの英単語が、どの機能なのかぱっと見わからないので困っていたが、公式サイトにわかりやすく分類された一覧表があった。ラッキー。これを元にショートカットを編集していく。

随時追加します。

ショートカットの設定ファイル

WebStomのショートカットの設定ファイルは次の場所にある。「WebStorm→Preferrence→Keymap」

設定ファイルを簡単に Git で共有するには次の記事を読んで下さい。

WebStorm の設定を複数の端末で共有する

虫眼鏡マークで機能を検索して、ダブルクリックすると編集できる。必要のないものはリムーブし、新たにaddすればいい。

ネストの開閉 Folding

ネストの開閉はFoldingのカテゴリーにまとめられている。畳み込み関係

  • expand 開く
  • collapse 閉じる
  • ノーマルバージョン 今いるラインだけを開閉する
  • Recursively 今いるラインと含まれる階層全てを開閉する

自分用メモ

expand command + (+)
expand recursively command + shift + (+)
collapse command + (-)
collapse recursively command + shift + (-)
置換 command + R
最近使ったファイルの検索 command + E
一行削除 comm + L
一行複製 comm + D
行の始端、終端に移動 comm + 左右
単語の始端、終端に移動 Alt + 左右
移動する時に、移動した範囲を選択する Shift を移動に加える
複数行を選択 shift + 上下
タブを1段階「減らす」 shift + tab
上下の行を入れ替える shift + comm + 上下
単語単位で選択範囲を広げる 早い!!! alt + 上下

ウィンドウ系

エディターに戻る ESC
ツールウィンドウを閉じて、エディターに戻る ESC + SHIFT
最後に開いたツールウィンドウに戻る F12

 

Todo fixme コメント

エディター内で、「コメント用タグ スペース todo スペース 内容」と入力すると  Todo リストとして認識してくれる。例えば .sass 内なら次のように。

// todo あとで直す

これは TODO 設定から細かくエディット可能。デフォルトでは todo と fixme というワードを認識してくれる。追加で以下の画像では test というワードで TODO リストに追加されるように設定してみた。

すると以下のように TODO リストに追加される。

開発中に必要だが、デプロイ時には必ず消しておきたいコメントは、TODO リストとして認識されるようにすることで、消し忘れを撲滅できる。また、書きながら、ここ後で直さなくてはというコメントも気軽に入れられる。

Live Template と JavaScript Postfix Completion

emmet のように、登録しておいた文字列の後に tab を押したらテンプレートを展開してくれる。かなりの頻度で ES6 の class 構文で export/import する書き方を検索しているので、登録した。

https://www.jetbrains.com/help/webstorm/2017.1/live-templates-2.html

Postfix Completion は JS 用にもとから登録されているもので、個人的には「”大声.log”でタブ」とすれば「console.log(“大声”)」になるのが便利。他にも頻繁に使う if 文なども登録されているので毎回書くやつは書かなくていい。