search

nuxtlabs / vscode-mdc

Provides syntax highlighting and colon matching for MDC (Markdown Components) files for Nuxt Content.
https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
MIT License
64 stars 2 forks source link

Auto complete of props in MDC #24

Open Atinux opened 2 years ago

Atinux commented 2 years ago

It would be great to have the possibility to support the autocompletion of props in the editor.

Atinux commented 1 year ago

I guess we could leverage something similar to what @tahul has done in Pinceau: https://github.com/Tahul/pinceau/blob/main/volar/index.js

By using nuxt-component-meta under the hood?

mrwwalmsley commented 1 year ago

I was wanting to implement autocomplete for my React project at work. I was planning to have auto complete of props as well as directive names by reading the filenames of MDC directive components.

Would it be possible to have a configuration file that can specify all the props available for each directive so that this could work in a React as well as Vue project?

Atinux commented 1 year ago

Did you make the MDC works with React @mrwwalmsley ?

mrwwalmsley commented 1 year ago

Yes, we have been using MDC in a React project for a couple of years -- we extended Remark's MDC implementation.

We had own custom editor & syntax highlighting that was not as good as the Nuxt3 syntax highlighter. When Nuxt3 added MDC I started upgrading my Nuxt side projects from Nuxt2 to Nuxt3 using MDC. After that we started testing the Nuxt plugin for writing our React content in VsCode.

Our MDC implementation has a bunch of custom extensions such as include and define statements:

:::define[template_name]
Hello {{name}}!
:::

:::include[template_name]
name='Mike'
:::

:::include[template_name]
name='Sebastian'
:::

If the includes are not defined locally, then they are loaded from our content DB.