Yak shaving logs


My life is just yak shaving.

*.vue のeslintをチェックしてくれるvim-vue-syntasticをvimに導入する

2017/08/13 #vim #vimrc #vue.js #eslint

By Yusuke Takita


こんにちは。Takitaです。

vim-syntasticを利用すれば.jsファイルのeslintなどのチェックをvimで行うことができますが、.js以外の.vueなどはチェックされません。.vueでeslintをチェックするためにvim-vue-syntasticをvimに導入しました。

sekel/vim-vue-syntasticはvueコンポーネントのlintチェックをサポートしてくれるプラグインです。
アクティブなプラグインではないのですが、自前で vimrcvim-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://gyazo.com/aebebd264089a29643c6e5b8eaeb88f9

参考

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

このエントリーをはてなブックマークに追加

categories


最新記事


tags