ホームページ > 記事 > ウェブフロントエンド > Sublime Text の新しいテンプレートで .vue を強調表示させます
今回は新しいSublime Textテンプレートで.vueを強調表示するための注意事項をご紹介します。
この記事では、Sublime Text の新しい .vue テンプレートとハイライト表示 (画像とテキストのチュートリアル) を紹介し、みんなと共有し、自分用にメモを残します。
ダウンロード インストール 新しいファイル テンプレート プラグイン SublimeTmpl
vue 構文ハイライト プラグインをダウンロードしてインストールします Vue Syntax Highlight
Sublime Text のプラグインをインストールするには 2 つの方法があります:
1. Sublime Text 独自のインストール ライブラリ Package Control を使用してインストールします
メニュー バーで [設定] -> [パッケージ コントロール] をクリックするか、ショートカット キー CTRL+SHIFT+P を使用してターミナル ウィンドウを開き、[インストール] を入力して、[パッケージ コントロール: インストールするパッケージのインストール] を選択します
2. ダウンロードして、パッケージ ディレクトリ (環境設定 / パッケージの参照) に直接配置します。 中国語: (環境設定 / パッケージ ブラウザ) フォルダー
SublimeTmpl
.vue テンプレートを作成し、構文強調表示を取得します
Vue Syntax Highlight をインストールすると、.vue 形式のファイルを開いたときにそのファイルをハイライト表示できるようになります。次に、.vue 形式のファイルを直接作成するためのショートカット キーを設定しましょう。
SublimeTmpl にはデフォルトで 6 つの構文テンプレートしかありません:
html ctrl+alt+h
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 サイトの他の関連記事を参照してください。