Vue Prop Viewerこの拡張機能はオフラインで動作します。当然ですが、この拡張機能によってあなたのソースコードがどこか知らないところで利用されたり保存されることはありません。 This extension works offline. Naturally, this extension does not allow your source code to be used or stored anywhere you do not know. これは Vue.js の Props が使いやすくなる拡張機能です。 This is an extension that makes it easier to use Props in Vue.js. I created this because when writing HTML using Vue.js, I found it annoying to open other component files to check the Props definition. This extension has multiple functions.
使い方
When you type 
マウスカーソルを乗せたVue ComponentのPropsを表示します。 Displays the Props of the Vue Component on which the mouse cursor is placed. 
Props に定義されていない文字列を v-bind している場合は警告を表示します。 If you v-bind a string that is not defined in Props, a warning will be displayed. This check is only performed for files that have been opened in VS Code, so the warning will not be displayed for files that have not been opened. 
Props に定義されている文字列が、コンポーネントの利用側で v-bind として記述されていない場合に警告します。デフォルト値が設定されていない Props のみ、この警告が表示されます。 Warn if the string defined in Props is not written as v-bind on the component usage side. Only Props that do not have a default value will display this warning. This check is only performed for files that have been opened in VS Code, so the warning will not be displayed for files that have not been opened. 
動作の前提条件コードについて
import YourVueComponent from '@/components/your-vue-component.vue' Props の書き方は以下の例のどちらでも動作します。 Either of the following examples of how to write Props will work. Example. 1props: ['title', 'likes', 'isPublished', 'commentIds', 'author']Example. 2
props: {
title: {
type: String
},
likes: {
type: String
},
isPublished: {
type: Boolean
},
commentIds: {
type: Number
}
}
警告を表示しない文字列のリスト以下の文字列はProps以外の使い方で、 v-bind:... に続く文字列として指定する可能性があるため、Propsに未定義であっても警告は表示しません。 The following string may be used outside of Props as a string following v-bind:... The following strings may be used outside of Props and may be specified as strings following v-bind:..., so no warning will be shown even if they are undefined in Props. ・v-forを利用する際にv-bind:keyとして利用されるため。
・HTMLの属性として定義されているため。
Have fun with your coding :) |