This Language Server works for scss/sass or html/jsx file. It has the following language features:
Completions
Diagnostics regenerated on each file change or configuration change
Hover information
It also includes an End-to-End test.
Structure
.
├── client // Language Client
│ ├── src
│ │ ├── test // End to End tests for Language Client / Server
│ │ └── extension.ts // Language Client entry point
├── package.json // The extension manifest.
└── server // Language Server
│ └── src
│ │ ├── interface // TS Types
│ │ └── utils // Util functions
│ │ └── server.ts // Language Server entry point
Running the Extension
Run npm 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 document in 'scss' or 'sass' language mode.
Enter text content such as theme('color.'). The extension will emit completion for this token.
Enter text content such as theme('color.error'). The extension will emit diagnostics error because 'error' not exists in color token.
Enter text content such as theme('color.background.primary') and hover to the text. The extension will show the value of the token.
In the [Extension Development Host] instance of VSCode, open a document in 'html' or 'jsx' language mode.
Enter text content such as <apollo- The extension will emit completion for this component.
Press ctrl + space or press any letter, the extension will give all properties from this component.
Press ctrl + space or press any letter, the extension will give all values from this properties.