Emmet
Emmet(英語) ツールキットは、HTML、CSS、JSX によるコーディングを強化します。PyCharm を移動せずに Emmet コードテンプレートを使用できます。テンプレートを正しいマークアップに展開するには、その略語(英語)を入力して Tab を押します。Tab を別のキーに置き換えるには、「略語拡張キーを構成する」を参照してください。
例: HTML ファイルで table>tr*3>td*2 と入力し、Tab を押して 3 × 2 テーブルのスタブを取得します。
より複雑な例として、table#myid>tr.row$*3>td*2 と入力して Tab を押して同じテーブルを取得しますが、id 属性と各テーブル行のカスタムクラスを使用します。
詳細は、Emmet チートシート(英語)を参照してください。
PyCharm は、RGBA カラー、暗黙、デフォルト、ブール属性を書き込むための新しい構文、タグの更新アクションなどの機能をサポートしています。
Emmet を有効にして構成する
PyCharm では、ネイティブの Emmet テンプレートに加えて、設定 Ctrl+Alt+S のエディター | ライブテンプレートページの Zen CSS、Zen HTML、Zen XSL ノードにリストされている 200 を超える追加の HTML、CSS、XSL ライブテンプレートを使用できます。
PyCharm を使用すると、Emmet ライブテンプレートを使用およびカスタマイズしたり、カスタムテンプレートを追加したりできます。次のテンプレートテキストを含むテンプレートエントリがあるとします。
エントリのリストを生成するには、 “entry-list<entry[number=$]*5 ″と入力して Tab を押すだけです。デフォルトでは、number 属性は type の前に生成されます。生成される位置をカスタマイズするには、テンプレートに ATTRS 変数を追加する必要があります。たとえば、次のようになります。
ATTRS 変数は、デフォルト値として空の文字列を持つ必要があり、スキップする必要があります。
Emmet でライブテンプレートを使用する
Ctrl+Alt+S を押して設定を開き、を選択します。
開いたライブテンプレートページで、Zen HTML、Zen CSS、または Zen XSL テンプレートグループを展開し、使用するテンプレートの横にあるチェックボックスをオンにします。
リスト内のテンプレートを選択すると、フォーカスはテンプレートテキスト領域に移動し、そこには選択したテンプレートの設定が表示されます。
テンプレートテキストフィールドで、必要なテキストと変数をテンプレート本体に追加します。
変数の編集ボタンをクリックします。開いているテンプレート変数の編集ダイアログで、デフォルト値フィールドにデフォルトの変数値を指定し、必要に応じて定義済みはスキップチェックボックスを選択します。
略語拡張キーを構成する
デフォルトでは、Emmet ネイティブ略語と追加のライブテンプレートは、Tab を押すと展開されます。追加のライブテンプレートについては、PyCharm を使用してデフォルトの拡張キーを再定義できます。このカスタム設定は、ネイティブ Emmet サポートのデフォルト設定を上書きしないことに注意してください。これらのキーのいずれかを使用してテンプレートを展開する機能が得られます。
ネイティブ Emmet の略語の拡張キーを構成する
Ctrl+Alt+S を押して設定を開き、 を選択します。
開いた Emmet ページで、略語を展開するキーリストからデフォルトの Tab の代わりに新しい拡張キーを選択します。
Emmet ライブテンプレートの拡張キーを構成する
Ctrl+Alt+S を押して設定を開き、を選択します。
開いたライブテンプレートページで、Zen HTML、Zen CSS、または Zen XSL テンプレートグループを展開し、目的のテンプレートを選択します。フォーカスはテンプレートテキスト領域に移動します。
展開リストからテンプレートを展開するキーを選択します。
コードのブロックを Emmet テンプレートで囲む
エディターで、囲むコードブロックを選択して Ctrl+Alt+J を押すか、メインメニューからを選択します。
リストから Emmet を選択します。
使用する Emmet の略語を入力し、Enter を押します。
右側のリストに注意してください。下矢印をクリックして、最近適用された Emmet ライブテンプレートの履歴を表示します。
また、色の表示に気をつけてください。有効な Emmet 省略形を入力すると、背景は緑色になります。ただし、存在しない省略形を入力すると背景が赤くなります。
編集ポイント間を移動する
HTML と XML では、編集ポイント間、つまり Emmet テンプレートを適用できるコードのポイント間を移動できます。
キャレットを前の編集点に移動するには、を選択するか、Alt+Shift+[ を押します。
キャレットを次の編集点に移動するには、を選択するか、Alt+Shift+] を押します。
関連ページ：
Emmet
このページでは、HTML、XML、JavaScript (JSX Harmony) ファイル、およびスタイルシートの Emmet 設定を構成します。略語を展開するキーこのリストから、Emmet セレクターを展開するためのデフォルトキーを選択します。このキーは Emmet ライブテンプレートも展開します。Emmet.HTML：XML/HTML Emmet を有効にする XML と HTML の Emmet サポートを有効にするには、このチェックボックスをオンにします。このチェックボックスが選択されていない...
テンプレート変数の編集ダイアログ
ライブテンプレートにユーザー定義変数が含まれている場合は、テンプレート変数の編集ダイアログを使用して、これらの変数を定義する式を構成できます。コントロール：名前このフィールドで、の形式で変数名を表示または編集します。式このフィールドでは、対応するテンプレート入力フィールドの値が自動的に計算されるように式を指定します。この式には、次の構成が含まれる場合があります。二重引用符で囲まれた文字列定数、ライブテンプレートで定義されている他の変数の名前、可能な議論、式を手動で入力するか、リストから定義済み
ライブテンプレートの作成と適用 (コードスニペット)
このチュートリアルの内容は何ですか？ ：PyCharm には、たくさんのライブテンプレートが付属しています。Python には事前に定義されたライブテンプレートがいくつかあり、このチュートリアルでは、Python クラス宣言用のライブテンプレートを作成し、このライブテンプレートを使用する手順を説明します。Python プログラミングはこのチュートリアルの範囲外です。詳細については、Python のドキュメントを参照してください。ライブテンプレートの基本と使用方法もここでは説明しません。ライブテン...
ファイル、フォルダー、テキストソースを比較する
PyCharm を使用すると、ファイル、フォルダー、ローカルファイルとそのリポジトリバージョン、データベースオブジェクト、テキストソース間の違いを確認できます。ファイルを比較：2 つまたは 3 つのファイルを比較するプロジェクトツールウィンドウで、比較するファイルを選択してを選択するか、を押します。または、1 つのファイルを選択し、コンテキストメニューから比較を選択して、プロジェクトの外部にあるファイルを選択します。アクティブなエディターをクリップボードと比較するエディターの任意の場所を右ク...