LS-Sidecar for vue Language

[clacetera]

Description

I'm trying create a LS-Sidecars for vue language but seems not work.

Reproduction Steps

Using Workspace configuration attacched, it's based on instruction on https://www.eclipse.org/che/docs/language-servers.html

changing docker images as follow:

------------------%<---------------------------------------------------------
FROM eclipse/node

RUN sudo apt-get install socat -y &&
sudo npm install -g vue-language-server

CMD socat TCP4-LISTEN:4417,reuseaddr,fork EXEC:"vls --stdio"
------------------%<---------------------------------------------------------

and in config of workspace:

-----------------%<----------------------------------------------------------
"servers": {
"ls": {
"attributes": {
"languageRegexes": "[ {"languageId":"javascript", "regex":".*\\.vue$"}]",
"internal": "true",
"id": "vue-ls",
"type": "ls"
},
"protocol": "tcp",
"port": "4417"
}
-----------------%<----------------------------------------------------------

OS and version:

• Platform: Eclise Che v.6.10
• Vls Server Code version: vue-language-server@0.0.33

Diagnostics:
After lunching workspace and open .vue file

On Dev Machine log says:
2018-09-02 21:22:19,730[rverInitializer] [INFO ] [.a.l.LanguageServerInitializer 113] - Started language servers initialization, file path '/test/test.vue'
2018-09-02 21:22:19,732[rverInitializer] [INFO ] [.a.l.LanguageServerInitializer 129] - Finished language servers initialization, file path '/test/test.vue'

On LS-Machine sproofing with ngrep

user@4f7a3584ed0a:/projects$ sudo ngrep -d eth1 port 4417
interface: eth1 (172.26.0.0/255.255.0.0)
filter: (ip or ip6) and ( port 4417 )

T 172.26.0.3:45414 -> 172.26.0.2:4417 [AP]
Content-Length: 3008....

T 172.26.0.3:45414 -> 172.26.0.2:4417 [A]
{"jsonrpc":"2.0","method":"textDocument/didOpen","params":{"textDocument":{"uri":"file:///projects/test/test.vue","languageId":"javascript","version":0,"text":"\u003ctempla
te\u003e\r\n \u003cv-ons-navigator swipeable swipe-target-width\u003d"50px"\r\n :page-stack\u003d"pageStack"\r\n :pop-page\u003d"storePop"\r\n :options\u003
d"options"\r\n @postpush\u003d"showPopTip"\r\n :class\u003d"{ \u0027border-radius\u0027: borderRadius }"\r\n \u003e\u003c/v-ons-navigator\u003e\r\n\u003c/templ
ate\u003e\r\n\r\n\u003cscript\u003e\r\nimport AppSplitter from \u0027./AppSplitter.vue\u0027;\r\n\r\nexport default {\r\n beforeCreate() {\r\n this.$store.commit(\u0027
navigator/push\u0027, AppSplitter);\r\n },\r\n data() {\r\n return {\r\n shutUp: this.md\r\n }\r\n },\r\n computed: {\r\n pageStack() {\r\n return th
is.$store.state.navigator.stack;\r\n },\r\n options() {\r\n return this.$store.state.navigator.options;\r\n },\r\n borderRadius() {\r\n return new URL
(window.location).searchParams.get(\u0027borderradius\u0027) !\u003d\u003d null;\r\n }\r\n },\r\n methods: {\r\n storePop() {\r\n this.$store.commit(\u0027navi
gator/pop\u0027);\r\n },\r\n showPopTip() {\r\n !this.shutUp \u0026\u0026 this.$ons.notification.toast({\r\n message: \u0027Try swipe-to-pop from left sid
e!\u0027,\r\n buttonLabel: \u0027Shut up!\u0027,\r\n timeout: 2000\r\n }).then(i \u003d\u003e this.shutUp \u003d i \u003d\u003d\u003d 0);\r\n }\r\n }
\r\n};\r\n\u003c/script\u003e"},"text":"\u003ctemplate\u003e\r\n \u003cv-ons-navigator swipeable swipe-target-width\u003d"50px"\r\n :page-stack\u003d"pageStack"\r\n
:pop-page\u003d"storePop"\r\n :options\u003d"options"\r\n @postpush\u003d"showPopTip"\r\n :class\u003d"{ \u0027border-radius\u0027: borderRadius }"\r\n
\u003e\u003c/v-ons-navigator\u003e\r\n\u003c/template\u003e\r\n\r\n\u003cscript\u003e\r\nimport AppSplitter from \u0027./AppSplitter.vue\u0027;\r\n\r\nexport default {\r
n beforeCreate() {\r\n this.$store.commit(\u0027navigator/push\u0027, AppSplitter);\r\n },\r\n data() {\r\n return {\r\n shutUp: this.md\r\n }\r\n },\r\n
computed: {\r\n pageStack() {\r\n return this.$store.state.navigator.stack;\r\n },\r\n options() {\r\n return this.$store.state.navigator.options;\r\n
},\r\n borderRadius() {\r\n return new URL(window.location).searchParams.get(\u0027borderradius\u0027) !\u003d\u003d null;\r\n }\r\n },\r\n methods: {\r\n
storePop() {\r\n this.$store.commit(\u0027navigator/pop\u0027);\r\n },\r\n showPopTip() {\r\n !this.shutUp \u0026\u0026 this.$ons.notification.toast({\r\n
message: \u0027Try swipe-to-pop from left side!\u0027,\r\n buttonLabel: \u0027Shut up!\u0027,\r\n timeout: 2000\r\n })

T 172.26.0.3:45414 -> 172.26.0.2:4417 [AP]
.then(i \u003d\u003e this.shutUp \u003d i \u003d\u003d\u003d 0);\r\n }\r\n }\r\n};\r\n\u003c/script\u003e"}}

T 172.26.0.2:4417 -> 172.26.0.3:45414 [AP]
Content-Length: 127....{"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file:///projects/test/test.vue","diagnostics":[]}}

config.txt

[ghost]

@clacetera ws-agent logs say the LS was successfully initialized. Can you see some menu itens under Assistant? Like code assist, go to definition etc?

[clacetera]

Into editor footer appear UTF/8 text/plain (along an image example)
If you use ctrl+space inside a <script> tag correctly show some code assist (another pic)

The strange if you see ngrep log seems the language server reply correctly

this is code in the editor:

<script> import AppSplitter from './AppSplitter.vue'; </script>

and this is what is trasmitted between containers: ( 172.24.0.2 is LS )

T 172.24.0.3:39548 -> 172.24.0.2:4417 [AP]
Content-Length: 561....

T 172.24.0.3:39548 -> 172.24.0.2:4417 [AP]
{"jsonrpc":"2.0","method":"textDocument/didOpen","params":{"textDocument":{"uri":"file:///projects/test/tes
t2.vue","languageId":"javascript","version":0,"text":"\u003ctemplate\u003e\r\n\u003csample\u003e\u003c/samp
le\u003e\r\n\u003c/template\u003e\r\n\u003cscript\u003e\r\nimport AppSplitter from \u0027./AppSplitter.vue
u0027;\r\n\u003c/script\u003e\r\n"},"text":"\u003ctemplate\u003e\r\n\u003csample\u003e\u003c/sample\u003e\r
\n\u003c/template\u003e\r\n\u003cscript\u003e\r\nimport AppSplitter from \u0027./AppSplitter.vue\u0027;\r\n
\u003c/script\u003e\r\n"}}

T 172.24.0.2:4417 -> 172.24.0.3:39548 [AP]
Content-Length: 128....{"jsonrpc":"2.0","method":"textDocument/publishDiagnostics","params":{"uri":"file://
/projects/test/test2.vue","diagnostics":[]}}

[ghost]

@clacetera I see. The language server works just fine. It's Orion editor that does not bring any syntax coloring to .vue files.

[clacetera]

I' not sure about i'm asking but the language server have to do some command on language server for syntax highlight, trough explicit method ?

It's correct that object in editor remain text/plain and in the command we find params":{"textDocument"} ? Because the only command that is visible when open document is:

textDocument/didOpen:

and langauge server reply with

textDocument/publishDiagnostics

I'm also change the vls with typescript-language-server --stdio (the same used into agents) and have the same behavior.

May be that LS-Sidecars implementation need some extra configuration to enable syntax highlight ?

[clacetera]

@eivantsov do you have any suggestion to make highlight works ?

I made some experiment but all seems to le be considering that in LS-Sidecar highlight is not suppoerted.

How i can investigate more ?

[clacetera]

Hi @eivantsov did you any news or info about how tu successfully check syntax highligh ?

there is an official documentation how what it's implemented in eclipse che ?

[vparfonov]

@clacetera Hi, can you look at OrionHighlightingConfigurationOverlay, maybe it help you

[gorkem]

Closing due to inactivity, please reopen if needed.