WebStormの使い方集（写真と文章）-webstorm-php.cn

WebStormの使い方集（写真と文章）

不言

リリース： 2018-09-29 14:10:30

転載

14272 人が閲覧しました

この記事は、WebStorm の使用方法 (写真とテキスト) をまとめたものです。必要としている友人が参考になれば幸いです。

1. 画像の幅と高さのヒント。

WebStormの使い方集（写真と文章）

普段 HTML を書いているとき、img タグに遭遇すると、画像の幅と高さを知るのに多大な労力を費やす必要がありますか? WS は直接表示されます。

2. タグのリファクタリング、ファイルの名前変更、CSS リファクタリング、および JS リファクタリング

2.1 タグのリファクタリング

次の場合はどうすればよいですか

<p>此处省略200行</p>

ログイン後にコピー

を

<p>此处省略200行</p>

ログイン後にコピー

に変更したいのですが? WS では、カーソルを

または

に移動し、再構築されたショートカットキーを押すだけで簡単に p タグに変更できます。

2.2 ファイル名の変更

style1.css の名前を style2.css に変更したいと考えていますが、style1.css は多くの HTML ファイルによって参照されています。どうすればよいでしょうか?
WS のファイル名変更機能を使用して、ファイル名を大胆に変更すると、すべての参照が自動的に更新されます。 (参照が正しく従来通りであることが条件)

2.3 CSS リファクタリング

さらに、インラインスタイルを外部 CSS ファイルに移動したい場合は、これも必要です。再構成機能によって実現されます。運用環境では HTML にインラインスタイルを記述しませんが、デバッグ中の便宜のためにこれを行うことがよくあります。デバッグが終わったら、当然この機能を使うことになります。

WebStormの使い方集（写真と文章）

(この機能は WS 8.0 で更新されます。詳細についてはコメントを参照してください)
JS リファクタリングもうまく機能します。変数の名前変更、宣言のプロモーションなどを含みます。 WS は、私がこれまで使用した中で最高の JS リファクタリング IDE です。 JS リファクタリングを適切にサポートしている他の IDE を教えてください。比較してみます。

3. 業界の最新テクノロジーのサポート

WS をインストールすると、以下のサポートが組み込まれていることがわかります。 SASS、NodeJS、CoffeeScript、Jade のサポート。
Emmet も内蔵されており、ショートカットキーも Tab なのでとても便利です。この機能がなければ、HTML を書きたくなくなります。
ファイルのサフィックスが .less/.scss/.sass または .coffee であることが判明した場合、自動的に CSS または JS にコンパイルする必要があるかどうかを尋ねられます。
NPM があることが判明すると、管理とアップグレードを容易にするために、インストールされているパッケージが自動的に一覧表示されます。 (これには NodeJS サポートプラグインをインストールする必要があるようです。独自の機能が付属しているかどうかは覚えていません。)

4. カスタマイズ可能なコードの書式設定ルール

多くの IDE にはフォーマット機能がありますが、WS までカスタマイズできるものは見たことがありません。

単一行の { } を保持するかどうか。

単一行関数を保持するかどうか。

属性を揃える必要があるかどうか。

コロンの前後にスペースを追加するかどうか。

……

WebStormの使い方集（写真と文章）

#5. 設定項目が検索可能（英語）
#「この IDE には設定が多すぎるので、長時間いじる必要があります。」

WS はこれを考慮しているため、すべての設定が検索可能です。目的もなく探索するのではなく、設定したいものを何でも検索できます。

外観を設定したい場合は、「外観」を検索します。
ショートカットキーを設定したい場合は、「キーマップ」を検索します。
プラグインを設定したい場合は、「プラグイン」を検索します。
キーマップを入力すると、二次検索を実行することもできます。たとえば、フォーマット機能のショートカットキーを知りたい場合は、format を直接検索します。
逆に、Ctrl L ショートカットキーに対応する機能を検索することもできます。
追記 WS のショートカットキーは 2 回のキー押しをサポートしています。たとえば、Git 追加のショートカットキーを Alt G および Alt A に設定し、Git コミットのショートカットキーを Alt G および Alt C に設定します。この利点は、設定するショートカットキーがなくなることです。

6. 他の IDE にも備わっている機能について説明します。

6.1. WS での編集内容はすべてローカルに保存され、いつでも過去のバージョンに復元できます。

WebStormの使い方集（写真と文章）ただし、これらの履歴は消去される場合があることに注意してください。