Vimでdenoの開発環境を構築する2019
#Deno #Vim
2020年版はこちら -> Vimでdenoの開発環境を構築する2020
最初に
Vimでdenoの開発環境の構築方法について記載します。
この記事ではtsserverのクライアントとしてaleの使用を想定しています。
目標
シンタックスハイライト
オムニ補完
定義元へのジャンプ
あたりができるようにします。
構築手順
typescriptモジュールをグローバルインストールしておく
$ npm install -g typescript
各種プラグインをインストールする
dein.vimを使って、typescript-vimとaleをインストールします。
typescript-vimはシンタックスハイライト用です。
aleはtsserverクライアント(オムニ補完や定義元へのジャンプ等の機能を提供)として利用します。
code:toml
plugins
repo = 'leafgarland/typescript-vim'
plugins
repo = 'w0rp/ale'
on_cmd = 'ALELint', 'ALEToggle', 'ALEEnable', 'ALEToggleBuffer', 'ALEEnableBuffer'
hook_source = '''
...
'''
aleのhook_sourceには、以下のような設定を記述しておきます。
code:vim
let g:ale_linters_explicit = 1
let g:ale_linters = {
\ 'javascript': 'eslint',
\ 'typescript': 'tsserver', 'eslint', " 'tsserver'は必須です
\ 'vue': 'eslint'
\ }
augroup TypeScript
autocmd!
" <C-Space>でオムニ補完
autocmd FileType typescript :imap <buffer> <C-Space> <Plug>(ale_complete)
" <C-]>で定義元へジャンプ
autocmd FileType typescript :map <buffer> <C-]> <Plug>(ale_go_to_definition)
augroup END
denoの型定義ファイルを出力
code:shell
$ deno types > deno.d.ts
tsconfig.jsonを作成
../../.deno/deps/https/*の相対パス指定をなんとかしたい...
code:json
{
"compilerOptions": {
"target": "es2018",
"baseUrl": ".",
"paths": {
"deno": "./deno.d.ts",
"https://*": [
"../../.deno/deps/https/*"
],
"http://*": [
"../../.deno/deps/http/*"
]
}
}
}
確認
:ALELintでaleを起動する。
その後、Deno.まで入力してからオムニ補完を実行すると、以下のように候補が表示されます。
https://gyazo.com/377a9935469f9e6a74520d88034a6fcc
補足
自動補完したいときは?
Qiitaに記事を書きました
参考
/keroxp/deno入門2018