LoginSignup
6
4

More than 5 years have passed since last update.

Atom1.21.0でサポートされたLanguage Server Protocolの使い方

Last updated at Posted at 2017-10-05

日本時間で10月4日の深夜,Atom 1.21.0がリリースされました.

1.21.0のリリースノートによると,

とのことで,Language Server Protocolがサポートされたようです.

今回は,この機能をTypeScriptのプログラムで試してみます.

Atom IDEのセットアップ

リリースノートによると,atom-ide-uiをインストールしておく必要があるようです.

また,TypeScript向けのLanguage Serverの機能を提供するide-typescriptもインストールしておきます.

apm install  atom-ide-ui ide-typescript

ide-typescriptは,sourcegraph/javascript-typescript-langserverを利用してLanguage Serverの機能を提供しているようです.

ide-typescriptを使ってみる

ide-typescriptのREAMDEによると,以下の機能が使えるようです.

  • Auto completion
  • Diagnostics (errors & warnings)
  • Document outline
  • Find references
  • Go to definition
  • Hover

順番に試してみます.

Auto Completion

IDE等でよく見るオムニ補完です.vscodeだとIntelliSenseと呼ばれたりします.

auto-completion.png

Diagnostics

直訳すると「診断」となりますが,エラーやコーディングスタイルに関する警告等を表示させることができます.

diagnostics.png

Document Outline

そのファイルで定義されている変数やクラス等を表示してくれます.

outline.png

Find references

変数等がどこから参照されているのか調べることができます.

対象のシンボルを右クリックして,Find Referencesをクリックすると

find-references-menu.png

画面下部にパネルが開き,参照している場所の一覧が表示されます.

find-references.png

Go to definition

シンボルの上でCtrlを押しながらクリックするとその定義元にジャンプすることができます.

goto-definition.gif

Hover

シンボル上にマウスを置くと,その型情報を確認することができます.

hover-1.png

また,右端のピンマークをクリックすると,マウスを移動しても消えなくなり,複数のシンボルの型情報を表示させておくことも可能です.

hover-2.png

TypeScript Extensibilityについて

TypeScript2.3から使えるようになった,Typescript Extensibilityという機能があります.

Language Serverのコア部分に手を入れることなく,簡単に機能を追加できる,というものです.

例えば,この機能を使ってtslintやAngular Language Service等の機能を利用できます.

しかしAtomでは,現時点でこの機能を利用することができません.

ide-typescriptがLanguage Serverの機能を提供するために内部的に使用しているsourcegraph/javascript-typescript-langserverが,TypeScriptの2.3より古いバージョンを利用するようになってしまっているためです.

ただ,既にissueには上がっていて,議論されている途中のようなので期待したいところです.

use the typescript version that is adjacent to the tsconfig.json #350

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4