Vim Javascript File Refresh Rendering Issue

[DoubleOTheven]

Problem

After toggling between insert and command mode in Vim (via iTerm, not MacVim. MacVim does not have this problem) for any *.js file, I get weird refreshing errors. The keys that I hit in command mode are drawn to the screen. This is only a *.js file problem. See image below:

Those characters are not actually inserted into the file, but only rendered that way. After pushing vim to the background using ctrl+z, then bringing it back to the foreground using fg on the terminal, vim refreshes the page and those letters are gone.

Is there something in my config that is causing the rendering issue, or is this caused by a config in MaximumAwesome?

Vimrc

" don't bother with vi compatibility
set nocompatible

" enable syntax highlighting
syntax enable

" configure Vundle
filetype on " without this vim emits a zero exit status, later, because of :ft off
filetype off
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

" install Vundle bundles
if filereadable(expand("~/.vimrc.bundles"))
  source ~/.vimrc.bundles
  source ~/.vimrc.bundles.local
endif

call vundle#end()

" ensure ftdetect et al work by including this after the Vundle stuff
filetype plugin indent on

set autoindent
set autoread                                                 " reload files when changed on disk, i.e. via `git checkout`
set backspace=2                                              " Fix broken backspace in some setups
set backupcopy=yes                                           " see :help crontab
set clipboard=unnamed                                        " yank and paste with the system clipboard
set directory-=.                                             " don't store swapfiles in the current directory
set encoding=utf-8
set expandtab                                                " expand tabs to spaces
set ignorecase                                               " case-insensitive search
set incsearch                                                " search as you type
set laststatus=2                                             " always show statusline
set list                                                     " show trailing whitespace
set listchars=tab:▸\ ,trail:▫
set number                                                   " show line numbers
set ruler                                                    " show where you are
set scrolloff=3                                              " show context above/below cursorline
set shiftwidth=2                                             " normal mode indentation commands use 2 spaces
set showcmd
set smartcase                                                " case-sensitive search if any caps
set softtabstop=2                                            " insert mode tab and backspace use 2 spaces
set tabstop=8                                                " actual tabs occupy 8 characters
set wildignore=log/**,node_modules/**,target/**,tmp/**,*.rbc
set wildmenu                                                 " show a navigable menu for tab completion
set wildmode=longest,list,full

" Enable basic mouse behavior such as resizing buffers.
set mouse=a
if exists('$TMUX')  " Support resizing in tmux
  set ttymouse=xterm2
endif

" keyboard shortcuts
let mapleader = ','
noremap <C-h> <C-w>h
noremap <C-j> <C-w>j
noremap <C-k> <C-w>k
noremap <C-l> <C-w>l
noremap <leader>l :Align
nnoremap <leader>a :Ag<space>
nnoremap <leader>b :CtrlPBuffer<CR>
nnoremap <leader>d :NERDTreeToggle<CR>
nnoremap <leader>f :NERDTreeFind<CR>
nnoremap <leader>t :CtrlP<CR>
nnoremap <leader>T :CtrlPClearCache<CR>:CtrlP<CR>
nnoremap <leader>] :TagbarToggle<CR>
nnoremap <leader><space> :call whitespace#strip_trailing()<CR>
nnoremap <leader>g :GitGutterToggle<CR>
noremap <silent> <leader>V :source ~/.vimrc<CR>:filetype detect<CR>:exe ":echo 'vimrc reloaded'"<CR>

" in case you forgot to sudo
cnoremap w!! %!sudo tee > /dev/null %

" plugin settings
let g:ctrlp_match_window = 'order:ttb,max:20'
let g:NERDSpaceDelims=1
let g:gitgutter_enabled = 0

" Use The Silver Searcher https://github.com/ggreer/the_silver_searcher
if executable('ag')
  " Use Ag over Grep
  set grepprg=ag\ --nogroup\ --nocolor

  " Use ag in CtrlP for listing files. Lightning fast and respects .gitignore
  let g:ctrlp_user_command = 'ag %s -l --nocolor -g ""'
endif

" fdoc is yaml
autocmd BufRead,BufNewFile *.fdoc set filetype=yaml
" md is markdown
autocmd BufRead,BufNewFile *.md set filetype=markdown
autocmd BufRead,BufNewFile *.md set spell
" extra rails.vim help
autocmd User Rails silent! Rnavcommand decorator      app/decorators            -glob=**/* -suffix=_decorator.rb
autocmd User Rails silent! Rnavcommand observer       app/observers             -glob=**/* -suffix=_observer.rb
autocmd User Rails silent! Rnavcommand feature        features                  -glob=**/* -suffix=.feature
autocmd User Rails silent! Rnavcommand job            app/jobs                  -glob=**/* -suffix=_job.rb
autocmd User Rails silent! Rnavcommand mediator       app/mediators             -glob=**/* -suffix=_mediator.rb
autocmd User Rails silent! Rnavcommand stepdefinition features/step_definitions -glob=**/* -suffix=_steps.rb
" automatically rebalance windows on vim resize
autocmd VimResized * :wincmd =

" Fix Cursor in TMUX
if exists('$TMUX')
  let &t_SI = "\<Esc>Ptmux;\<Esc>\<Esc>]50;CursorShape=1\x7\<Esc>\\"
  let &t_EI = "\<Esc>Ptmux;\<Esc>\<Esc>]50;CursorShape=0\x7\<Esc>\\"
else
  let &t_SI = "\<Esc>]50;CursorShape=1\x7"
  let &t_EI = "\<Esc>]50;CursorShape=0\x7"
endif

" Don't copy the contents of an overwritten selection.
vnoremap p "_dP

" Go crazy!
if filereadable(expand("~/.vimrc.local"))
  " In your .vimrc.local, you might like:
  "
  " set autowrite
  " set nocursorline
  " set nowritebackup
  " set whichwrap+=<,>,h,l,[,] " Wrap arrow keys between lines
  "
  " autocmd! bufwritepost .vimrc source ~/.vimrc
  " noremap! jj <ESC>
  source ~/.vimrc.local
endif

Vimrc.local

set autowrite

" gui settings
if (&t_Co == 256 || has('gui_running'))
  if ($TERM_PROGRAM == 'iTerm.app')
    colorscheme lucius
  else
    colorscheme desert
    colorscheme lucius

    " Turn off annoying bell sound
    set noerrorbells
    set novisualbell
    autocmd! GUIEnter * set vb t_vb=
  endif
endif

" show line numbers
set number
set numberwidth=3

" Syntastic
let g:syntastic_cpp_compiler = 'clang++'
let g:syntastic_cpp_compiler_options = ' -std=c++11 -stdlib=libc++'
let g:syntastic_enable_elixir_checker=1

" Mustache Handlebars convenient abreviations
let g:mustache_abbreviations = 1

" Get C++ syntax from Clang
let g:clang_library_path = '/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/lib/'

" Make it obvious where 80 characters is
set textwidth=80
set colorcolumn=+1
highlight OverLength ctermbg=red ctermfg=white guibg=#592929
match OverLength /\%81v.\+/

" vim-rspec mappings
nnoremap <Leader>t :call RunCurrentSpecFile()<CR>
nnoremap <Leader>s :call RunNearestSpec()<CR>
nnoremap <Leader>l :call RunLastSpec()<CR>

" Key mappings
map               <F8> :BufExplorer<cr>
map               \  :NERDTreeToggle<CR>
map               \| :NERDTreeFind<CR>
nmap              <silent> <F6> :TagbarToggle<CR>
nnoremap          ; :

" Quicker window movement
nnoremap <C-j> <C-w>j
nnoremap <C-k> <C-w>k
nnoremap <C-h> <C-w>h
nnoremap <C-l> <C-w>l

" vim-jsx config: allow jsx in .js files
let g:jsx_ext_required = 0
"
" The Silver Searcher
if executable('ag')
  " Use ag over grep
  set grepprg=ag\ --nogroup\ --nocolor

  " Use ag in CtrlP for listing files. Lightning fast and respects .gitignore
  let g:ctrlp_user_command = 'ag %s -l --nocolor -g ""'

  " ag is fast enough that CtrlP doesn't need to cache
  let g:ctrlp_use_caching = 0
endif

augroup general
  autocmd!
  au BufLeave,FocusLost * silent! wall " Save if focus lost
  au BufWritePre * silent! :EraseBadWhitespace
  au BufwinEnter bash* set nocursorline

  "Enable spellchecking for Markdown
  autocmd FileType markdown setlocal spell

  "Wrap at 80 characters
  autocmd BufRead, BufNewFile *.md setlocal textwidth=80

  " Automatically wrap at 72 characters and spell check git commit messages
  autocmd FileType gitcommit setlocal textwidth=72
  autocmd FileType gitcommit setlocal spell

  "Allow autocomplete for hyphenated words
  autocmd FileType css,scss,sass setlocal iskeyword+=-

  " Restore cursor position
  au BufReadPost *   if line("'\"") > 1 && line("'\"") <= line("$") |
        \ exe "normal! g`\"" |
        \ endif
augroup END

[DoubleOTheven]

I just discovered that this problem goes away when I remove the jshint plugin for Vim. I am stumped on this one. Any ideas?

[gxespino]

I have the same problem with multiple artifacts and just general slow performance in any .js files. I'll remove the jshint plugin and see if there are any improvements.

[DoubleOTheven]

Even after removing the jshint plugin, the artifacts still show up for me, but far less often. The artifacts that are showing up appear on any file type, not just .js files

[dgreeninger]

I went to the https://github.com/wookiehangover/jshint.vim plugin page and noticed they mentioned NodeJS must be installed and in your path.
Sure enough, once I setup nodejs, the highlighting and occasional errors went away and I have nice javascript syntax highlighting on my .js files.

[DoubleOTheven]

I already have nodejs in my path (sym linked through Homebrew package manager). I ended up switching to eslint. Here is how I did it:

• Removed ~/.vim/bundles/js_hint

• Removed js_hint from ~/.vimrc.bundle

• Set up es_lint in syntastic in ~/.vimrc.local: let g:syntastic_javascript_checkers = ['eslint']

• Installed es_lint via npm:

  npm install -g eslint
  npm install -g babel-eslint
  npm install -g eslint-plugin-react
  

• Added a ~/.eslintrc

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "node": true
    },
    "settings": {
        "ecmascript": 6,
        "jsx": true
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "strict": 0,
        "quotes": 0,
        "no-unused-vars": 0,
        "camelcase": 0,
        "no-underscore-dangle": 0
    }
}

Tada 🎉 . It works...

[edruder]

@Sonblind I think eslint is preferable to js_hint (especially since it seems to solve this problem)! Can you create a PR to switch maximum-awesome to eslint?

[edruder]

@Sonblind On second thought, after chatting with @rudle, it's probably bad to unconditionally introduce a dependency on node into maximum-awesome.