こんにちは。Takitaです。
vim-syntasticを利用すれば.jsファイルのeslintなどのチェックをvimで行うことができますが、.js以外の.vueなどはチェックされません。.vueでeslintをチェックするためにvim-vue-syntasticをvimに導入しました。
sekel/vim-vue-syntasticはvueコンポーネントのlintチェックをサポートしてくれるプラグインです。
アクティブなプラグインではないのですが、自前で vimrc
や vim-syntastic
のlintチェックのvue版ラッパー(jsxhintのようなもの)を作成するのも骨が折れるのでvim-vue-syntasticを試してみました。
README通りにやるとすぐ動いたので良かったです。
dein.vimでプラグインを管理しており、使用するプラグインは全て .dein.toml
で管理しているので .dein.toml
にプラグイン本体と依存関係のあるプラグインを追加します。
.dein.toml
+[[plugins]]
+repo = 'sekel/vim-vue-syntastic'
+[[plugins]]
+repo = 'tpope/vim-pathogen'
今回は vim-pathogen
の設定だけ追加していますが、syntasticの設定も記載しておきます。
.vimrc
+" --------------------------------
+" tpope/vim-pathogen
+" --------------------------------
+execute pathogen#infect()
+
+" --------------------------------
+" sekel/vim-vue-syntastic
+" --------------------------------
+let g:syntastic_vue_checkers = ['eslint']
+let local_eslint = finddir('node_modules', '.;') . '/.bin/eslint'
+if matchstr(local_eslint, "^\/\\w") == ''
+ let local_eslint = getcwd() . "/" . local_eslint
+endif
+if executable(local_eslint)
+ let g:syntastic_javascript_eslint_exec = local_eslint
+ let g:syntastic_vue_eslint_exec = local_eslint
+endif
" --------------------------------
" syntastic
" --------------------------------
set statusline+=%#warningmsg#
set statusline+=%{SyntasticStatuslineFlag()}
set statusline+=%*
let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 0
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0
let g:syntasticmodemap = { 'mode': 'active', 'active_filetypes': [
\ 'ruby', 'javascript','coffee', 'scss', 'html', 'haml', 'slim', 'sh',
\ 'spec', 'vim', 'zsh', 'sass', 'eruby'] }
let g:syntastic_javascript_checkers=['eslint']
let g:syntastic_coffee_checkers = ['coffeelint']
let g:syntastic_scss_checkers = ['scss_lint']
let g:syntastic_ruby_checkers = ['rubocop']
let g:syntastic_error_symbol='✗'
let g:syntastic_style_error_symbol = '✗'
let g:syntastic_warning_symbol = '⚠'
let g:syntastic_style_warning_symbol = '⚠'
上記の設定を追加したコミットはこちらです。
https://github.com/tackeyy/dotfiles/commit/189ee0c2b3dab84fd145d6af2339958820c131ba
設定が完了するとこんな感じでチェックしてくれます。
https://github.com/sekel/vim-vue-syntastic
https://github.com/vim-syntastic/syntastic/issues/1856
https://github.com/vim-syntastic/syntastic/wiki/JavaScript%3A---jsxhint