I decided to write this tutorial to set vim to depth. React , so that beginners find this useful when starting with vim and reacting.
Syntax highlighting
To get jsx syntax syntax to look directly in vim, use the mxw Vim JSX plugin.
Steps to install the mxw / vim-jsx plugin
If you use Vundle ,
add the following lines to .vimrc :
Plugin 'mxw/vim-jsx' Plugin 'pangloss/vim-javascript'
This plugin is dependent on pangloss / vim-javascript , so you also need to install it.
To install from vim, use the commands below.
:so ~/.vimrc
To modify the source .vimrc configuration file and use it, then
:PluginInstall
If you use a pathogen
cd ~/.vim/bundle git clone https://github.com/mxw/vim-jsx.git
Enable JSX Highlighing syntax in javascript files
Add the following lines to yours. vimrc :
let g:jsx_ext_required = 0
Enabling eslint in vim
You need to install the following npm helper packages along with the latest eslint (used 2.11.1 at the time of writing). Also make sure that node.js version 4 or higher is installed on your system.
babel-eslint - for ES6 linting support
eslint-plugin-react . - React specific listing rules for ESLint for example, prohibit the use of setState in the DidMount component
npm install --save-dev eslint npm install --save-dev babel-eslint npm install --save-dev eslint-plugin-react
I decided to use the general practices and conventions used by AirBnB , so I also installed the following packages. But they don’t need them if you don’t want to use the eslint AirBnB presets.
npm install --save-dev eslint-config-airbnb npm install --save-dev eslint-plugin-import npm install --save-dev eslint-plugin-jsx-a11y
Create the .eslintrc.json configuration file in the root of your project: (You can use eslint to generate the eslint configuration file in an inactive way)
eslint --init
(If you selected any presets, make sure that you also installed the required package for this preset lint)
I expanded "airbnb" but redefined some rules for my project. You can use "extends": "eslint: recommended" to include some general lint rule recommended by eslint. Here is my .eslintrc.json file
{ "extends" : "airbnb", "parser" : "babel-eslint", "parserOptions" : { "ecmaVersion" : 6, "sourceType" : "module", "ecmaFeatures" : { "jsx":true } }, "env": { "browser" : true, "node" : true, "jquery" : true }, "settings":{ "react":{ "pragma":"React", "version":"15.1.0" }, "ecmascript":6, "jsx":true }, "plugins": [ "react" ], "rules": { "strict": 0, "quotes": 0, "no-unused-vars": 1, "camelcase": 1, "no-underscore-dangle": 1, "comma-dangle":[1,"never"], "indent":["error",4], "react/jsx-indent":0, "react/jsx-equals-spacing": [2, "always"], "no-console":0, "max-len":1, "no-param-reassign":1, "key-spacing": [ 2, { "align": "colon", "beforeColon": true, "afterColon": true } ], "no-multi-spaces": [ 2, { "exceptions":{ "VariableDeclarator":true, "ImportDeclaration":true, "JSXAttribute":true, "AssignmentExpression":true } } ] } }
Now integrate ESLint with Syntastic Plugin in Vim. I decided to use Syntastic with vim to check for syntax error.
let g:syntastic_javascript_checkers = ['eslint']
That's all, but there is still one problem remaining with Syntastic. Syntastic looks for a global node_modules instead of a local project.
One solution would be to install all eslint, babel-eslint packages, etc. all over the world, which certainly will not be good practice.
Another solution
Define npm script in package.json
"eslint": "eslint -c .eslintrc.json"
It will add all locally installed npm packages to the current path, so they will be available for execution.
And in your .vimrc file add
let g:syntastic_javascript_eslint_exe = 'npm run eslint --'
Here we call linting through an npm script from vim.
Alternative: use the plugin 'mtscout6 / syntastic-local-eslint.vim'
Open error window in vim when opening a file
Add the following lines to .vimrc to display the current lint error (if it occurs) when opening a file for editing
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 Autocomplete
There are different types of snippet engines that allow the user to insert fragments by entering the name of the fragment plotted by extension mapping.
- github.com/SirVer/ultisnips: python, supports all fragments in this repo.
- github.com/garbas/vim-snipmate: VimL, snipmate-snippets, the engine sometimes behaves strangely. Supports snippets / *
- github.com/Shougo/neosnippet: VimL, supports / * fragments with some configuration.
- github.com/drmingdrmer/xptemplate: A completely different syntax, does not read the fragments contained in this file, but is also very efficient.
I prefer neosnippet . Install it in your vim to include fragments with neocomplete for automatic completion.
Neocomplete is a terrific autocomplete plugin with additional support for snippets. It can fully execute vocabulary, buffer, omnicomplete and fragments. This is the only real plugin that brings Vim autocomplete along with the best editors.
See installation instructions here for a short set.
After installing over the plugins, you need to install another plugin to enable the reaction of certain fragments
Bundle 'justinj/vim-react-snippets'
See installation instructions here for this plugin.
If all the settings are done correctly, you enabled vim with eslinting, autocompletion, JSX syntax for React, with ES6 features!
Taken from my post.