How to enable syntax highlighting, eslinting, auto completions in vim for react development?
I decided to write this tutorial to setup vim for React.Js development in depth so that beginners find this useful when they start with vim and react.
To get the syntax highlighting to look right, use mxw’s Vim JSX highlighting.
If you use Vundle
add following lines in your .vimrc:
To install from within vim, use the commands below.
To source changed .vimrc file and use it, next
If you use pathogen
git clone https://github.com/mxw/vim-jsx.git
Add following lines in your .vimrc:
let g:jsx_ext_required = 0
You need to install following helper npm packages along with latest eslint ( used 2.11.1 at the time of writing ). Also make sure that you have node.js version 4 or above installed in your system.
babel-eslint – To support ES6 linting
eslint-plugin-react – React specific linting rules for ESLint e.g prevent usage of setState in componentDidMount
npm install --save-dev eslint
npm install --save-dev babel-eslint
npm install --save-dev eslint-plugin-react
I decided to use common practices and conventions used by AirBnB, so I installed following packages as well. But You don’t need them
If you do not want to use AirBnB eslint presets.
npm install --save-dev eslint-config-airbnb
npm install --save-dev eslint-plugin-import
npm install --save-dev eslint-plugin-jsx-a11y
Create a config file .eslintrc.json in your project’s root:
You can use eslint to generate eslint configuration file in interactive way or create it manually.
(If you chose any pre-sets make sure you also install required package for that lint pre-set, if you use eslint then required packages will be installed automatically)
I extended “airbnb” but override some of rules for my project. You can use
“extends”: “eslint:recommended” to enable some common lint rule recommended by eslint
Here is my .eslintrc.json file
Now integrate ESLint with Syntastic
All set but still there is one issue remaining with Syntastic.
Syntastic searches global node_modules instead of local project.
One solution will be install all packages eslint, babel-eslint etc globally which definately will not be a good practice.
Another solution is – Define a npm script in your package.json
"eslint": "eslint -c .eslintrc.json"
It will add all the locally installed npm packages in current path, so they will be available for execution and in your .vimrc file add
Here we are invoking linting via npm script from vim.
Alternative: use Plug ‘mtscout6/syntastic-local-eslint.vim’ plugin
Open error window in vim as you open your file – Add following lines to your .vimrc to show current lint error (in case any) as you open your file for edit
let g:syntastic_always_populate_loc_list = 1
let g:syntastic_auto_loc_list = 1
let g:syntastic_check_on_open = 1
let g:syntastic_check_on_wq = 0
Snipptes and auto-completion
There are different forks of snippet engines which allow the user to insert snippets by typing the name of a snippet hitting the expansion mapping.
python, supports all snippets in this repo.
VimL, snipmate-snippets, engine sometimes behaves strange. Supports snippets/*
VimL, supports snippets/* with some configuration.
• github.com/drmingdrmer/xptemplate: Totally different syntax, does not read snippets contained in this file, but it is also very powerful.
I prefer neosnippet. Install it in your vim, to enable snippets with neocomplete for auto-completion.
Neocomplete is an amazing autocomplete plugin with additional support for snippets. It can complete simulatiously from the dictionary, buffer, omnicomplete and snippets. This is the one true plugin that brings Vim autocomplete on par with the best editors.
See install instructions here https://github.com/Shougo/neocomplete.vim
After installing above plugins you need to install one more plugin to enable react specific snippets
See install instructions here https://github.com/justinj/vim-react-snippets
If all setup done correctly, you have enabled vim with eslinting, auto completions, JSX syntax highlighting for React, with ES6 features.