Code Monkey home page Code Monkey logo

vue-volarjs-independent-language-server-starter's Introduction

language-tools-starter

This is a template for building Embedded Language Tools based on Volar Framework.

If you're working on something like this, you probably started with VSCode's Embedded Programming Languages chapter. If not, I strongly suggest you read it carefully first.

The article mentions two methods to implement Embedded Language support. This template belongs to the extension of the "Language Server for Embedded Language with Language Services" method, but we abstract all the places you don't need to care about, such as virtual code mapping, formatting edits merge etc.

Same with the article, this template uses .html1 as an example to implement embedded HTML and CSS support.

Tools

  • pnpm: monorepo support
  • esbuild: bundle extension

Running the Sample

  • Run pnpm install in this folder. This installs all necessary npm modules in both the client and server folder
  • Open VS Code on this folder.
  • Press Ctrl+Shift+B to compile the client and server.
  • Switch to the Debug viewlet.
  • Select Launch Client from the drop down.
  • Run the launch config.
  • If you want to debug the server as well use the launch configuration Attach to Server
  • In the [Extension Development Host] instance of VSCode, open a test.html1
    • Type <d| to try HTML completion
    • Type <style>.foo { c| }</style> to try CSS completion
    • Have <style>.foo { }</style> to see CSS Diagnostics

Build .vsix

  • Run pnpm run pack in this folder
  • packages/vscode/vscode-html1-0.0.1.vsix will be created, and you can manual install it to VSCode.

References

vue-volarjs-independent-language-server-starter's People

Contributors

johnsoncodehk avatar suica avatar

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.