Visual Studio Code（VSCode）は、新しく活発なこともあって、便利な機能が豊富です。

VSCodeを使えば、便利な機能の恩恵を受けることが多いです。

個人的には、場合によってSublime Textが良いので、エディタを行き来して対応しています。

そこでVSCodeでも使われている Language Server Protocol（LSP）という便利なものがあったので、Sublime Textで使うことにしました。

Language Server Protocol（LSP）とは

Microsoftが作成したプログラムをコーディングするために用意されたプロトコル（定義 / 規約）を標準化したもので、それにそったツールやエディタであれば、VSCode以外でも利用できます。

主な機能

主な機能はこんな感じです。

• コード補完
• ホバードキュメント
• 定義への移動
• ワークスペースシンボル
• 参照を探す
• コード診断

今までエディタごとに、いくつもプラグインをインストールして整えていた環境がすぐに揃います。

Sublime TextにLSPを導入

いつものPackage Controlからインストールします。

Package Control

コマンドパレットを開き、Package Control: Install PackageでLSPを選択します。

tomv564/LSP: Language Server Protocol support for Sublime Text 3

VueのLSPを入れてみる

フロントエンドのフレームワークなどでは、ファイル内で様々な要素が混在してしまいます。

それがどこまで使いやすくなるか、試しにVue用のLSPを入れてみます。

npmでvue-language-serverをインストール

対応した言語サーバーをインストールしないと動きません。
面倒なのでグローバルに入れます。

$ npm install vue-language-server -g

ローカルに入れる場合は、こんな感じでお願いします。

$ npm install vue-language-server --save

Vue Syntax Highlightをインストール

シンタックスハイライトがないと、まともに表示できません。
Package Control: Install PackageでVue Syntax Highlightでインストールしてください。

Vue Syntax Highlight – Packages – Package Control

設定を記述する

Sublime TextのLSPプラグインでは、いくつかデフォルトで設定が記述されていますが、Vueの記述がないので、自分で入れる必要があります。

コマンドパレットなどからPreferences: LSP Settingsを開き、公式のドキュメントにある設定をコピペします。

"vue-ls":{
  "command": [
    "vls"
    // note: you may need to use the absolute path to the language server binary
  ],
  "enabled": true,
  "languageId": "vue",
  "scopes": ["text.html.vue"],
  "syntaxes": ["Vue Component"],
  "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": {}
    }
  }
}

Home – Sublime Text Language Server Protocol Documentation

私の環境の場合、”command”部分を以下のように修正しないと動きませんでした。

  "command": [
    "~/.nodebrew/current/bin/vls",
    "--node-ipc"
  ],

まとめ

何とかLSP（vue-language-server）をSublime Textで動かすことができたと思うのですが、VSCodeの方が遥かに楽に準備できたので、切ない気持ちになりました。

ただ、LSPに対応したものであれば、色々な言語に対応できるのは面白いですね。それでは、また！