WebStorm 設定

2022 年になったのに、まだ WebStorm を使っているの？VSCode は良くないの？😤

2022 年になったのに、まだ WebStorm を使っているの？VSCode は良くないの？😤

😂 実際には両方使っています。普段はデモを書くときやドキュメントをフォーマットするときに VSCode を使い、プロジェクトを書くときやソースコードを読むときに WebStorm を使います。私は、両者は IDE とエディタの違いが大きいと思っていて、比較する必要性はあまりないと思います；コードを書くために何を使うかは、そのツールを非常に熟練して使えることが唯一の条件です。重要なのは、あなた自身のコードを書く効率を向上させることです。「君子性非異也，善假于物也」という言葉が表現しているような考え方です。

では、WebStorm のどこが優れているのか、週末に午後を使って「歴史を逆行する」記事を書いて、「WebStorm の最新正規版をどうやって使うか？」「WebStorm を快適に使うためにはどうすればいいか？」「WebStorm の良いところはどこか？」を紹介します。以下の記事では、単語 WebStorm を IntelliJ IDEA に置き換えても適切です。

# 一、WebStorm の最新正規版をどうやって使うか？#

初めて使うときは「WebStorm を 30 日間無料」の特典を利用することを強くお勧めします。使いやすいと感じたら正式版の申請を考え、無駄を防ぎましょう！

# 1. 自費で公式から個人版を購入する#

資金に余裕がある方は、公式サイトで個人版を直接購入できます。初年度は 59 ドルで、以降の更新はかなり安くなります（59->47->35）。更新しなければ、そのまま使い続けることができます。また、個人版は公式によると商業プロジェクトにも使用できるとされています。 一人で使うことを保証するだけで大丈夫です。

# 2. オープンソースプロジェクトを通じて 1 年間の使用を申請する#

理論的には、JetBrains 社は本当に良心的で、オープンソース開発ライセンスの特典を提供しており、みんなが無料で彼らのソフトウェアを使ってオープンソースに貢献できます。一般的に、プロジェクトが 3 ヶ月以上維持されている場合は、ほぼ確実に通過します。こちらから無料ライセンスプログラムにアクセスして申請できます。また、このチュートリアルを参考にすることもできます。オープンソースの申請以外にも、学術ライセンス、ユーザーグループ、開発者イベント、開発者認識の方法で取得することもできますが、すべて「商業プロジェクトには使用できない」ので、使用には注意が必要です。

以上から、資金に余裕があれば個人の正式版を購入し、厳しい場合はオープンソースプロジェクトのプランを利用することをお勧めします。 また、淘宝で自分のメールアカウントの教育版を購入したり、ide-eval-resetterプラグインを使って試用期間を延長するようなグレーゾーンの方法で会社のプロジェクトを開発することはお勧めしません。

# 二、WebStorm を快適に使うためにはどうすればいいか？#

よく使うプラグインをいくつかインストールする

直接 command + , で設定を開き、プラグインを見つけて、コピーしてプラグインマーケットで検索してインストールします：

中国語言語パック：プログラミングをしている人はデフォルトで全て英語にすべきですが、インストール後に以前は英語では「見えなかった」多くのものが一目でわかります。以前、自分が Apple 製品を全て英語で使うように強制していたことを思い出しますが、1 ヶ月続けた後、我慢できなくなりました。理解はできるものの、頭を使って翻訳する時間が必要でした。振り返ってみると、何のためにそんなことをしたのかと思います。ただし、英語を中国語のように反応なしで読むことができる人は無視しても構いません（機能に慣れたら実際に中国語をオフにすることもできます）。
Coderpillr テーマ：とても美しいテーマで、以前は One Dark や Material Theme Ul など多くのテーマを試しましたが、あまり満足できませんでした。実は Dracula テーマが最も好きですが、残念ながらここでは見栄えが良くありませんでした。ちょうど Coderpillr というマイナーなテーマが Dracula スタイルを持っていて、私の心をつかみました。
Key Promoter X：ショートカットキー愛好者のための神器で、ショートカットキーを覚えるのを賢く教えてくれます。
.ignore：どのファイルが ignore できるかを自動的に提示してくれ、新しいプロジェクトのシーンで一つ一つ探す手間を省いてくれます。
WakaTime：少し設定が必要ですが、すべてのコードを書く場所にこのプラグインをインストールすると、どれだけの時間コードを書いたかを簡単に統計できます。詳細は公式サイトを参照してください。

プラグインについては、あまり多くインストールしないことをお勧めします。使用に満足できる程度にとどめ、あまり派手なものは逆に性能に影響を与えることがあります。また、使わないプラグインは無効にすることをお勧めします。

# 2. 文字サイズを変更する#

主に 3 つのよく使う場所を変更する必要がありますが、個人の好みに応じて設定できます（スクリーンショットの説明）：

一つ目は外観フォントで、デフォルトでは少し小さいので、.ApplesystemUIFontを 16 にすることをお勧めします。
二つ目はエディタフォントで、JetBrains Menoを 20、行間 1.16、連続体にしないことをお勧めします。
三つ目はコンソールフォントで、JetBrains Menoを 18、行間 1.14、少しコンパクトにし、連続体にしないことをお勧めします。

# 3. 不要使わないプラグインを無効にする#

引き続き、プラグインのインストールタブで、使わないと思うもののチェックを外して無効にし、使用メモリを減らします。私は多くのプラグインを無効にしましたが、「Code With Me」は使わない場合はオフにできます。「ヘルプ -> 診断ツール -> プラグインメモリの分析」で見ることができますので、選択的に参考にしてください：

# 4. デフォルトメモリを大きく設定する#

現在のメモリ使用量は、下部のバーで確認できます。表示されていない場合は、下部のバーを右クリックして開くことができ、使わない状態表示をいくつかオフにすることもできます（1）。
上部のメニューバーで「ヘルプ -> メモリ設定の変更」を見つけます（2）。M1 は非常に優れているので動かなくても大丈夫ですが、他のものは 4096 に更新すれば大丈夫です（3）。

# 5. よく使うショートカットキーを覚えて設定する#

ここから始めることをお勧めします。ローカルに Git のリリース記録があるフロントエンドプロジェクトを開いてテストし、これを通じて一通り慣れてください。「設定 -> キーボードマッピング」で「Touch Bar に F1、F2 などのキーを表示」をチェックすることをお勧めします。通常のソフトウェアは主編集エリアを最大化するために、操作がメニュー内部に埋もれてしまうため、ショートカットキーを覚えることで、思いつかない状況でも普通のユーザーより 50% 多くのトレンド機能を使うことができます。

よく使う便利なショートカットキーを強制的に多く使って、最終的に筋肉に記憶させることをお勧めします：

  ## 検索と置換操作
  shiftを2回押す             // どこでも検索、ファイル、機能、コードを簡単に検索
  command + f              // 現在のページを検索
  command + shift + f      // グローバル検索フィールド
  command + r              // 現在のドキュメントを置換
  command + shift + r      // グローバル置換フィールド
  ## ビュー表示
  command + 1              // 左側のファイルツリーを表示/非表示
  command + 0              // 現在の未提出コードを表示、提出前のdiffに使用
  command + 9              // 現在のすべてのコミット履歴を表示
  command + 7              // 現在のファイルの構造を表示、特にクラスを見るときに便利
  command + 上矢印         // ナビゲーションバーにジャンプ
  ## コード操作
  command + option + l     // コードをフォーマット（よく使う）
  shift + f6               // ファイル、タグ、変数名をリネーム
  f2, shift + f2           // 上下のエラー位置に切り替え
  shift + Enter             // どんな位置でも自動的に次の行にジャンプ
  option + Enter            // 警告コードの自動修正を迅速に提供
  command + クリック       // コードの呼び出し位置にジャンプ
  command + delete         // 現在の行を削除、command + xでも可
  command + d              // 新しい行と同じコードをコピー
  command + w              // 現在のファイルタブを閉じる
  command + /              // 行コードをコメントアウト
  command + b              // 変数宣言の場所にジャンプ
  command + shift + c      // ファイルのパスをコピー
  command + shift + [ ]    // タブの迅速な切り替え、非常に便利
  command + shift + u      // 大文字小文字を自動的に変換
  command + shift + /      // ブロックコードをコメントアウト
  command + shift + +/- // 現在選択したコードブロックを展開/折りたたむ
  command + shift + v      // クリップボードから選択して貼り付け
  ## git操作
  command + k              // コードのコミットメッセージを記入
  command + option + k     // コードをコミット
  command + option + z     // 現在のコード変更を元に戻す
  command + d              // 2つのファイルを選択して比較、フォルダのdiffツールとして機能

「設定のキーボードマッピング」を見つけて、操作文字「検索」を行い、いくつかの便利なカスタムショートカットキーを設定します。私は左側を縦に揃えるcontrol+shiftを使うのが習慣ですが、自分に合ったものを設定することもできます：
- 最近を開く ：control+shift+rまたはより使いやすいcommand+eに設定します。recent は過去に開発したプロジェクトを迅速に開くことができます。
- 開く.. ：control+shift+oに設定します。open は新しいプロジェクトを開くために使用し、後でcommand+eを使って迅速に起動します。
- プロジェクトを閉じる ：control+shift+wに設定します。現在のプロジェクトの WebStorm ウィンドウを閉じるために使用します。
- ターミナル ：control+shift+iに設定します。iterm コマンドラインウィンドウを開くために使用します。このコマンドは非常に多く使います。
- 注釈 ：control+shift+bに設定します。blame は現在のファイルコードの各行の開発記録を表示します。
- 歴史的なコミット記録を表示 ：control+shift+hに設定します。history は現在のファイルのすべてのコミット変更記録を表示します。
- コードを引き出す ：control+shift+pに設定します。pull は現在のブランチの最新の git コードを取得します。
- ブランチと比較 ：control+shift+dに設定します。diff は現在のファイル / フォルダ（左側のファイルツリーを選択）と過去のブランチを比較し、オンラインの問題を排除するために非常に便利です。
- デモモードを切り替える ：command+option+control+vに設定します。view は特にコードデモや他の人に見せるときに非常に適しています。
- お知らせモードを切り替える ：command+option+control+mに設定します。mute は特に静かにコードを書くときに適しています。
最初はショートカットキーの使用に慣れていない方は、上部メニューバー、エディタ、下部ステータスバー、左側のナビゲーションファイルツリーで右クリックを多く使ってみてください。新しい機能を発見でき、Key Promoter X を使って記憶を助けることができます。

# 6. 使わないかもしれない高度な設定#

普段は問題なく動作している場合でも、WebStorm に付属のターミナルでnpm iを実行した後、特に node_modules ファイルのインデックスが多くの変化を引き起こし、応答しなくなる問題が発生することがあります（良いコンピュータでは一般的に問題ありません）。その場合、私が何度も調整した高度な設定を試してみてください。

上部メニューで「ヘルプ -> カスタムプロパティを編集」を見つけ、idea.propertiesファイルを開き、以下のように編集します：

  idea.cycle.buffer.size=4096
  idea.max.intellisense.filesize=50

引き続き「ヘルプ -> カスタム VM オプションを編集」でwebstorm.vmoptionsファイルを開き、以下のように編集します：

  -ea
  -server
  -Xms2048m
  -Xmx8192m
  -Xss16m
  -XX:MaxMetaspaceSize=2G
  -XX:MetaspaceSize=1G
  -XX:ConcGCThreads=8
  -XX:ParallelGCThreads=8
  -XX:NewRatio=2
  -XX:ReservedCodeCacheSize=240m
  -XX:+AlwaysPreTouch
  -XX:+UseG1GC
  -XX:+DoEscapeAnalysis
  -XX:+TieredCompilationUseG1GC
  -XX:SoftRefLRUPolicyMSPerMB=50
  -XX:+UnlockExperimentalVMOptions
  -Dsun.io.useCanonPrefixCache=false
  -Djava.net.preferIPv4Stack=true
  -Dsun.io.useCanonCaches=false
  -XX:LargePageSizeInBytes=256m
  -XX:+UseCodeCacheFlushing
  -XX:+DisableExplicitGC
  -XX:+ExplicitGCInvokesConcurrent
  -XX:+AggressiveOpts
  -XX:+CMSClassUnloadingEnabled
  -XX:CMSInitiatingOccupancyFraction=60
  -XX:+CMSParallelRemarkEnabled
  -XX:+UseAdaptiveGCBoundary
  -XX:+UseSplitVerifier
  -XX:CompileThreshold=10000
  -XX:+OptimizeStringConcat
  -XX:+UseStringCache
  -XX:+UseFastAccessorMethods
  -XX:+UnlockDiagnosticVMOptions
  -XX:+HeapDumpOnOutOfMemoryError
  -XX:-OmitStackTraceInFastThrow
  -Djdk.attach.allowAttachSelf=true
  -Dkotlinx.coroutines.debug=off
  -Djdk.module.illegalAccess.silent=true
  -XX:+UseCompressedOops
  -Dfile.encoding=UTF-8
  -XX:CICompilerCount=2
  -Xverify:none

最後に、上部メニューバーで「ファイル -> キャッシュをクリア..」を見つけ、WebStorm を再起動した後、再度npm iを実行して、多くの依存関係をインストールしても問題が発生しないか確認してください。

上記のことに慣れたら、右下のステータスバーでアカウントにログインして同期することを強くお勧めします。設定が失われるのを防ぎ、しばらく使用した後、WebStorm が徐々に良くなっていくのを実感するでしょう。

# 三、WebStorm の良いところはどこですか？#

# 1. 世界で最も使いやすい Git 管理ツール#

この行のコードは誰が書いたのかを見る：これを git blame とも呼び、ショートカットキーはcontrol+shift+bです。または、コード行数の数字を右クリックして「Git Blame 注釈を使用」を選択すると、以下のような効果が得られます。同時に、対応する名前をクリックすると、その時のコミットの詳細記録が表示されます。
コミット前に CR コードの変更を確認する：この習慣を維持することを強くお勧めします。コミットする前に変更を比較するためのショートカットキーはcommand + 0です。この diff 比較は非常に明確で、うっかりミスを見つけるのも簡単です。このような効果を確認した後、command+kでコミットメッセージを記入し、command+shift+kでコードをコミットします。コミットが完了したら、command+1でコード開発に戻ります。
現在のすべてのコミット記録を確認する：ショートカットキーcontrol+shift+hを使用すると、すべての履歴コミット記録を確認できます。特定のファイルやフォルダだけを見たい場合は、それを選択してショートカットキーを押すか、右クリックして git の「履歴を表示」を選択します。
現在のブランチとメインの変更点を確認する：これは私が最も便利だと思う機能で、「救命操作」とも呼ばれます。例えば、オンラインで問題が発生した場合、最新のバージョンと前のバージョンのすべてのコード変更点を比較するのに役立ちます。また、マスターをマージする前の最終的な CR にも非常に適しています。ショートカットキーはcontrol+shift+dで、対応するフォルダを右クリックして git の「ブランチと比較」を選択すると、以下のような効果が得られます。F7 を押すと次の変更点を確認できます。有名な Tower、Sourcetree、Sublime Merge、Fork などの Git 管理ツールを試しましたが、正直言ってこれに勝るものはありません。

# 2. 安定したリファクタリングとコード最適化の神器#

ファイルや変数のリネームは、すべての呼び出しも自動的に変更します：ショートカットキーはshift+f6で、ファイルや変数を右クリックしてリファクタリングを選択することもできます。変更後、すべての場所が自動的に変更されます。
ファイルの変更位置後、呼び出しの参照も自動的に変更されます。
ファイルを削除する前に、呼び出しがクリアされているかどうかを確認します：ファイル上でcommand+deleteを試してみると、どこでまだ使用されているかを示してくれます。
スペルミス、文法エラー、優雅でないコードには警告が表示されます：option+Enterを押すと、提案に従って修正できます。時々、スペルミスは独自の単語である可能性があるため、その単語を WebStorm の辞書に保存できます。
特定のコードブロックをメソッドとして抽出することができます：メソッドに抽出できるコードブロックを見つけて選択し、command+option+mを押すと、メソッドを抽象化し、自動的にメソッド名を提案してくれます。
Prettier をデフォルトのフォーマッタとして使用することができます：この機能は、他の同僚との VSCode 開発シーンでのコードフォーマットを一致させるのに役立ちます。設定デモはこちらをご覧ください。
どのコードが最適化できるかを教えてくれます：特に重複コードの警告を見つけるツールは非常に優れています。ここで @呐萨 FR に感謝します、最適化できるコードがあります。

# 3. インテリジェントな提案が本当に強力#

現在のパッケージ情報を表示：対応するインポートパッケージの上にマウスを置くと、そのパッケージの README が表示され、使用方法を確認できます：
機械学習によるコード提案：コードを書く過程で、現在のWebStorm 2021 は、すべての人のコード習慣を学習してコード提案機能を最適化します。シンプルなコード提案をサポートしており（VSCode では時々使わない提案が多く表示されることがあります）、しばらく使用すると徐々にその効果を実感できます。

# 4. トレンド機能 Code With Me で他の人のコードをリアルタイムでデバッグ#

以前、同僚のコードの問題を調査したことを思い出します。特に一緒に座っていないシーンでは、まず彼にコード権限を追加してもらい、コードをクローンし、ブランチを切り替え、npm i を実行し、どこに問題があるかを教えてもらう必要がありました。ここで多くの時間が無駄になりました。
時々、Mac を使ってリモートコントロールすることもありますが、ここでの体験は非常に悪く、多くの場合、カクつきやフレーム落ち、反応が遅く、動きが取れない感じになります。コードをデバッグすることは言うまでもありません。
この Code With Me を使うことで（有効にする必要があります）、相手が URL を共有すると、自動的に相手のコードとインストールされた依存関係があなたの WebStorm に同期されます。あなたがローカルで変更すると、相手のコンピュータも変更されます。さらに、二人でビデオ会議を通じて問題を話し合うこともできます。ほぼネイティブのように瞬時に開く体験が得られます。詳細は公式動画をご覧ください。左側がローカルの WebStorm、右側が協力者の Code With Me で、二台のコンピュータが協調している効果を示しています。

# 5. まだまだたくさんのサプライズ機能があります#

明確な node_modules を提供：VSCode を使っている多くの人が困惑しているかもしれませんが、私の node_modules は全く見つからないのに、WebStorm では非常に明確です。ここでは、より良く最適化できることを示しており、無駄なものが表示されないようにすることもできます。詳細は説明をご覧ください：
左側が WebStorm、右側が VSCode（ただし、Node Modules Context Menu というマイナーなプラグインを使えば解決できます）。
独特のデモモードと集中モード：カスタムショートカットcommand+option+control+vを使って開くことができ、「ビュー -> 外観 -> デモモードに入る」で見つけることができます（設定 -> 外観 -> 最下部でデモモードのフォントを 28 に設定できます）。コードをデモする際に下が見えにくいという困惑を避けることができます。カスタムショートカットcommand+option+control+vを使ってお知らせモードに入ることもでき、「ビュー -> 外観 -> 集中モードに入る」で真剣にコードを書くことができ、非常に明確です。最初はデモモード、次はお知らせモードです。

最初に言ったように、操作効率を高めることは、どのツールを使うかではなく、どのツールを熟練して使うかにかかっています。また、常に使用するソフトウェアに対して、徐々にショートカットキーの使用に慣れ、マウスから離れていくことをお勧めします。面白いことが起こるでしょう。