JavaScriptの勉強がてら開発環境を整備しました。
Plugin設定
ディレクトリ作成
$ mkdir -p $HOME/.cache/eslint
$ mkdir -p $HOME/.vim/tags
$ mkdir -p $HOME/.vim/neosnippet.vim
$ mkdir -p $HOME/.vim/neocomplete.vim
syntax highlight
VimでES6のシンタックスハイライト - Qiitaがイメージもあってよさ気です。綺麗だとその分もっさりするのでお好みで使用するのが良いと思います。
.vimrc
"vim-javascript{{{NeoBundleLazy'pangloss/vim-javascript', {'filetypes': ['html', 'php', 'javascript']}"}}}ctags設定
tagsファイルを適切に生成することでタグジャンプが可能となり、時間短縮が期待できます。
.ctags設定
正規表現の前にJavaScriptを勉強したてで、ケース漏れが多いかと思われます。
コメント頂けると幸いです。
.ctags
--exclude=.git--exclude=.svn--exclude=*min.js--recurse=yes--sort=yes--languages=-JavaScript--langdef=js--langmap=js:.js.json.jsx.html--regex-js=/^(var[\t]+)?([a-zA-Z$][a-zA-Z0-9_$]*)[\t]*=[\ta-zA-Z0-9_$|]*\{/\2/o,object/--regex-js=/['"]*([a-zA-Z$][a-zA-Z0-9_$]*)['"]*[ \t]*[:=][ \t]*function[ \t]*\(/\1/f,function/alias設定
.bash_profile
#.bashrc.localみたいな感じでGitHub管理外でよしなに管理するtagsJsCmd='ctags --languages=js -f'tagsVariable=''tagsVariable="$tagsVariable cd $HOME/sample1; $tagsJsCmd $HOME/.vim/tags/sample1.tags $HOME/sample1;"tagsVariable="$tagsVariable cd $HOME/sample2; $tagsJsCmd $HOME/.vim/tags/sample2.tags $HOME/sample2;"tagsVariable="$tagsVariable cd;"alias TAGS=$tagsVariable.vimrc設定
.vimrc
" taglist.vim {{{
NeoBundleLazy 'vim-scripts/taglist.vim', {'commands': 'Tlist'}
nnoremap<Leader>t :<C-u>Tlist<CR>lets:hooks = neobundle#get_hooks('taglist.vim')function!s:hooks.on_source(bundle) abort "{{{letg:tlist_javascript_settings ='js;o:object;f:function'letg:Tlist_Exit_OnlyWindow =1letg:Tlist_Show_One_File =1letg:Tlist_Use_Right_Window =1letg:Tlist_WinWidth =25endfunction"}}}"}}}".vimrc.localみたいな感じでGitHub管理外でよしなに管理する
augroup MyTagsAutoCmd
autocmd!autocmdBufNewFile,BufRead $HOME/sample1/*.{js,json,html} setlocaltags=$HOME/.vim/tags/sample1.tagsautocmdBufNewFile,BufRead $HOME/sample2/*.{js,json,html} setlocaltags=$HOME/.vim/tags/sample2.tags
augroup END
Syntaxチェック, lintチェック, 自動整形設定
はやりのESLintを導入します。
保存時の動作はESLintによる非同期のSyntaxチェックを実施、
Quickrunした場合には--fixオプションを付与した実行となり、自動整形が行われます。
ESLintのオプションなどはhelpを見て適当に設定したため、改良の余地はあるかと思われます。
.vimrc
" vimproc {{{
NeoBundle 'Shougo/vimproc', {'build': {'mac': 'make -f make_mac.mak','unix': 'make -f make_unix.mak'}}
"}}}" vim-qfstatusline {{{lets:lineUpdate =! exists('s:lineUpdate') ? 0 : s:lineUpdate
function! MyStatuslineSyntax() abort "{{{letl:ret= qfstatusline#Update()if0< len(l:ret)&& s:lineUpdate is# 0highlight StatusLine cterm=NONEgui=NONE ctermfg=Black guifg=Black ctermbg=Magenta guibg=Magenta
lets:lineUpdate =1elseifs:lineUpdate is# 1highlight StatusLine cterm=NONEgui=NONE ctermfg=Black guifg=Black ctermbg=Grey guibg=Grey
lets:lineUpdate =0endifreturnl:retendfunction"}}}function! MyStatuslinePaste() abort "{{{if&pasteis# 1return'(paste)'endifreturn''endfunction"}}}
NeoBundle 'KazuakiM/vim-qfstatusline'letg:Qfstatusline#UpdateCmd =function('MyStatuslineSyntax')setlaststatus=2setcmdheight=1setstatusline=\ %t\ %m\ %r\ %h\ %w\ %q\ %{MyStatuslineSyntax()}%=\ %{MyStatuslinePaste()}\ \|\ %Y\ \|\ %{&fileformat}\ \|\ %{&fileencoding}\
"}}}" vim-quickrun {{{
NeoBundleLazy 'thinca/vim-quickrun', {'commands': 'QuickRun'}
nnoremap<Leader>run :<C-u>QuickRun<CR>lets:quickrun_config_javascript = {
\ 'command': 'eslint',
\ 'cmdopt': '--cache --cache-location '. $HOME .'/.cache/eslint/.eslintcache --format compact --max-warnings 1 --no-color --no-ignore --quiet',
\ 'errorformat': '%E%f: line %l\, col %c\, Error - %m,%W%f: line %l\, col %c\, Warning - %m,%-G%.%#',
\ 'exec': '%c %o %s:p'}
letg:quickrun_config = {
\ '_': {
\ 'hook/close_buffer/enable_empty_data': 1,
\ 'hook/close_buffer/enable_failure': 1,
\ 'outputter': 'multi:buffer:quickfix',
\ 'outputter/buffer/close_on_empty': 1,
\ 'outputter/buffer/split': ':botright',
\ 'runner': 'vimproc',
\ 'runner/vimproc/updatetime': 600},
\ 'javascript': {
\ 'command': s:quickrun_config_javascript['command'],
\ 'cmdopt': s:quickrun_config_javascript['cmdopt'] .' --fix',
\ 'errorformat': s:quickrun_config_javascript['errorformat'],
\ 'exec': s:quickrun_config_javascript['exec'],
\ 'runner': 'system'},
\ 'javascript/watchdogs_checker': {
\ 'type': 'watchdogs_checker/javascript'},
\ 'watchdogs_checker/_': {
\ 'hook/close_quickfix/enable_exit': 1,
\ 'hook/back_window/enable_exit': 0,
\ 'hook/back_window/priority_exit': 1,
\ 'hook/qfstatusline_update/enable_exit': 1,
\ 'hook/qfstatusline_update/priority_exit': 2,
\ 'outputter/quickfix/open_cmd': ''},
\ 'watchdogs_checker/javascript': s:quickrun_config_javascript}
unlet s:quickrun_config_javascript
" vim-watchdogs {{{
NeoBundleLazy 'osyo-manga/vim-watchdogs', {'depends': 'osyo-manga/shabadou.vim','insert': 1}
lets:hooks = neobundle#get_hooks('vim-watchdogs')function!s:hooks.on_source(bundle) abort "{{{ "vim-watchdogsletg:watchdogs_check_BufWritePost_enable =1letg:watchdogs_check_CursorHold_enable =1endfunction"}}}補完機能設定
Vim本体にも補完機能はありますが、ここではリッチな補完機能を活用したチップスの紹介をします。
補完するにあたり最も重要となるのはsnippetsになります。
snippetsはコーディング効率に直結する重要な設定のため、
私はベースとなるsnippetsをforkして自分用に最適化した物を使用しています。
.vimrc設定
.vimrc
" neosnippet-snippets" neosnippet.vim" neoinclude.vim" neocomplete.vim {{{
NeoBundleLazy 'Shougo/neocomplete.vim', {'depends': ['KazuakiM/neosnippet-snippets','Shougo/neosnippet.vim','Shougo/neoinclude.vim'],'insert': 1}
imap <expr><TAB> pumvisible() ? "\<C-n>" : neosnippet#expandable_or_jumpable() ? "\<Plug>(neosnippet_expand_or_jump)" : "\<TAB>"smap<expr><TAB> neosnippet#expandable_or_jumpable() ? "\<Plug>(neosnippet_expand_or_jump)" : "\<TAB>"
nmap <expr><TAB><Plug>(neosnippet_expand_or_jump)inoremap<silent><CR><C-r>=<SID>KazuakiMNeoComplete()<CR>function!s:KazuakiMNeoComplete() abort "{{{return pumvisible() ? "\<C-y>" : "\<CR>"endfunction"}}}inoremap<expr><C-h> neocomplete#smart_close_popup()."\<C-h>"inoremap<expr><BS> neocomplete#smart_close_popup()."\<C-h>"lets:hooks = neobundle#get_hooks('neocomplete.vim')function!s:hooks.on_source(bundle) abort "{{{ "neocomplete.vim
augroup MyNeoCompleteAutoCmd
autocmd!autocmdFileType javascript setlocalomnifunc=javascriptcomplete#CompleteJS
autocmdFileType html setlocalomnifunc=javascriptcomplete#CompleteJS
augroup END
letg:neocomplete#auto_completion_start_length =3letg:neocomplete#data_directory = $HOME .'/.vim/neocomplete.vim'letg:neocomplete#enable_at_startup =1letg:neocomplete#enable_auto_close_preview =1letg:neocomplete#enable_auto_delimiter =1letg:neocomplete#enable_auto_select =0letg:neocomplete#enable_fuzzy_completion =0letg:neocomplete#enable_smart_case =1letg:neocomplete#fallback_mappings = ["\<C-x>\<C-o>","\<C-x>\<C-n>"]
letg:neocomplete#keyword_patterns = {'_': '\h\w*'}
letg:neocomplete#lock_buffer_name_pattern ='\.log\|.*quickrun.*\|.jax'letg:neocomplete#max_keyword_width =30letg:neocomplete#max_list =8letg:neocomplete#min_keyword_length =3letg:neocomplete#sources = {
\ '_': ['neosnippet','file','buffer'],
\ 'html': ['neosnippet','file','omni','buffer'],
\ 'javascript': ['neosnippet','file','omni','buffer']}
letg:neocomplete#sources#buffer#cache_limit_size =50000letg:neocomplete#sources#buffer#disabled_pattern ='\.log\|\.jax'letg:neocomplete#sources#buffer#max_keyword_width =30letg:neocomplete#use_vimproc =1 "neoinclude.vimletg:neoinclude#max_processes =5 "neosnippet.vimletg:neosnippet#data_directory = $HOME .'/.vim/neosnippet.vim'letg:neosnippet#enable_snipmate_compatibility =1letg:neosnippet#disable_runtime_snippets = {'_' : 1}
letg:neosnippet#snippets_directory = $HOME .'/.vim/bundle/neosnippet-snippets/neosnippets'endfunction"}}}