Sublime Text の新しいテンプレートで .vue を強調表示させます

今回は新しいSublime Textテンプレートで.vueを強調表示するための注意事項をご紹介します。

この記事では、Sublime Text の新しい .vue テンプレートとハイライト表示 (画像とテキストのチュートリアル) を紹介し、みんなと共有し、自分用にメモを残します。

準備

1. ダウンロード インストール 新しいファイル テンプレート プラグイン SublimeTmpl

2. vue 構文ハイライト プラグインをダウンロードしてインストールします Vue Syntax Highlight

Sublime Text のプラグインをインストールするには 2 つの方法があります:

1. Sublime Text 独自のインストール ライブラリ Package Control を使用してインストールします

メニュー バーで [設定] -> [パッケージ コントロール] をクリックするか、ショートカット キー CTRL+SHIFT+P を使用してターミナル ウィンドウを開き、[インストール] を入力して、[パッケージ コントロール: インストールするパッケージのインストール] を選択します

2. ダウンロードして、パッケージ ディレクトリ (環境設定 / パッケージの参照) に直接配置します。 中国語: (環境設定 / パッケージ ブラウザ) フォルダー

1. SublimeTmpl

2. Vue 構文ハイライト

.vue テンプレートを作成し、構文強調表示を取得します

Vue Syntax Highlight をインストールすると、.vue 形式のファイルを開いたときにそのファイルをハイライト表示できるようになります。次に、.vue 形式のファイルを直接作成するためのショートカット キーを設定しましょう。

SublimeTmpl にはデフォルトで 6 つの構文テンプレートしかありません:

1. html ctrl+alt+h

2. javascript ctrl+alt+j

3. css ctrl+alt+c

4. php ctrl+alt+p

5. ruby ctrl+alt+r

6. Python ctrl+alt+shift+p

vue 形式を作成するための新しいテンプレートを追加しました

1.vueファイルテンプレートを作成します

プラグインパッケージのフォルダーを直接開きます Preferences -> Browse Packages

設定 -> パッケージを参照

パッケージフォルダー

テンプレートが保存されているフォルダーテンプレートを開き、任意の項目をコピーして名前を vue.tmpl に変更します

vue.tmplvue.tmpl を作成し、内容を必要なテンプレートに変更します

vue.tmpl コンテンツ

2. 新しいメニューを変更し、新しい vue オプションを追加します

SublimeTmpl の新しいメニューにはデフォルトでは vue がありません

新規 -> 新しいファイル (SublimeTmpl)

[メニュー] オプションをクリックするか、[設定] -> [パッケージ設定] -> [設定] -> メニューを開きます。 メニュー構成項目を開きます

項目をコピーして貼り付け、vue 項目に変更します。

vueアイテムを追加しました

変更を保存すると、vue 項目が新しいメニューに表示されます

vueアイテムが登場

上の画像の新しい vue 項目をクリックすると、以前に設定したテンプレートの内容が表示されますが、構文の強調表示はなく、プレーンテキスト形式です

新しいvueファイルを作成します

3. テンプレート バインディング vue 構文の強調表示

[設定] -> [パッケージ設定] -> [SublimeTmpl] -> [設定] を開きます。 デフォルト設定を開きます

項目をコピーして vue に変更します。パスは次のとおりです

バインディング vue 構文

バインディング構文に関連するファイル パスについては、Sublime Text3DataCache ディレクトリを確認し、vue 強調表示構文プラグイン名を見つけて開いてください

Sublime Text3DataCache ディレクトリ

Sublime Text3DataCachevue-syntax-highlight

新しい vue メニューを再度作成すると、構文が強調表示されます

新しいvueファイルを作成します

4. 新しいvueファイルを作成するためのショートカットキーをバインドします

[設定] -> [パッケージ設定] -> [SublimeTmpl] -> [キー バインド] を開きます。 設定ショートカットファイルを開きます

項目をコピーして貼り付けて、ctrl+alt+v の新しい vue ショートカット キーを作成します

ショートカットキーを作成する

保存後、新しいメニューで利用できるようになります

新しいファイルメニュー

試してみてください、完璧です！

ついに

このファイルはコマンドを設定するためのもののようで、設定方法は上記と同じで、猫をコピーしてトラを描くだけです~

Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands

最後

このようにして、他の言語テンプレートも自分で作成できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がSublime Text の新しいテンプレートで .vue を強調表示させますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。