In this article I will explain how did I set up my neovim to work with React and Vue projects. It should also work for Vim 8+

28.11.2019 - found a solution for text search, updated neovim config

TL:DR My complete neovim config can be found here: https://gist.github.com/jtumano/4a38cb00882c7cd35fdd9c964702bd17

After learning Vim basics I found that can't leave without it and started using plugins which provided such ability in my IDE-s - first was Idea, then vscode. Also I have tried multiple times to migrate to original Vim editor but without success. Okay, vim recognizes syntax of javascript/typescript files, with some plugins it can also recognize .vue and jsx syntax. But there is no autosuggestions and linting and of course any intelligent refactoring/go_to_definition possibilities. Some additional plugins could add it but I couldn't manage it to work fully as alternative to VsCode.

Fortunately last time Language Server Protocol (LSP) appeared. Such protocol allows to use language-specific feature independently to editor. Thanks to LSP I could now manage to setup Neovim to work as frontend IDE.

So, main plugin is a coc.nvim. Now thanks to this plugin it is possible to use different Language servers plus some extra plugins which are not available in vim directly. Also you probably should install some syntax-related vim plugins and some other that makes coding simplier.

My list of plugins. I'm using neovim, but believe all of them also work in Vim 8 and newer. It is a copy-paste from my config which is using vim-plug plugin manager:

Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' } " File navigation, similar to Ctrl+p hotkey in vscode
Plug 'junegunn/fzf.vim'

Plug 'scrooloose/nerdtree'                                  " side bar with file tree view
Plug 'Xuyuanp/nerdtree-git-plugin'                          " show git status in file tree view
Plug 'itchyny/lightline.vim'                                " better look of vim status line
Plug 'ap/vim-buftabline'                                    " buffers to tabline, shows buffers as tabs on top of window
Plug 'tomasr/molokai'                                       " sublime theme
Plug 'dunstontc/vim-vscode-theme'                           " vscode theme

Plug 'neoclide/coc.nvim', {'do': { -> coc#util#install()}}  " Completion as in vscode

Plug 'janko-m/vim-test'                                     " Tests runner (Jest)

Plug 'scrooloose/nerdcommenter'                             " NERD commenter. Quickly comment lines
Plug 'editorconfig/editorconfig-vim'                        " Editorconfig file support. see https://editorconfig.org/
Plug 'herringtondarkholme/yats.vim'                         " Typescript syntax
Plug 'posva/vim-vue'                                        " Vue JS syntax highlighting
Plug 'maxmellon/vim-jsx-pretty'                             " JSX syntax
Plug 'prettier/vim-prettier'                                " Prettier - automatically format file according to rules/editorconfig
Plug 'othree/xml.vim'                                       " to work with HTML/XML tags, see https://www.vim.org/scripts/script.php?script_id=1397
Plug 'othree/html5.vim'                                     " html5
Plug 'cakebaker/scss-syntax.vim'                            " SCSS syntax

Plug 'iamcco/markdown-preview.nvim', { 'do': { -> mkdp#util#install() }} " Markdown preview

Plug 'tpope/vim-fugitive'                                   " Git wrapper, execute git commant from vim
Plug 'airblade/vim-gitgutter'                               " A Vim plugin which shows a git diff in the 'gutter' (sign column)

And while installed coc it is possible to add extensions (language servers) into it. Simply use :CocInstall extension-name. Here are my extensions i've installed:

coc-tsserver        " javascript/typescript server - completion, refactor etc
coc-tslint-plugin   " javascript/tyescript linting
coc-snippets        " provides snippets engine as in vscode (see my previous article)
coc-highlight       " provides basic highlight of words selected
coc-emmet           " emmet! works as in vscode
coc-marketplace     " marketplace to simplify search and installation of coc extensions
coc-html            " html - completion, refactor etc
coc-json            " json - completion, refactor etc
coc-vetur           " famous vscode plugin - completion,refactor,linting and much more
coc-css             " css

Also, you will probably need to set up these plugins. For information check my config below and check documentation for each plugin.

Here is my neovim config. Save it as $HOME_DIR/.config/nvim/init.vim for Neovim or $HOME_DIR/.vimrc for Vim (linux paths, for windows check neovim documentation).

Currently I am trying to completely migrate from vscode to neovim. Here is list of known problems I've discovered and their possible solutions:

1. There is no debugger available in vim/neovim
   I couldn't find any working debugger plugin for javascript/typescript yet. As a temporary solution is to use debugger; statement in code and debug in browser. Also there are framework-specific devtools available as browser extensions. Check https://github.com/vuejs/vue-devtools and https://reactjs.org/blog/2019/08/15/new-react-devtools.html

2. How to search for text in project files?
   It is possible different ways. At the moment I'm using :vimgrep /text-to-search/g * command. Also it can be configured to exclude some directories, find in specific files by mask etc. Most probably should add some hotkey for it. For more information check https://vim.fandom.com/wiki/Find_in_files_within_Vim
   
   UPD 28.11.2019 Seems it is much better to use fzf. I've changed neovim config so there is changed ctrlp extension to fzf.
   One more thing you need to install it in your system (in my case Debian Linux) as well:

   sudo apt install fzf fd-find

   And put fd-find (https://github.com/sharkdp/fd#using-fd-with-fzf) command as default in your ENV variable instead of fzf. It is needed to exclude non-project files from search results (for example node_modules content, gitignored files).
   For fish shell put into ~/.config/fish/config.fish:

   set -x FZF_DEFAULT_COMMAND "fdfind --type f"
   set -x FZF_CTRL_T_COMMAND "$FZF_DEFAULT_COMMAND"

   For bash put into ~/.bashrc:

   export FZF_DEFAULT_COMMAND='fdfind --type f'
   export FZF_CTRL_T_COMMAND=$FZF_DEFAULT_COMMAND

   Also need to add some configuration in neovim config (or use my complete config https://gist.github.com/jtumano/4a38cb00882c7cd35fdd9c964702bd17):

    nnoremap <A-f> :Ag<CR>
    nnoremap <C-p> :Files<CR>
   
    " Enable per-command history.
    " CTRL-N and CTRL-P will be automatically bound to next-history and
    " previous-history instead of down and up. If you don't like the change,
    " explicitly bind the keys to down and up in your $FZF_DEFAULT_OPTS.
    let g:fzf_history_dir = '~/.local/share/fzf-history'

   Now to open file for edit use Ctrl+P hotkey, to search text in project use Alt+F

_

And that's it! Happy coding :)