Skip to content

Vue Language Server (VLS)

Jump to bottom Edit New page
Arnold Chand edited this page Jul 13, 2020 · 3 revisions

Vue language server

This is guide on how to integrate vue-language-server with LanguageClient-neovim.

Requirements

Installation

Install vls via terminal (sudo might be required if permission was denied):

npm i vls -g

Install eslint and eslint-plugin-vue (optionally eslint-prettier for formatting)

The language server uses eslint-plugin-vue and eslint-prettier as it's internal tools that it would depend on the project to provide. Vetur, VS Code's vue extension already provides this dependency with it, but that is not the case with vls, which is the bare-bones version of Vetur. However while not required and if problems persist, then you may still have to install eslint and eslint-plugin-vue inside your project root for vls to work properly. This is because the language server will crash if it does not find those requirements. The easy way to install these into your project would be to run the eslint init command inside your project and make sure to select Vue.js as the framework, any other selections are optional:

npx eslint --init # Follow the steps, but make sure you select Vue.js as the framework

Client Configuration

Vue language server will provide the binary vls on your global $PATH. To get vls to run on any .vue file, add the server commands option:

" .vimrc/init.vim

let g:LanguageClient_serverCommands = {
    " other server commands...
    \ 'vue': ['vls'],
    \ }

If not installed globally, you can specify the exact path of the executable by replacing ['vls'] with ['/path/to/your/vls'].

If all goes well then vls should start working once you open a .vue file in vim. But in the case it does not, it will be required to provide vls with some default configs. Follow the steps below to setup the server configuration.

Server Configuration

First enable loadSettings.

" .vimrc/init.vim

let g:LanguageClient_loadSettings=1

" Below is optional, if you want it available globally,
" else by default settings.json will reside in your project root directory ($PROJECT_ROOT/.vim/settings.json)
let g:LanguageClient_settingsPath='/full/path/to/settings.json'

Then, add default configs to settings.json.

// settings.json
{
    "initializationOptions": {
        "config": {
            "vetur": {
                "useWorkspaceDependencies": false,
                "validation": {
                    "template": true,
                    "style": true,
                    "script": true
                },
                "completion": {
                    "autoImport": false,
                    "useScaffoldSnippets": false,
                    "tagCasing": "kebab"
                },
                "format": {
                    "defaultFormatter": {
                        "js": "none",
                        "ts": "none"
                    },
                    "defaultFormatterOptions": {},
                    "scriptInitialIndent": false,
                    "styleInitialIndent": false
                }
            },
            "css": {},
            "html": {
                "suggest": {}
            },
            "javascript": {
                "format": {}
            },
            "typescript": {
                "format": {}
            },
            "emmet": {},
            "stylusSupremacy": {}
        }
    }
}

References

Add a custom footer
Add a custom sidebar
Clone this wiki locally