Using a VueJS LSP in KDE's Kate Editor

The Language Server Protocol (LSP) is a standard protocol for editors and IDEs to communicate with language servers that provide various language services, such as code completions, definitions, references, hover information, etc. LSP allows for a common way for these language services to be implemented and used in a variety of editors and IDEs, providing a better language support experience for developers. The protocol uses JSON-RPC, a remote procedure call (RPC) protocol encoded in JSON, over a standard communication channel, such as stdio or a network socket.

KDE's Kate Editor supports Language Server Protocol (LSP) which transforms it into an incredibly powerful IDE for many languages. In fact, many of the necessary configurations are already built in for the more popular languages, requiring you to only install the corresponding LSP on your system.

I do a lot of work with VueJS and Kate does not have a stock OOTB configuration yet. There is a (relatively) new LSP available to help with Vue specifically called "Volar". This LSP can be setup to work with Kate quite easily and has several useful features:

• Code completions.

• Hover information

• Easy renaming variables across project.

• Vue Template errors (undefined variables, etc).

• Typescript support.

• etc

# Copy this Vue Syntax file across to your Syntax Folder. This is what allows Kate to recognize Vue files and add syntax highlighting.
wget https://raw.githubusercontent.com/mtorromeo/kate-syntax-files/master/vue.xml -O ~/.local/share/katepart5/syntax/vue.xml

# Now, install Volar the LSP for Vue.
sudo npm install -G @volar/vue-language-server

You may have to enable the LSP Client Plugin in Kate if you have not already: Settings -> Configure Kate -> Plugins -> [X] LSP Client.

Once enabled, open Kate and go to: Settings -> Configure Kate -> User Server Settings and copy the following JSON configuration in:

{
   "servers":{
      "vue":{
         "command":[
            "node",
            "/usr/lib/node_modules/@volar/vue-language-server/bin/vue-language-server.js",
            "--stdio"
         ],
         "rootIndicationFileNames":[
            "package.json",
            "package-lock.json"
         ],
         "url":"https://github.com/vuejs/language-tools",
         "highlightingModeRegex":"^Vue.*$",
         "initializationOptions":{
            "typescript": {
               "tsdk": "./node_modules/typescript/lib"
            },
            "languageFeatures":{
               "references":true,
               "implementation":true,
               "definition":true,
               "typeDefinition":true,
               "callHierarchy":true,
               "hover":true,
               "rename":true,
               "renameFileRefactoring":true,
               "signatureHelp":true,
               "codeAction":true,
               "workspaceSymbol":true,
               "completion":{
                  "defaultTagNameCase":"both",
                  "defaultAttrNameCase":"kebabCase",
                  "getDocumentNameCasesRequest":false,
                  "getDocumentSelectionRequest":false
               },
               "documentHighlight":true,
               "documentLink":true,
               "codeLens":{
                  "showReferencesNotification":false
               },
               "semanticTokens":true,
               "diagnostics":true,
               "schemaRequestService":true
            },
            "documentFeatures":{
               "selectionRange":true,
               "foldingRange":true,
               "linkedEditingRange":true,
               "documentSymbol":true,
               "documentColor":true,
               "documentFormatting":true
            }
         }
      }
   }
}

Note that I am using @volar/vue-language-server@1.0.24 - there may be breaking changes in future with the above configuration.

If you are having trouble and would like to debug the LSP, you can export the following variable before starting Kate which will show the JSON-RPC payloads between Kate and the LSP server:

export LSPCLIENT_DEBUG=1
kate