How to get Airbnb's JavaScript style eslint guide working in vim with react, es6?

Question

I am fairly new to vim, and starting a new javascript project with editor as vim(currently learning as well).

I found that there are some presets for style-guide, and linting provided by Airbnb, Google and some others. I also found that I can use syntastic vim plugin which can help me enable linting and style-check in vim.

But I can't figure out how to link these things in vim? What configuration files I need to create and how to enable these features in Syntastic vim plugin? Also I want to enable jscs autofix on file save feature.

Edit: I am also using react with es6.

Any basic or details direction, tutorial link to achieve the same will be helpful.

Thanks

score 4 · Accepted Answer · edited May 23 '17 at 12:16

In your home directory create (or edit) the file named .vimrc, You can tell syntastic which linter to use by add this line to your .vimrc

let g:syntastic_javascript_checkers = ['jscs']

As for automatically fixing your code on write, see the answers to this question: How can I integrate jscs autofix feature into vim?

Suggestion/Update

JSCS is now merged with ESlint, so you should eventually switch linters, you can edit the line in your .vimrc to use 'eslint' instead; you can configure eslint with an .eslintrc file, or several other options detailed in eslint's configuration docs to get it to understand the es6/react stuff, currently I've got my .vimrc setup to use different linters in different situations like this:

if has("autocmd")
    " use google/jshint for js "
    autocmd FileType javascript.js let g:syntastic_javascript_checkers = ['gjslint','jshint']
    " use eslint for jsx "
    autocmd FileType javascript.jsx let g:syntastic_javascript_checkers = ['eslint']
else
    " if an older version of vim without autocmd just use google/jshint "
    let g:syntastic_javascript_checkers = ['gjslint','jshint']
endif

I've modified the code in that answer to work with eslint

function! FixJS()
    "Save current cursor position"
    let l:winview = winsaveview()
    "run eslint fix on current buffer"
    ! eslint --fix %
    "Restore cursor position"
    call winrestview(l:winview)
endfunction
command! FixJS :call FixJS()

"Run the FixJS command just before the buffer is written for *.js files"
autocmd BufWritePre *.js FixJS

that should auto-fix code on write, or when using the command :FixJS

jscs is merged with eslint, does it mean eslint will also be providing features of jscs? Also do I need to install eslint via npm? Also please suggest me how to use Airbnb preset as my linting rule? — WitVault, Jun 03 '16 at 15:16
Yes, eslint has a `--fix` option now that should do everything jscs was, the jscs team is now supporting eslint. — JKirchartz, Jun 03 '16 at 15:18
@JKirchartz is there a way to use it without having to install locally the eslint style in each module? — zipp, Jun 10 '17 at 20:18
@zipp if I understand you correctly, you should have installed eslint globally with `npm install -g eslint` — JKirchartz, Jun 15 '17 at 16:39
@JKirchartz I understand but how would you tell eslint to always use airbnb style and not always set it locally in your project everytime? — zipp, Jun 15 '17 at 16:46
@zapp You'd put your .eslintrc file in your `$HOME` directory — JKirchartz, Jun 15 '17 at 16:48

How to get Airbnb's JavaScript style eslint guide working in vim with react, es6?

1 Answers1