Sublime Text にコードスニペットを追加する方法-sublime-php.cn

Sublime Text にコードスニペットを追加する方法

藏色散人

リリース： 2019-09-30 15:03:41

転載

3216 人が閲覧しました

次のコラム sublime の使い方チュートリアル では、Sublime Text にコードスニペットを追加する方法を紹介します。

Sublime Text にコードスニペットを追加する方法

#コードを記述するとき、繰り返し使用する必要があるコードスニペットが必ず出てきます。このとき、コピー＆ペーストを繰り返す必要があり、効率に大きく影響します。この問題はSublime Textのスニペット（コードスニペット）機能を利用することでうまく解決できます。

平たく言えば、よく使用するコードを個別に保存し、プラグインを通じて繰り返し呼び出すことを意味します。

作成方法: [ツール] > [新規スニペット]

この時点で、次のコードが表示されます:

<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
    <!-- <description>description</description> -->
</snippet>

ログイン後にコピー

コンテンツは CDATA でラップされています。この部分は、作成したコードスニペットです。挿入したい、オプション。

tabTrigger は、タブキーによってトリガーされる自動コード補完機能の名前です (オプション)。

scope、オプション。スコープを使用します。空白のままにすると、すべてのファイルに対して有効であることを意味します。添付ファイル：source.cssとtest.htmlはそれぞれ別のファイルに対応します。

description、オプション、スニペットメニューに表示される説明 (中国語をサポート)。定義されていない場合、メニューには現在のファイルのファイル名が表示されます。

${1:this} はコード挿入後のカーソルの位置を示し、同時に複数の挿入が可能です。その中には、これはカスタムパラメーター (オプション) です。

${2} は、コードを挿入した後、Tab キーを押すと、カーソルが順序に従って対応する位置にジャンプすることを意味します (以下同様)。

これで、大体のことは理解できたはずです。次に、自分で例を書き始めましょう。 Sublime では、入力してください!または html:5 を入力してから Tab キーを押すと、HTML 構造が自動的に完成しますが、結果は比較的単純です。結果のコンテンツを自分で展開し、いくつかの mate タグを追加し、ページの説明を追加しました。

<snippet>
    <content><![CDATA[
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="Generator" content="Sublime Text3">
    <meta name="Author" content="dunizb">
    <meta name="website" content="http://www.mybry.com">
    <meta name="Description" content="读你，这世间唯有梦想和好姑娘不可辜负~~">
    <link type="image/x-icon" rel="shortcut icon" href="image/favicon.ico" />
    <script type="text/javascript">
        ${1:}
    </script>
<body>
    ${2:这是html内容}
</body>
</html>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>hjs</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
    <description>custom-html</description>
</snippet>

ログイン後にコピー

次に、コードスニペットを Sublime Text3DataPackagesUser の下に保存し、名前を付けます

Sublime Text にコードスニペットを追加する方法