Skip to content

Vue Language Server (VLS)

Jump to bottom Edit New page
Arnold Chand edited this page Sep 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)

VLS is the bare-bones version of Vetur, the VS Code extension. Vetur provides eslint, eslint-plugin-vue and eslint-prettier alongside vls. While not documented properly, vls requires eslint installed in the project root or globally to provide proper LSP functionalities. The recommended way would be to install these into your project and run the eslint init command inside your project making sure to select Vue.js as the framework.

# Install vls globally first, then follow these steps, make sure you select Vue.js as the framework
# Run this command in your project directory
npx eslint --init

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