add Vue.js support?

[mickaelistria]

It seems like there is a language server for Vue.js. Should we add it to Wild Web Developer? Is it good enough? Is Vue.js popular and sustainable enough to be worth it?...

[mickaelistria]

cc @jabby

[jabby]

I will take this one.
The vue-language-server sources are are here https://github.com/vuejs/vetur/tree/master/server

[mickaelistria]

@jabby build is back to green. What's the status of this one, anything to merge?

[jabby]

Not yet. I would like to provide a basic configuration to vue-language server in order to provide some good completion. Actually, the default behaviour is not really good.
I think I will have some time to spend on it in the beginning of december.

[jabby]

@mickaelistria is that a problem if we have a dependency to gson? I think I will parse a JSON file with default configuration and send the conf to vue-language-server

[mickaelistria]

Not so much. Wild Web Developer already transitively requires GSon which is used by LSP4J. We'd just need a CQ to officialize that we consume it directly though.
Why do you need to parse a default configuration? Is the file pre-existing in Vue.js? If not, couldn't it be just hardcoded in the LS connection provider? Is there strong need for modifying this file at the moment?

[angelozerr]

@jabby GSON is used by LSP4j and it is embed in Eclipse IDE. So I think it will not a problem. After you can use Map like I have doen to intialize JSON Language Server https://github.com/eclipse/wildwebdeveloper/blob/master/org.eclipse.wildwebdeveloper/src/org/eclipse/wildwebdeveloper/json/JSonLanguageServer.java#L70 (uggly code)

I assume you will need some preferences page. I'm interested by this topic because I would like to contribute with XML Language Server lsp4xml which requires preferences too (where we must set the preferences page, formattings preferences page should perhaps exists in lsp4e, but how to add new formatting options, etc?).

[mickaelistria]

There will be no preference page in LSP4E for options or preferences until those are defined in the LSP specification.

[angelozerr]

I mean tabSize and insertSpaces which is part in specification https://microsoft.github.io/language-server-protocol/specification#textDocument_formatting

[mickaelistria]

Ok, those can be in the preference page, and be specified from the extension point also. I guess we could have a "formatting" page which would list the various LS and the default (could be IDE defaults if not set) values which could then be edited by end-user. We need to make sure the PreferenceNode we use are easy enough to bind listeners so specific integration plugin could manipulate those properties or listen to them changing from different preference pages.

[jabby]

Sorry for the delay.
The default configuration is not an existing file in vue-language-server. In fact a part of the default configuration is embedded in package.json

The other part comes from other plugins of vscode.
As you can see here, there is multiple section of the configuration that are send to the language server.
I installed all needed plugins in a vscode and I enabled tracing.
I get the following message

[Trace - 13:33:04] Sending notification 'workspace/didChangeConfiguration'.
Params: {
    "settings": {
        "vetur": {
            "completion": {
                "autoImport": true,
                "useScaffoldSnippets": true
            },
            "grammar": {
                "customBlocks": {
                    "docs": "md",
                    "i18n": "json"
                }
            },
            "validation": {
                "template": true,
                "style": true,
                "script": true
            },
            "format": {
                "options": {
                    "tabSize": 2,
                    "useTabs": false
                },
                "defaultFormatter": {
                    "html": "prettyhtml",
                    "css": "prettier",
                    "postcss": "prettier",
                    "scss": "prettier",
                    "less": "prettier",
                    "stylus": "stylus-supremacy",
                    "js": "prettier",
                    "ts": "prettier"
                },
                "defaultFormatterOptions": {
                    "js-beautify-html": {
                        "wrap_attributes": "force-expand-multiline"
                    },
                    "prettyhtml": {
                        "printWidth": 100,
                        "singleQuote": false,
                        "wrapAttributes": false,
                        "sortAttributes": false
                    }
                },
                "styleInitialIndent": false,
                "scriptInitialIndent": false
            },
            "trace": {
                "server": "verbose"
            }
        },
        "emmet": {
            "showExpandedAbbreviation": "always",
            "showAbbreviationSuggestions": true,
            "includeLanguages": {},
            "variables": {},
            "syntaxProfiles": {},
            "excludeLanguages": [
                "markdown"
            ],
            "extensionsPath": null,
            "triggerExpansionOnTab": false,
            "preferences": {},
            "showSuggestionsAsSnippets": false,
            "optimizeStylesheetParsing": true
        },
        "html": {
            "format": {
                "enable": true,
                "wrapLineLength": 120,
                "unformatted": "wbr",
                "contentUnformatted": "pre,code,textarea",
                "indentInnerHtml": false,
                "preserveNewLines": true,
                "maxPreserveNewLines": null,
                "indentHandlebars": false,
                "endWithNewline": false,
                "extraLiners": "head, body, /html",
                "wrapAttributes": "auto"
            },
            "suggest": {
                "angular1": false,
                "ionic": false,
                "html5": true
            },
            "validate": {
                "scripts": true,
                "styles": true
            },
            "autoClosingTags": true,
            "trace": {
                "server": "off"
            }
        },
        "javascript": {
            "referencesCodeLens": {
                "enabled": true
            },
            "suggest": {
                "completeFunctionCalls": false,
                "names": true,
                "paths": true,
                "autoImports": true,
                "enabled": true
            },
            "validate": {
                "enable": true
            },
            "format": {
                "enable": true,
                "insertSpaceAfterCommaDelimiter": true,
                "insertSpaceAfterConstructor": false,
                "insertSpaceAfterSemicolonInForStatements": true,
                "insertSpaceBeforeAndAfterBinaryOperators": true,
                "insertSpaceAfterKeywordsInControlFlowStatements": true,
                "insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
                "insertSpaceBeforeFunctionParenthesis": false,
                "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
                "insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
                "insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
                "insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
                "insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
                "placeOpenBraceOnNewLineForFunctions": false,
                "placeOpenBraceOnNewLineForControlBlocks": false
            },
            "implicitProjectConfig": {
                "checkJs": false,
                "experimentalDecorators": false
            },
            "suggestionActions": {
                "enabled": true
            },
            "preferences": {
                "quoteStyle": "auto",
                "importModuleSpecifier": "auto"
            },
            "updateImportsOnFileMove": {
                "enabled": "prompt"
            },
            "autoClosingTags": true
        },
        "typescript": {
            "tsdk": null,
            "disableAutomaticTypeAcquisition": false,
            "npm": null,
            "check": {
                "npmIsInstalled": true
            },
            "referencesCodeLens": {
                "enabled": false
            },
            "implementationsCodeLens": {
                "enabled": false
            },
            "tsserver": {
                "log": "off",
                "pluginPaths": [],
                "trace": "off"
            },
            "suggest": {
                "completeFunctionCalls": false,
                "paths": true,
                "autoImports": true,
                "enabled": true
            },
            "reportStyleChecksAsWarnings": true,
            "validate": {
                "enable": true
            },
            "format": {
                "enable": true,
                "insertSpaceAfterCommaDelimiter": true,
                "insertSpaceAfterConstructor": false,
                "insertSpaceAfterSemicolonInForStatements": true,
                "insertSpaceBeforeAndAfterBinaryOperators": true,
                "insertSpaceAfterKeywordsInControlFlowStatements": true,
                "insertSpaceAfterFunctionKeywordForAnonymousFunctions": true,
                "insertSpaceBeforeFunctionParenthesis": false,
                "insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": false,
                "insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": false,
                "insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true,
                "insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
                "insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": false,
                "insertSpaceAfterTypeAssertion": false,
                "placeOpenBraceOnNewLineForFunctions": false,
                "placeOpenBraceOnNewLineForControlBlocks": false
            },
            "tsc": {
                "autoDetect": "on"
            },
            "locale": null,
            "suggestionActions": {
                "enabled": true
            },
            "preferences": {
                "quoteStyle": "auto",
                "importModuleSpecifier": "auto"
            },
            "updateImportsOnFileMove": {
                "enabled": "always"
            },
            "autoClosingTags": true,
            "surveys": {
                "enabled": true
            },
            "useCodeSnippetsOnMethodSuggest": true
        },
        "prettier": {
            "disableLanguages": [
                "vue"
            ],
            "eslintIntegration": false,
            "tslintIntegration": false,
            "stylelintIntegration": false,
            "requireConfig": false,
            "ignorePath": ".prettierignore",
            "printWidth": 80,
            "tabWidth": 2,
            "singleQuote": false,
            "trailingComma": "none",
            "bracketSpacing": true,
            "jsxBracketSameLine": false,
            "parser": "babylon",
            "semi": true,
            "useTabs": false,
            "proseWrap": "preserve",
            "arrowParens": "avoid",
            "jsxSingleQuote": false,
            "htmlWhitespaceSensitivity": "css",
            "endOfLine": "auto"
        },
        "stylusSupremacy": {
            "insertColons": true,
            "insertSemicolons": true,
            "insertBraces": true,
            "insertNewLineAroundImports": true,
            "insertNewLineAroundBlocks": true,
            "insertNewLineAroundProperties": false,
            "insertNewLineAroundOthers": false,
            "insertNewLineBetweenSelectors": false,
            "preserveNewLinesBetweenPropertyValues": false,
            "insertSpaceBeforeComment": true,
            "insertSpaceAfterComment": true,
            "insertSpaceAfterComma": true,
            "insertSpaceInsideParenthesis": false,
            "insertParenthesisAfterNegation": false,
            "insertParenthesisAroundIfCondition": true,
            "insertNewLineBeforeElse": false,
            "insertLeadingZeroBeforeFraction": true,
            "selectorSeparator": ", ",
            "quoteChar": "'",
            "sortProperties": false,
            "alwaysUseImport": false,
            "alwaysUseNot": false,
            "alwaysUseAtBlock": false,
            "alwaysUseExtends": false,
            "alwaysUseNoneOverZero": false,
            "alwaysUseZeroWithoutUnit": false,
            "reduceMarginAndPaddingValues": false,
            "ignoreFiles": []
        }
    }
}

Only the vetur part of the config comes from the vue js client. All other configuration are provided by other plugins.
I don't know what is the best way to provide such configuration to the vue-language-server in Wild Web Developer.

At the end, I would provide preferences pages for managing this configuration.

[mickaelistria]

@jabby Can we have a 1st version that just hardcodes the preferences and later we'll see which ones require to be exposed as dedicated preferences?
Also, have you worked with upstream LS to suggest that the default configuration should be good enough to go without further engineering from adopters? That can be a key factor of success if they want their LS to spread wider and faster.

[jabby]

I will try to add next week. Not sure because I will move from my home to new one in few weeks and I need to pack all my things.

[paulvi]

just 👍 here.

And hoping @jabby moving went with dominantly good feelings.

[davydnorris]

Hi all,

Has there been any further progress in getting the licensing issues sorted out for this? Would really love Vue support in Eclipse!

[jabby]

Unfortunately there is no progress. Please add a comment to this issue vuejs/vetur#1458

[sbernard31]

Hi all, still no update on this ?

[mickaelistria]

At the moment, this IP issues seems not likely to be resolved. Anyone willing to use vetur in an Eclipse IDE plugin should consider building a separate plugin and publishing it as a separate entry on Eclipse Marketplace.

[sbernard31]

Thx for the prompt answer. 🙏
Too bad this issue still blocked just for IP issue 😞.

Regarding :

• https://www.gnu.org/licenses/license-list.html#EPL2
• https://www.fsf.org/blogs/licensing/using-the-gpl-for-eclipse-plug-ins

There is maybe some solution but stylint project seems to be not so active : vuejs/vetur#1458 (comment)

[yennor]

if anybody would know how to do a PR request, they would welcome it
vuejs/vetur#1458

(Unfortunately it would take me forever :-( )

[davydnorris]

All,

Has there been any progress at all in getting this resolved?

[mickaelistria]

No.

[kashyap1113]

Is there any estimated time for this to get sorted and have vue js support in eclipse wild web developer?

[akurtakov]

Right now I'm not aware of anyone working to add support for it so it won't be available until someone dedicates time to work on it.

[mickaelistria]

@kashyap1113 to be clear, the project is waiting for an interested contributor to take care of contributing it. Would you be interested?

[kashyap1113]

@mickaelistria I would love to contribute if I get the opportunity. The thing is, I have used Eclipse but never worked on its development. I would need someone's guidance from time to time as I am completely new to Eclipse development and language servers. I did some research about language server and have understood the concept of it. From @jabby 's comment I have understood that we have to take reference of Vetur which is build in typescript but same way we have to implement it in java and fit it into Eclipse.

I can find reference of integration of other language server at:
LSP Integrations

Could you please share any resources which help me better understand or any topics which I must understand before starting this? Especially related to Eclipse development?

[sebthom]

To get at least syntax highlighting for *.vue files, you can use my plugin https://github.com/sebthom/extra-syntax-highlighting-eclipse-plugin

[mickaelistria]

It was suggested to try Volar Language Server ( @volar/vue-language-server npm package). To try it in Wild Web Developer:

1. add it to org.eclipse.wildwebdeveloper/package.json
2. in org.eclipse.wildwebdeveloper/plugin.xml, define a content-type for vue files, and create a language server definition for Volar and bind the new langauge server with the new content-type
3. Implement in the language server definition what needs to be done to start the language server and also how to connect the streams.

That should be all!

@sebthom if you're willing to contribute some support for vue.js in Wild Web Developer, that would be welcome.

[sebthom]

I am not (yet?) using vue.js myself. Once I do, I may contribute something. No promises made however.

[zulus]

It was suggested to try Volar Language Server ( @volar/vue-language-server npm package). To try it in Wild Web Developer:

Note they recently renamed latest release to @vue/language-server

[zulus]

Working on latest snapshot :D Please tests, so I'll be able to provide potential fixes

[vrubezhny]

@zulus Thanks for the contribution!

Closing the issue as fixed with #1241 .