LoginSignup
6
6

coc.nvim で Vue.js を使う。

Last updated at Posted at 2020-01-07

Vue2 対応です。Vue3 ではやったことがなくわかりません。

前提

以下のものは既にインストールされているものとします。

  1. npm パッケージ
    1.1. prettier
    1.2. eslint
  2. Vim プラグイン
    2.1. coc-nvim

インストール

:CocInstall coc-prettier
:CocInstall coc-eslint
:CocInstall coc-vetur

◯ 補足

extention の一覧を表示する。

:CocList extensions

extention をアンインストールする。

:CocUninstall coc-eslint

設定 - prettier

:Format で prettier が実行されます。

~/.vimrc
command! -nargs=0 Format :call CocAction('format')

設定 - eslint

eslint は coc-eslint をインストールするだけではダメで、設定が必要になります。

Step 1.

設定ファイルを開きます。プロジェクト関係なしに全体に設定を反映させたい場合は、:CocConfig を使います。 ~/.vim/coc-settings.json に設定が書き込まれます。

:CocConfig

プロジェクトごとに設定をしたい場合は、:CocLocalConfig を使います。 ワークスペースフォルダ/.vim/coc-settings.json に設定が書き込まれます。

:CocLocalConfig

ワークスペースフォルダは、VScode で言う所のワークスペースのようなものらしいです。詳細は、以下をご確認ください。

VSCode と違って vim はワークスペースをサポートしていません。これに対して coc.nvim では、開いているファイルの位置からワークスペースフォルダを探索します(訳注: だいぶ意訳しました)。
Unlike VSCode vim doesn't have workspace support. The solution is resolve workspace folders from opened files.
Using workspaceFolders - neoclide/coc.nvim

Step 2.

"vue" を追記します。

~/.vim/coc-settings.json
{
  "eslint.filetypes": ["javascript", "vue"],
}

◯ 補足 1

:set filetype? で確認したものを追記しています。

◯ 補足 2

自分の環境ではなぜか tsserver が勝手にインストールされてエラーを履いてくることがあるので false にしています。

~/.vim/coc-settings.json
{
  "tsserver.enable": false
}
6
6
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
6