Git Product home page Git Product logo

Comments (2)

johnsoncodehk avatar johnsoncodehk commented on September 3, 2024 1

Hi @kingyue737, you don't need to use VueLanguagePlugin, please try https://github.com/johnsoncodehk/volar-plugins/tree/master/packages/vue-json.

from services.

kingyue737 avatar kingyue737 commented on September 3, 2024

Hi @johnsoncodehk , I'm learning how to write a volar plugin. I try to specify a Json schema for a specific custom block:

/** @type {import('@volar/vue-language-core').VueLanguagePlugin} */

const schemaUrl = 'https://json.schemastore.org/prettierrc.json'
const blockType = 'route'

const plugin = () => {
  return {
    name: 'example-volar-plugin-json-schema',
    version: 1,

    getEmbeddedFileNames(fileName, sfc) {
      const names = []
      for (let i = 0; i < sfc.customBlocks.length; i++) {
        const customBlock = sfc.customBlocks[i]
        names.push(
          fileName +
            '.customBlock_' +
            customBlock.type +
            '_' +
            i +
            '.' +
            customBlock.lang
        )
      }
      return names
    },

    resolveEmbeddedFile(fileName, sfc, embeddedFile) {
      if (embeddedFile.fileName.replace(fileName, '').match(/^\.(jsx|tsx)$/)) {
        for (const block of sfc.customBlocks) {
          if (block.type === blockType) {
            try {
              block.content = block.content.replace(
                '{',
                `{"$schema":"${schemaUrl}",`
              )
            } catch {
              /* continue regardless of error */
            }
          }
        }
      }
      const match = embeddedFile.fileName.match(
        /^(.*)\.customBlock_([^_]+)_(\d+)\.([^.]+)$/
      )
      if (match) {
        embeddedFile.content[0][2] = -`"$schema":"${schemaUrl}",`.length
      }
    },
  }
}
module.exports = plugin

I don't know if my thinking is correct. It seems that autocompletion, hover and validation, they all work!

image

But when I hover on a property, tip shows twice:

image

The second problem is that the relative path of Json schema in a SFC custom block is related to root of the disk instead of workspace:
image

Maybe we need to implement resolveRelativePath like https://github.com/microsoft/vscode-json-languageservice/blob/e73082b16fe2c7c09ac24a35956efab1e88c699b/src/test/jsonSchemaTestSuite.test.ts#L28 in the built-in json plugin of volar?

Any guidance would be appreciated!

from services.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.