Sublime Text は新しい .vue テンプレートを作成し、それを強調表示します (グラフィック チュートリアル)_vue.js

この記事では主に Sublime Text の新しい .vue テンプレートとハイライト (画像とテキストのチュートリアル) を紹介します。編集者はこれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

準備

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

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

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

1、Sublime Text 独自のインストール ライブラリ パッケージ コントロールを使用してインストールします

メニュー バーで [設定] -> [パッケージ コントロール] をクリックするか、ショートカット キー 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.tmpl vue.tmpl コンテンツを作成し、必要なテンプレートに変更します

vue.tmpl content

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

SublimeTmpl 図に示すように、新しいメニューにはデフォルトでは vue がありません

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

上の図のメニュー オプションをクリックするか、環境設定を開きます-> パッケージ設定 -> SublimeTmpl -> 設定 - 画像に示すようにメニューを開きます

項目をコピーして、vue 項目に変更します写真に示されています

新しいvue項目を追加します

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

vue項目が表示されます

上の図の vue new 項目をクリックすると、以前に設定したテンプレートのコンテンツが表示されますが、構文の強調表示はなく、図に示すようにプレーン テキスト形式です

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

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

[設定] -> [パッケージ設定] -> [SublimeTmpl] -> [設定] - 図に示すように、デフォルトの設定項目を開きます

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

vue 構文をバインドします

バインド構文に関連付けられたファイル パス、Sublime Text3DataCache ディレクトリを確認して、vue 構文強調表示プラグイン名を探して開きます、写真など

Sublime Text3DataCache ディレクトリ

Sublime Text3DataCachevue-syntax-highlight

メニューで再度新しい Vue を作成すると、図に示すように構文が強調表示されます

新しいビューファイル

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

[設定] -> [パッケージ設定] -> [キー バインド] - 図に示すように、設定ショートカット ファイルを開きます

1 つの項目をコピーし、貼り付けて新しいものを作成します。vue のショートカット キーは、図に示すように ctrl+alt+v です

ショートカット キー

を作成した後、新しい写真にあるように、メニューもあります

新しいファイルメニュー

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

完璧

最後の

ファイルは、上と同じで、猫と虎をコピーするだけです〜

最後のもの

Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands 。このようにして、他の言語のテンプレートも自分で作成できます。

関連する推奨事項:

GBK 形式を開くときに Sublime Text で中国語の文字化けを解決する方法の詳細

使いやすいフロントエンド エディタ -- Sublime Text の詳細な説明

例の詳細な説明Sublime Text バインディングの Eclipse ショートカット キー

以上がSublime Text は新しい .vue テンプレートを作成し、それを強調表示します (グラフィック チュートリアル)_vue.jsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。