How do I setup eslint properly?

[Bubbanan]

Hopefully this is the right place to put this. I’m brand new to the nvim community, but I want to get as far in as possible in the next few months.

I’ve setup nvim-lsp, nvim-lspinstall, and nvim-cmp in my init.vim and for the most part, it works pretty well. In Python, I get errors and warnings once I save the file using the pyright language server.

However, I’m not getting the same functionality for eslint in my React projects. Even with blatant errors, nothing shows up - which is annoying! Moreover, the snippets and helpful auto-complete features I was hoping would be there aren’t there - typing in import use at the top doesn’t suggest anything.

I would appreciate any help to fix this - I really want to use nvim as my primary code-editor but these setup problems have been stalling me for the past week or so, and I’m considering just moving back to vs code.

[fsouza]

Please share the relevant parts of your configuration, like what exactly have you tried doing to enable diagnostics from eslint?

[Bubbanan]

Sure!

Here is what :LspInfo displays on the actual file - eslint is running and should be showing diagnostic messages, but it’s not!

My init.nvim:

  1 call plug#begin("~/.vim/plugged")
  2 │       " Plugin Section
  3 │       " Themes
  4 │       Plug 'dracula/vim'
  5 │       Plug 'sainnhe/everforest'
  6 │       Plug 'rmehri01/onenord.nvim', { 'branch': 'main' }
  7 │       " Plugins
  8 │       Plug 'nvim-treesitter/nvim-treesitter', {'do': ':TSUpdate'}  " We recommend updating the parsers on update
  9 │       Plug 'sunjon/shade.nvim'
 10 │       Plug 'preservim/nerdtree'
 11 │       Plug 'williamboman/nvim-lsp-installer'
 12 │       Plug 'hrsh7th/vim-vsnip'
 13 │       Plug 'hrsh7th/vim-vsnip-integ'
 14 │       Plug 'rafamadriz/friendly-snippets'
 15 │       Plug 'neovim/nvim-lspconfig'
 16 │       Plug 'hrsh7th/cmp-nvim-lsp'
 17 │       Plug 'hrsh7th/cmp-buffer'
 18 │       Plug 'hrsh7th/cmp-path'
 19 │       Plug 'hrsh7th/cmp-cmdline'
 20 │       Plug 'SirVer/ultisnips'
 21 │       Plug 'mlaursen/vim-react-snippets'
 22 │       Plug 'hrsh7th/nvim-cmp'
 23
 24 call plug#end()
 25
 26 "Config Section
 27
 28 " Set Colorscheme
 29 colorscheme onenord
 30 " Set Nerdtree icons, Ctrl + T to toggle.
 31 let g:NERDTreeDirArrowExpandable = '▸'
 32 let g:NERDTreeDirArrowCollapsible = '▾'
 33 nnoremap <C-t> :NERDTreeToggle<CR>
 34
 35 set number
 36
 37 lua << EOF
 38 -- Setup nvim-cmp.
 39 │ local cmp = require'cmp'
 40 │
 41 │ cmp.setup({
 42 │   snippet = {
 43 │     -- REQUIRED - you must specify a snippet engine
 44 │     expand = function(args)
 45 │       vim.fn["vsnip#anonymous"](args.body) -- For `vsnip` users.
 46 │       -- require('luasnip').lsp_expand(args.body) -- For `luasnip` users.
 47 │       -- require('snippy').expand_snippet(args.body) -- For `snippy` users.
 48 │       -- vim.fn["UltiSnips#Anon"](args.body) -- For `ultisnips` users.
 49 │     end,
 50 │   },
 51 │   mapping = {
 52 │     ['<C-b>'] = cmp.mapping(cmp.mapping.scroll_docs(-4), { 'i', 'c' }),
 53 │     ['<C-f>'] = cmp.mapping(cmp.mapping.scroll_docs(4), { 'i', 'c' }),
 54 │     ['<C-Space>'] = cmp.mapping(cmp.mapping.complete(), { 'i', 'c' }),
 55 │     ['<C-y>'] = cmp.config.disable, -- Specify `cmp.config.disable` if you want to remove the default `<C-y>` mapping.
 56 │     ['<C-e>'] = cmp.mapping({
 57 │       i = cmp.mapping.abort(),

Lines 37-57 is the default lua code provided by nvim-cmp. I don’t tinker with any configurations otherwise - as you can see, every other plugin is just being installed.

[fsouza]

Interesting, not sure what’s going on. Do you see anything interesting in the log file at ~/.cache/nvim/lsp.log?

[Bubbanan]

Ah yes - I’m seeing some warnings pop up.

I guess the problem is that the eslint language server is looking for a configuration file to figure out how to do diagnostics, but it’s not able to find an appropriate one.

[Bubbanan]

Solution:

npm install -D eslint-config-react-app

will install the appropriate eslint config to your project. (: