WebStorm の入門的な使用方法の概要

この記事は、WebStorm の入門的な使用法をまとめたもので、必要な方は参考にしていただければ幸いです。

WebStorm は、JetBrains が 15 年以上かけて開発、改良してきたオープンソース IntelliJ プラットフォーム上に構築されています。多くの一般的なバージョン管理システムで動作する統合 UI を提供し、git、GitHub、SVN、Mercurial、Perforce 全体で一貫したユーザー エクスペリエンスを保証します。 WebStorm はカスタマイズ可能な機能を提供し、ショートカット、フォント、ビジュアル テーマからツール ウィンドウやエディタ レイアウトに至るまで、コーディング スタイルに完全に適合するように調整します。

インテリジェントなコーディング支援

WebStorm は、優れたコードの作成に役立ちます。そのスマート エディターには、コード補完、動的コード分析、コードの書式設定、リファクタリングが備わっており、生産性を向上させ、開発エクスペリエンスをまったく新しいレベルに引き上げます。

サポートされている言語とフレームワーク

WebStorm は、JavaScript、ECMAScript 6、TypeScript、CoffeeScript、Dart、および Flow の最上級のコーディング ヘルプを提供します。

WebStorm は、HTML、CSS、Less、Sass、Stylus コードの作成に役立ちます。

何よりも、Node.js と、React、Angular、Vue.js、Meteor などの一般的なフレームワークの高度なサポートの恩恵を受けられます。

コード インテリジェント アシスタンス

WebStorm はプロジェクトを分析し、アプリケーションで定義されているすべてのメソッド、関数、モジュール、変数、クラスに対して最良のコード補完結果を提供します。コーディング支援はコンテキストを認識し、フレームワーク固有のものにすることもできます。

WebStorm で CSS を使用するときに、プロパティとその値のコード補完をお楽しみください。 Less と Sass では、ミックスインの助けを借ります。もちろん、HTML ではすべてのタグと属性のコード補完が得られます。

コード品質の分析と検出

WebStorm には、サポートされているすべての言語をカバーする何百もの組み込みチェック機能があります。これとは別に、ESLint、TSLint、Stylelint、JSCS、JSHint、および JSLint も使用できます。

WebStorm Editor は、入力時にすべてのエラーと警告を直接報告し、多くのクイックフィックス オプションを提供します。

WebStorm で問題が発生する可能性のあるコード行は、エディタの右側のガターにマークされるため、長いファイル内のエラーや警告を簡単に見つけることができます。

WebStorm を使用して、プロジェクト全体のコード品質分析を実行し、選択したクイックフィックスを自動的に適用することもできます。

WebStorm を使用するためのヒント

• WebStorm のテーマ (フォントとカラー マッチング) を変更する方法:
  ファイル -> エディター -> ; 色&フォント -> スキーム名。テーマのダウンロード アドレス

• ウェブストームの開始時にプロジェクト ファイルを開かないようにする方法:
  ファイル -> 設定 -> 一般削除再開く起動時の最後のプロジェクト。

• WebStorm で中国語を完全に表示する方法:
  [ファイル] -> [設定] -> [外観]、[デフォルトのフォントを上書きする (非推奨)] をオンにし、[名前] を NSimSun に設定します。 、サイズ: 12

• WebStorm で行番号を表示する方法:
  ファイル -> 設定 -> エディターで、「行番号を表示」にチェックを入れると行番号が表示されます。

• WebStorm がコードを自動的にラップする方法:
  ファイル -> 設定 -> エディターで [ソフト ラップを使用] にチェックを入れると、コードが自動的にラップされます

• カーソルをクリックして行末に WebStorm を表示する方法:
  [ファイル] -> [設定] -> [エディタ] 「行末にキャレットを配置できるようにする」のチェックを外すだけです。

• WebStorm ショートカット キーを変更する方法:
  [ファイル] -> [設定] -> [キーマップ] を選択し、ショートカットを変更する機能をダブルクリックします。プロンプト ボックスが表示されます。 、プロンプトに従います

• WebStorm を使い慣れたエディターのショートカット キーに置き換える方法:
  [ファイル] -> [設定] -> [キーマップ]。Visual Studio などの主流の IDE をサポートします。 、Eclipse、および NetBeans。

• JavaScript クラス ライブラリ プロンプト。
  [ファイル] -> [設定] -> [JavaScript] -> [ライブラリ] -> リストからよく使用する JavaScript クラス ライブラリを選択します。

• WebStorm で js を開発する場合、候補オプションを選択するには Ctrl キーを押しながら戻る必要があることがわかりました。
  ファイル -> 設定 -> コード補完 -> 最初の候補を選択します。 「常に」

• #WebStorm の js プロンプトは戦略を設定するのに比較的時間がかかります

  ファイル -> コード補完 -> 次の 1000 から 0 で自動ポップアップ
  

• WebStorm の Git 設定:

  [ファイル] -> [設定] -> [エディタ] -> [github] に移動し、github アカウントを変更します。必要があります。
  

• WebStorm プラグインのインストール:

  [ファイル] ->[プラグイン] をクリックし、強力なプラグインを選択してインストールします (「css-X-fire」)。 firebug を使用して CSS 属性を変更する場合、プラグインはエディターで CSS コードを変更するために使用されます。また、変更も行われます)。

Webstorm の使用体験

• WebStorm のお気に入り機能:
  プロジェクト ディレクトリが非常に大きい場合、いくつかのサブディレクトリが開かれることがよくありますが、その階層は非常に複雑です。この時点で、ディレクトリをお気に入りに追加できます。追加が成功すると、左側の

• WebStorm のブレッドクラム ナビゲーションに「お気に入り」メニューが表示されます。 ##左側を除く プロジェクトページでは、ディレクトリの選択に加えて、トップメニューの下にWebサイトのブレッドクラムナビゲーションと同様のディレクトリがあり、同じ機能を実現します。各ディレクトリをクリックすると、ドロップダウン メニューが表示され、その下のサブディレクトリが表示されます。これは非常に実用的です。
  

• WebStorm のコンストラクター インターフェイス:

  コメントが一致する場合に表示されます。フォーマット。 js ファイルの場合は js クラスの関数とオブジェクト、css ファイルの場合は css ファイルの概要、html ファイルの場合はノードの構造図です。これらは、コードの構造を表示するためのものです。
  

• WebStorm の todo インターフェイス:

  コードに todo コメントを追加すると、このインターフェイスが表示されます
  

• WebStorm の 2 列コード インターフェイス:

  コード タブでファイルを右クリックし、右から垂直に広げる (画面の左と右) または水平に広げる (画面の上部と下部)
  

• WebStorm のローカル履歴機能:

  コードを取得する良い方法
  

WebStorm は git の使用法を統合します

git のみWebstorm は一般的に使用される操作に統合されており、コマンド ライン ツールを完全に置き換えることはできません。どの git ブランチにいるかは、インターフェイスの右下隅で確認できます。クリックして切り替えたり、新しいブランチを作成したりすることもできます。

• 現在のコードとリポジトリ コードの違いを表示します。

  コード インターフェイスの任意の領域を右クリックし、[git ->] を選択して、比較するリポジトリ。
  

#Webstorm ショートカット キーの説明

WebStorm に関連するショートカット キーの編集

##Ctrl Space:

基本的なコード補完 (任意のクラス、メソッド、または変数の名前） 基本的なコード補完（任意のクラス、関数、または変数の名前）、Alt に変更 S

• 
  

  Ctrl Shift Enter：
Complete ステートメント補足現在の完全なステートメント

• 
  

  Ctrl P：
パラメータ情報 (メソッド呼び出し引数内) パラメータ情報にはメソッド呼び出しパラメータが含まれます

• 
  

  Ctrl マウスオーバーcode
Brief Info Simple information

• 
  

  Ctrl F1
キャレットにエラーまたは警告の説明を表示 カーソル位置にエラーまたは警告を表示

• 
  #Alt Insert

  コードの生成... (ゲッター、セッター、コンストラクター) 新しいファイルを作成するか、コードを生成します...コンストラクター関数は、クラス内の任意のフィールドのゲッター メソッドとセッター メソッドを作成できます

• 
  Ctrl O

  メソッドのオーバーライド メソッドのオーバーライド

• 
  Ctrl I

  メソッドの実装 実装メソッド

• 
  Ctrl Alt T

  ... で囲む (if、else、try、catch、for など) * を使用して、選択したコード行を囲みます (* if、while、try catch などが含まれます)

• 
  Ctrl /

  行コメント/コメント行コメント/コメント解除 行コメント/コメント解除

• 
  Ctrl Shift /

  ブロックコメントブロックでコメント/コメント解除コメント/コメント解除

• 
  Ctrl W

  連続して増加するコード ブロックを選択します。コード ブロックを選択します (通常は段階的に選択します)

• 
  Ctrl Shift W

  現在の選択を前の状態に減らす 前のショートカット キーに戻り、選択コードを減らす

• 
  Alt Q

  コンテキスト情報コンテキスト情報

• 
  Alt

  意図アクションとクイックフィックスを表示します意図アクション、クイック結果を表示します

• 
  Ctrl Alt L

  コードを再フォーマットしますテンプレート形式に従ってコードをフォーマットします

• 
  Tab/Shift Tab

  選択した行のインデント/インデント解除 選択した行のインデント/インデント解除

• 
  Ctrl X または Shift Delete

  現在の行または選択した行を切り取るブロックをクリップボードにコピー 現在の行または選択したブロックをクリップボードにコピーします。

• 
  Ctrl C または Ctrl Insert

  現在の行または選択したブロックをチップボードにコピーします。 現在の行または選択したコード ブロックをチップボードにコピーします。クリップボード

• ##Ctrl V または Shift Insert
  クリップボードから貼り付けクリップボードの内容を貼り付けます

• ##Ctrl Shift V

  から貼り付け最近のバッファ バッファ内の最新のコンテンツを貼り付けます
  

##Ctrl D
• 現在の行または選択したブロックを複製します 現在の行または選択したブロックをコピーします

  
  

Ctrl Y
• キャレットの行を削除 カーソル位置の行を削除

  
  

  #Ctrl Shift J
スマート ライン結合 (HTML および JavaScript のみ) スマート ライン結合 (HTML および JavaScript のみ) )

• 
  

  Ctrl Enter
スマート ラインの分割 (HTML および JavaScript のみ) スマート ラインの分割 (HTML および JavaScript)

• 
  

  Shift Enter
新しい行の開始 新しい行の開始

• 
  

  Ctrl Shift U
キャレットまたは選択したブロックで単語の大文字と小文字を切り替えますカーソル位置で大文字と小文字を変換します

• 
  

  Ctrl Shift ]/[
コード ブロックの末尾/先頭まで選択 コード ブロックの末尾/先頭まで選択

• 
  

  Ctrl Delete
単語の末尾まで削除 テキストの末尾を削除

• 
  

  Ctrl Backspace
単語の先頭まで削除テキストの先頭を削除

• Ctrl NumPad /-
  コード ブロックを展開/折りたたむコード ブロックを展開/折りたたむ

• Ctrl Shift NumPad

  すべて展開 すべて展開
  

• Ctrl Shift NumPad-

  折りたたむ すべて折りたたむ
  

• Ctrl F4

  アクティブなエディター タブを閉じるアクティブなエディター タブを閉じる
  

#WebStorm の検索/置換 検索/置換関連のショートカット キー

Ctrl F
• Find 現在のファイル内のコードをすばやく検索します

  
  

Ctrl Shift F
• パス内を検索 指定したファイル内のパスを検索します

  
  

F3
• 次を検索次を検索

  
  

Shift F3
• 前を検索 前を検索

  
  

Ctrl R
• Replace 現在のファイル内のコードを置換します

  
  

  #Ctrl Shift R
パス内の置換 指定したファイル内のコードを一括置換

• 
  

  WebStormの使い方検索関連のショートカットキー

Alt F7 /Ctrl F7

使用箇所を検索/ファイル内で使用箇所を検索 使用箇所を検索/ファイル内で使用箇所を検索

• 
  #Ctrl Shift F7

  ファイル内の使用箇所をハイライト表示 file

• #Ctrl Alt F7
  使用方法を表示

• #WebStorm
  

Alt Shift F10

を使用して実行の使用方法を表示します。構成を選択して実行します アーキテクチャを選択して実行します

• Alt Shift F9
  構成を選択してデバッグしますアーキテクチャを選択して脆弱性をパッチします

• Shift F10
  Run Run

• Shift F9
  デバッグ脆弱性の修正

• Ctrl Shift F10
  コンテキスト構成を実行しますエディタ コンテンツ フレームワークの実行

• Ctrl Shift
  #F8

  ステップ オーバーしても関数に入りません

• 
  F7

  Stepシングルステップ実行への

Shift F7

スマートなステップイン スマートなステップイン

• 
  

  Shift F8
ステップアウト ジャンプアウト

• 
  

  Alt F9
カーソルまで実行 カーソル位置まで実行

• 
  

  Alt F8
式の評価 式の評価

• 
  

  F9
プログラムの再開 プログラムの再起動

• 
  

  Ctrl F8
ブレークポイントの切り替え ブレークポイントの切り替え

• 
  

  Ctrl Shift F8
ブレークポイントの表示 ブレークポイントの表示

• 
  

  WebStorm のナビゲーション位置関連のショートカット キー

• 
  Ctrl N

  Go to class 指定されたクラスにジャンプclass

• 
  Ctrl Shift N

  ファイルに移動ファイル名でプロジェクト内のファイルをすばやく検索

Ctrl Alt Shift N

シンボルに移動 関数の場所を 1 文字で検索

• 
  #Alt 右/左

  次/前のエディター タブに移動 次/前のエディター オプションを入力

• #F12
  前のツールウィンドウに戻る 前のAツールウィンドウに入る

• Esc
  エディタに移動（ツールウィンドウから） からエディタに入るツールウィンドウ

• Shift Esc
  アクティブなウィンドウまたは最後のアクティブなウィンドウを非表示にする アクティブなウィンドウを非表示にする

• Ctrl Shift F4
  アクティブな実行を閉じる/message/find/…tab アクティブを閉じる….Tab

• Ctrl G
  行に移動 行にジャンプ

• Ctrl E
  最近のファイルのポップアップ 最近開いたファイルをポップアップ表示します

• Ctrl Alt 左/右
  前へ/前へ移動 前へ/前へ移動

• #Ctrl Shift Backspace

  最後の編集場所に移動します。 最後の編集場所に移動します。
  

#Alt F1
• 任意のビューで現在のファイルまたはシンボルを選択します。 現在のファイルまたはシンボルの場所を検索します。他のインターフェイス モジュールで選択したコードまたはファイル

  
  

Ctrl B または Ctrl クリック
• 宣言に移動 定義にジャンプ

  
  

Ctrl Alt B
• 実装に移動 メソッド実装に移動

  
  

Ctrl Shift B
• 型宣言に移動 メソッド定義に移動

  
  

Ctrl Shift I
• クイック定義ルックアップを開く クイック定義ルックアップを開く

  
  

Ctrl U
• スーパーメソッド/スーパークラスに移動 ジャンプメソッド/スーパークラス

  
  

Alt Up/Down
• 前/次のメソッドに移動 メソッド間をすばやく移動

  
  

  ##Ctrl ]/[
コード ブロックの末尾に移動/ start コーディング ブロックの末尾/先頭にジャンプします

• 
  

  Ctrl F12
ファイル構造ポップアップ ファイル構造ポップアップ

• 
  

  Ctrl H
タイプ階層 タイプ階層

• 
  # Ctrl Alt H

  呼び出し階層 呼び出し階層

• #F2/ Shift F2
  次/前を強調表示error 次/前のエラーにジャンプし、エラーまたは警告を強調表示します。このショートカット キーを使用して、間違ったステートメント間をすばやく移動します。

• F4/Ctrl Enter
  ソースの編集/ソースの表示 ソース コードの編集/ソース コードの表示

• Alt Home
  ナビゲーションを表示bar ナビゲーションバーを表示

• F11
  ブックマークの切り替え マークの切り替え

• Ctrl F11
  ブックマークをニーモニックで切り替え メモリスイッチマークの使用

• Ctrl #[0-9]
  番号付きブックマークに移動 番号付きブックマークにジャンプ

• #Shift F11

  ブックマークを表示 マークを表示
  

WebStorm のリファクタリング ショートカット キー

• F5

  Copy copy
  

• F6

  Move Move
  

• Alt 削除

  安全な削除安全な削除
  

• Shift F6

  名前の変更名前の変更
  

• Ctrl Alt N

  インライン変数 埋め込み変数
  

• Ctrl Alt M

  メソッド抽出(Javascriptのみ) 関数抽出
  

• Ctrl Alt V

  変数の導入 変数の導入
  

#Ctrl Alt F
• フィールドの導入 フィールドの導入

  
  

Ctrl Alt C
• 定数の導入 定数の導入

  
  

WebStorm VCS/ローカル履歴バージョン管理システム/ローカル履歴関連のショートカット キー

Alt BackQuote ( )
• 'VCS' クイック ポップアップVCS を素早くポップアップ

  
  

#Ctrl K
• プロジェクトを VCS にコミットVCS にプロジェクトを送信

  
  

  # Ctrl T
VCS Update からプロジェクトを更新VCS からのプロジェクト

• 
  

  Alt Shift C
最近の変更を表示最新の変更を表示

• 
  

  WebStorm でよく使用される関連ショートカット キーを使用する

Ctrl Shift A
アクションの検索 エディターの関数を検索して呼び出す

• 
  

  Alt #[0-9]
Open対応するツールウィンドウ インターフェイスモジュールを開くために素早く切り替えます

• 
  

  Ctrl Alt F11
フルスクリーンモードの切り替え全画面モードに切り替えます

• 
  

  Ctrl Shift F12
Toggle 最大化エディター 最大化エディターを切り替えます

• 
  

  Alt Shift F
Add toFavorites 現在のファイルをお気に入りに追加します

• 
  

  Alt Shift I
現在のプロファイルで現在のファイルを検査します。現在のプロパティを使用して現在のファイルを検査します。

• 
  

  Ctrl BackQuote( )
現在のスキームをすばやく切り替えます。既存の組み合わせをすばやく変換します

• 
  

  Ctrl Alt S
設定ダイアログを開く 設定ダイアログを開く

• 
  

  Ctrl Tab
タブとツールの切り替え タブとツールのウィンドウ変換Windows (Windows のショートカット キーと競合)

• 
  

  #

以上がWebStorm の入門的な使用方法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。