Sublime でカスタムコードスニペットを作成する-sublime-php.cn

Sublime でカスタムコードスニペットを作成する

藏色散人

リリース： 2019-10-09 13:58:51

転載

3098 人が閲覧しました

sublime-text では、ファイルタイプが HTML の場合、入力時に!または html:5 を選択し、Tab キーを入力してデフォルトの基本スケルトンコードスニペットを生成します。また、基本スケルトンでよく使用されるカスタムコードスニペットの一部を変更することもでき、保存後、次回使用する必要があるときに、指定したショートカットキーを使用してすばやく生成できます。

次のコラム sublime 入門チュートリアル では、sublime でカスタムコードセグメントを作成する手順を紹介します。

Sublime でカスタムコードスニペットを作成する

#1. 基本的なスケルトンを生成する

Sublime を開いた後、新しいファイルを作成し、必ずファイルタイプを変更してください。右下隅にあるデフォルトのプレーンテキストが HTML に変更されます。次に、! または html:5 と Tab キーを使用して、デフォルトの基本スケルトンコードセグメントをすばやく生成します。

Sublime でカスタムコードスニペットを作成する

#2. カスタムコードセグメントを編集します。

Sublime でカスタムコードスニペットを作成する

# のエントリ関数で使用されます。 jquery キーワード $ は、コードセグメントの文法上のキーワードであるため、カスタムコードセグメント内で直接「$」を使用すると構文エラーが発生し、コードセグメントの生成に失敗します。必要に応じて、コードスニペットで「$」の代わりに「$」を使用できます。後でショートカットキーを使用してコードスニペットを生成すると、「\」エスケープ記号は表示されなくなります。

3. パラメータを設定し、カスタムコードスニペットを保存します。

メニューバーで [ツール] -> [開発] -> [新しいスニペット] を選択してクリックします。このとき、以下に示すように、XML 形式の新しいインターフェイスが生成されます。

Sublime でカスタムコードスニペットを作成する

Hello, ${1:this} is a ${2:snippet}.

ログイン後にコピー

この部分は、コードセグメント内のカーソル位置の構文を設定および制御するよう求めるためのものです。メモした後、このコード行を削除し、編集したばかりのカスタムコードスニペットをコピーして貼り付けることができます。（下図のように3行目の位置に挿入します）。

Sublime でカスタムコードスニペットを作成する

前に指示された構文に従って、生成されたコードセグメント内のカーソルリフト位置を制御できます。これは、その後の編集に便利です。

元のコードセグメントを次のように変更すると、

<title>${1:01}-jquery案例-${2:}</title>
<body> ${3:} </body>

ログイン後にコピー

は、コードセグメントが作成され、ショートカットキーを使用してすばやく生成された後、マークが最初に 01 の前に表示され、簡単に変更および編集できるようにフィールド 01 が選択されることを意味します。次に、もう一度 Tab キーを押すと、jquery- の後にカーソルが表示されます。ここではコンテンツが選択されていないため、コンテンツを挿入しやすくなります。もう一度 Tab キーを押すと、body タグのペアにカーソルが表示され、コンテンツを挿入するときにも便利です。

その後、のコメントを解除し、タグペアにカスタムショートカットコマンドの名前を入力します。次のように。

Sublime でカスタムコードスニペットを作成する

は、新しく作成した HTML ファイルに「myjquery」と入力し、「Tab」と入力すると、カスタマイズされたコードスニペットをすぐに生成できることを意味します。

編集が完了したら、保存します。 ctri を直接使用して、デフォルトで sublime インストールディレクトリの [パッケージ] -> [ユーザー] に保存します。カスタムコードスニペットの管理を容易にするために、新しいスニペットフォルダーを作成し、すべてのカスタムコードスニペットファイルをこのフォルダーに保存します。

Sublime でカスタムコードスニペットを作成する