minapp vscode

WXML - 言語サービス

最新アップデート【CHANGELOG.md】

@iChenLei がこのプラグインのメンテナンスを引き継ぎました。誰でも DingTalk グループまたは Github の問題にコメントを投稿できます。

主な機能

• ワンクリックでミニプログラムコンポーネントを作成
• タグ名と属性のオートコンプリート
• コンポーネントの既存のプロパティに従って、対応するサポートされているプロパティ セットが自動的に除外されます。
• 属性値の自動補完
• テンプレート ファイル内の関数または属性をクリックすると、js/ts が定義されている場所にジャンプします (純粋な wxml または pug ファイルでのみサポートされ、vue ファイルでは完全にはサポートされていません)。
• スタイル名の自動補完 (純粋な wxml または pug ファイルでのみサポートされ、vue ファイルでは完全にはサポートされていません)
• また、vue テンプレート ファイルで自動的に完成することもでき、pug 言語もサポートされます。
• サポートリンク (純粋な wxml または pug ファイルでのみサポートされ、vue ファイルではサポートされません)
• カスタムコンポーネントの自動補完 (純粋な wxml ファイルでのみサポートされ、vue または pug ファイルではサポートされません)
• テンプレート ファイル内の js 変数の強調表示 (純粋な wxml または pug ファイルでのみサポートされ、vue ファイルではサポートされません)
• 組み込みのスニペット
• emmet 記述メソッドをサポート
• wxml フォーマット

自動で完成するテンプレート データはすべて公式ドキュメントからのものであり、スクリプトを通じて自動的に取得されます。

ワンクリックでミニプログラムコンポーネントを作成

• 右クリックしてNew Miniprogram Componentオプションを表示し、コンポーネント名を入力して.wxml / .js / .wxss / .jsonおよびコンポーネント フォルダーをワンクリックで作成します。
• 作成が成功したら、 jsファイルを自動的に開きます

• コンポーネントの作成では、css/wxml/js サフィックスの構成がサポートされています。たとえば、プロジェクトでは、less/vue/ts が使用されます。

 {
  "minapp-vscode.cssExtname" : "less" , // 默认 wxss，支持 styl sass scss less css
  "minapp-vscode.wxmlExtname" : "vue" , // 默认 wxml，支持 vue wpy
  "minapp-vscode.jsExtname" : "ts" // 默认 js，支持 ts coffee
}

タグ名と属性名は自動的に補完されます

• wxml では、タグ補完をトリガーするには<を入力する必要がありますが、pug 言語では、タグの先頭を記述するだけでタグ補完をトリガーできます。
• スペースを入力すると、対応するタグの属性補完がトリガーされます。

コンポーネントの既存のプロパティに従って、対応するサポートされているプロパティ セットが自動的に除外されます。

• ピッカーの mode="selector" の場合、 rangeとrange-key属性があります。
• ピッカーの mode="time" の場合、 start属性とend属性があります。

属性値の自動補完 (オプションの値がある場合にのみ補完がトリガーされます)

• 属性値にスペースを入力するとトリガーでき、完了後にスペースは自動的に上書きされます。

テンプレート ファイル内の関数または属性をクリックすると、js/ts が定義されている場所にジャンプします (純粋な wxml または pug ファイルでのみサポートされ、vue ファイルでは完全にはサポートされていません)。

この機能はまだ完全ではありません。現在のテンプレートと同じ名前のスクリプト ファイルのみを検索するため、JS 内の定義が見つからない可能性があります。

スタイル名の自動補完 (純粋な wxml または pug ファイルでのみサポートされ、vue ファイルでは完全にはサポートされていません)

システムは、現在のテンプレートと同じ名前のスタイル ファイル内のすべてのスタイル名を自動的に取得します。また、グローバル スタイルがある場合は、スタイル名の/** */内のドキュメントを取得することもできます。項目minapp-vscode.globalStyleFilesが指定されました。

• デフォルトでは、現在のテンプレートと同じ名前のスタイル ファイル内の名前が取得されます。

  注: スタイル ファイルが別のスタイル ファイルを@import場合、プログラムはインポートされたファイル内のスタイル名を取得しません。

• さらに、 minapp-vscode.globalStyleFilesを使用していくつかのグローバル スタイル ファイルを指定すると、 class=""を入力した後にこれらのファイル内のスタイル名も表示されるようになります。

  ミニ プログラムの app.wxss は通常グローバル スタイルであるため、 minapp-vscode.globalStyleFiles: ["src/app.wxss"]を構成するなど、この構成を通じて手動で指定する必要があります。

• さらに、 minapp-vscode.styleExtensions使用して、システムで使用されるスタイル ファイルのサフィックスを指定することもできます。

  この項目を設定することをお勧めします。システムはデフォルトでさまざまなサフィックスを持つスタイル ファイルを検索します。不必要なパフォーマンスの低下を避けるために、プロジェクトで使用されているサフィックスに設定することが最善です。

注: sassなどのインデント植字スタイル ファイルはサポートされていません。

また、vue テンプレート ファイルで自動的に完成することもでき、pug 言語もサポートされます。

vue のテンプレート ボードは 2 つのプロパティをサポートしています。

1. lang "wxml"または"pug"に設定して、使用する言語を示すことができます ( vue のようなフレームワークでlang属性を指定すると、コンパイル エラーが発生する可能性があります。代わりにxlang使用できますが、これにより、vue と minapp が完了することになります)同時に）
2. minapp 、使用されるフレームワークを示す"native" 、 "wepy" 、 "mpx"または"mpvue"に設定できます。デフォルトは"mpvue"です。

のように：

• <template lang="wxml" minapp="native">フレームワークを使用せずに wxml 言語を使用することを意味します
• <template lang="pug" minapp="mpvue"> pug 言語を使用し、mpvue フレームワークを使用することを意味します

mpvue で lang="wxml" を指定するとエラーが報告されるため、作成者が修正するまで待つ必要があることに注意してください。ただし、一時的にxlang="wxml"使用することはできますが、これにより vue の自動補完もトリガーされます。

異なる minapp 値を指定すると、対応するフレームワークの自動補完がトリガーされます。私は wepy と mpvue を使用して開発したことがないため、これらの自動補完は公式ドキュメントに従って追加されています。エラーがある場合は、PR を歓迎します。ファイル src/plugin/lib/ language.ts)

サポートリンク (純粋な wxml または pug ファイルでのみサポートされ、vue ファイルではサポートされません)

• デフォルトでは、src タグのみがリンクされ、ファイルが存在する必要があります。存在しない場合、リンクは追加されません。
• minapp-vscode.linkAttributeNamesを構成して、リンクをサポートする追加のタグを展開し、この値を空の配列として構成して、リンク機能を無効にすることができます。
• minapp-vscode.resolveRoots 、相対ディレクトリを使用して画像パスを解決するように構成できます

カスタムコンポーネントの自動補完 (純粋な wxml ファイルでのみサポートされ、vue または pug ファイルではサポートされません)

• 対応するjsonファイル内のコンポーネント情報を自動取得
• カスタムコンポーネントの優先順位付け
• コンポーネント内のプロパティの説明を自動的に取得する

テンプレート ファイル内の js 変数の強調表示 (純粋な wxml または pug ファイルでのみサポートされ、vue ファイルではサポートされません)

• 強調表示はデフォルトではオフになっています。 minapp-vscode.disableDecorateをtrueに設定すると、強調表示がオンになります。
• デフォルトのハイライト色は紫です。minapp minapp-vscode.decorateTypeを設定して、 {"color": "red"}などの好みの色を使用できます。
• デフォルトでは、「{{」と「}}」の間のすべての文字が強調表示されます。 minapp-vscode.decorateComplexInterpolation falseに設定すると、変数 ( foo 、 foo.prop 、 foo[1]など) のみが強調表示されます。は強調表示され、式 ( foo + bar 、 foo < 3など) は強調表示されず、元の色が使用されます。

解析を高速化するために、色の強調表示では正規表現の一致が使用されるため、一致エラーが発生する可能性があります。満足できない場合は、 minapp-vscode.disableDecorateを構成して色の強調表示機能を無効にすることができます。

既知の問題:

• pug 言語のコメント内の変数も強調表示されます (pug はインデントに基づいており、正規表現は扱いにくいです)

組み込みのスニペット

• スワイパー/アイコン/ボタン/ピッカー時間/ピッカー日付/ピッカー領域/チェックボックスグループ/ラジオグループが付属しています。ファイルを参照してください。
• 構成アイテムminapp-vscode.snippetsを通じて独自のスニペットを定義できます。

公式スニペットとの違いは、ここでのスニペットはキーとボディを指定するだけで、キーを元にコンポーネントの説明が自動的に取得されることです（また、設定は後から組み込みデータと組み合わせることができます）。

emmet 記述メソッドをサポート

エメットのチートシート

wxml形式

prettyHtml 、 js-beautify 、 prettierサポート (一部のコンテンツは HTML 互換の方法で記述する必要があります)

• デフォルトのwxml

 "minapp-vscode.wxmlFormatter" : "wxml" , // 指定格式化工具

• js-美化

 "minapp-vscode.wxmlFormatter" : "jsBeautifyHtml" , // 指定格式化工具
// 使用 vscode settings.json 中的 `html.format.[配置字段]` 配置字段, 详见下方 tips.4
"minapp-vscode.jsBeautifyHtml" : "useCodeBuiltInHTML" ,
// 使用自定义配置
"minapp-vscode.jsBeautifyHtml" : { // jsBeautify 默认配置
    "content_unformatted" : "text" ,
    "wrap_attributes" : "force" ,
    "indent_size" : 2 ,
    "wrap_attributes_indent_size" : 2 ,
    "void_elements" : "image,input,video" ,
    "indent_scripts" : "keep"
}

• かなりHTML

 "minapp-vscode.wxmlFormatter" : "prettyHtml" , // 指定格式化工具
"minapp-vscode.prettyHtml" : { // prettyHtml 默认配置
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false ,
  "usePrettier" : true ,
  "wrapAttributes" : false , // 设置成 true 强制属性换行
  "sortAttributes" : false
}

• より美しい

 "minapp-vscode.wxmlFormatter" : "prettier" , // 指定格式化工具
"minapp-vscode.prettier" : { // prettier 更多参考 https://prettier.io/docs/en/options.html
  "useTabs" : false ,
  "tabWidth" : 2 ,
  "printWidth" : 100 ,
  "singleQuote" : false
}

• ヒント:
  1. prettyHtmlおよびprettierモードの場合、プロジェクトの下の設定ファイル (Prettier 設定ファイル.editorconfigが自動的に読み取られます。
  2. 書式設定ツールを切り替えるには、VSCode を再起動する必要があります
  3. prettyHtmlは、 prettierが採用している HTML5 の構文と wxml が完全に一致しているわけではありませんので、互換性に注意して記述してください。
  4. jsBeautifyHtmlの場合、値が"useCodeBuiltInHTML"の場合、構成情報は vscode 構成のhtml.format.*構成フィールド doc から読み取られ、 js-beautify の構成に変換されます。

よくある質問

プラグインのインストール後にオートコンプリートが表示されない

1. インストール後に VSCode を再起動したことを確認してください
2. 現在のファイルの形式が wxml 、 wxml-pug 、または vue であることを確認してください (ファイル接尾辞は構成ファイル内の他のファイル形式に関連付けられている可能性があるため確認できません。下部に表示されるファイル タイプを確認する必要があります) vscodeの右隅)

非ミニプログラム プロジェクトでは、pug ファイルはミニプログラムの自動完了を必要としません。

minapp プラグインは、.pug ファイルをwxml-pugファイル タイプに自動的に関連付けます。したがって、特定のプロジェクトでファイルの関連付けを構成するだけで済みます。

• 非ミニプログラム プロジェクトでは、拡張子 .pug を持つファイルをpugファイル タイプに関連付けます。
• ミニ プログラム プロジェクトで、.pug 接尾辞を持つファイルをwxml-pugファイル タイプに関連付けます。