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 PackageLSPを選択します。

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

VueのLSPを入れてみる

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

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

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

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

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

Vue Syntax Highlightをインストール

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

Vue Syntax Highlight – Packages – Package Control

設定を記述する

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

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

Home – Sublime Text Language Server Protocol Documentation

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

まとめ

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

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

いちばんやさしい Vue.js 入門教室
大津 真
ソーテック社
売り上げランキング: 163,957