INFRA

neovimでVue.jsの開発ができるようにする

#neovim#Vue.js#ESLint#Prettier

前提

  • この投稿の環境を前提にしております。
  • 基本的にはcoc.nvimを使います。
  • プラグインで、Vueに特化した環境を整えます。
  • ESLintと、Prettierを使います。

インストールするもの

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

coc-settings.jsonを編集

:CocConfig でcoc-settings.jsonの編集画面が表示されるので、下記のようにeslint.filetypesにvueを追加する。

{
  "eslint.autoFixOnSave": true,
  "eslint.filetypes": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ]
}

基本これだけっぽい。あとは、プロジェクトファイルに、eslintとかprettierの設定ファイルをいれたり、eslint, prettierをインストールしたりすれば動くっぽい。

init.vimの設定

prettierを使ったフォーマットは、下記をinit.vimに設定し、,jで実行できるようにした。

" formatの設定
nnoremap ,j :CocCommand prettier.formatFile<CR>

プロジェクトへの各種インストール・設定

prettierをESLintと一緒に動かす場合は、ESLint側のフォーマット関連機能をOFFにする必要があり、やり方はここに書いてある。

eslint-config-prettierを入れて、.eslintrc.*のextendsにprettierを追加すればOKっぽい。

prettier関連の設定

.prettierrc.yaml

trailingComma: 'es5'
tabWidth: 2
semi: false
singleQuote: true

.prettierignore

public