ホームページ  >  記事  >  開発ツール  >  Sublime Text にコード スニペットを追加する方法

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

藏色散人
藏色散人転載
2019-09-30 15:02:143132ブラウズ

次のコラム 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 にコード スニペットを追加する方法

このようにして、HTML ページに hjs タブを入力します。をクリックすると、この一連のコードが自動的に完成します。

以上がSublime Text にコード スニペットを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。