how to add react jsx as javascript file type in vim and enable eslinting, auto completions?

Question

I have recently started using vim.I want to set up files having .jsx extension to be treated as .js java script file in Vim. Also I want to enable es-linting, snippets with my .jsx files. I have installed following packages in my system

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

I have also installed Bundle 'mxw/vim-jsx' to support jsx in vim.

Also added following lines in my .vimrc file

let g:syntastic_javascript_checkers = ['eslint']
let g:jsx_ext_required = 0

Edit Found this vim plugin for react snippets: Vim-react-snippets

Answer 1

I decided to write this tutorial to setup vim for React development in depth so that beginners find this useful when they start with vim and react.

Syntax highlighting

To get the jsx syntax high-lighting to look right in vim, use mxw's Vim JSX plugin.

Steps to Install mxw/vim-jsx Plugin

If you use Vundle,

---

add following lines in your .vimrc:

Plugin 'mxw/vim-jsx'
Plugin 'pangloss/vim-javascript'

This plugin depends upon pangloss/vim-javascript so you need to install that as well.

To install from within vim, use the commands below.

:so ~/.vimrc

To source changed .vimrc configuration file and use it, next

:PluginInstall

If you use pathogen

---

cd ~/.vim/bundle
git clone https://github.com/mxw/vim-jsx.git

Enable JSX Syntax Highlighing in javascript files

Add following lines in your .vimrc:

let g:jsx_ext_required = 0 

Enabling eslint in vim

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 intreactive way)

eslint --init

(If you chose any presets make sure you also install required package for that lint preset)

I extended "airbnb" but overrided 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

{
    "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 for syntax error checking.

let g:syntastic_javascript_checkers = ['eslint']

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

let g:syntastic_javascript_eslint_exe = 'npm run eslint --'

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.

• github.com/SirVer/ultisnips: python, supports all snippets in this repo.
• github.com/garbas/vim-snipmate: VimL, snipmate-snippets, engine sometimes behaves strange. Supports snippets/*
• github.com/Shougo/neosnippet: 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 for neocomplete

After installing above plugins you need to install one more plugin to enable react specific snippets

Bundle 'justinj/vim-react-snippets'

See install instructions here for that plugin.

If all setup done correctly, you have enabled vim with eslinting, auto completions, JSX syntax hightlighting for React, with ES6 features !

Taken from my blog post.

Answer 2

That plugin you installed already sets the filetype of .jsx files to javascript.jsx so those files should be treated as if their filetype was javascript plus any jsx-related feature provided by that plugin.

I have no idea how to set up Syntastic for jsx, but you can get linting without installing such a huge plugin. For that you will need to add the lines below to after/ftplugin/jsx.vim to tell Vim to automatically run eslint after a write:

" see :help 'errorformat'
setlocal errorformat=%E%f:\ line\ %l\\,\ col\ %c\\,\ Error\ -\ %m,%-G%.%#,%W%f:\ line\ %l\\,\ col\ %c\\,\ Warning\ -\ %m,%-G%.%#

" see :help 'makeprg' and $ eslint --help
setlocal makeprg=eslint\ -f\ compact

" run :make % on write
autocmd! BufWritePost <buffer> silent make % | silent redraw!