Troubleshooting Neovim: Fixing Unwanted Parentheses in React Imports

If you're an avid user of Neovim for your development needs, particularly for React projects, you might have stumbled upon a peculiar issue where auto-importing React components in the format export function Example() leads to an incorrect auto-complete format of <Example(). This happens due to the TypeScript server (tsserver) auto-completion settings treating function imports as calls, thus adding the parentheses.

Fortunately, there's a straightforward workaround for this by tweaking the tsserver settings within your setup. If you're using LazyVim, you can do this simply by creating a Lua plugin file.

The Fix

The solution involves adjusting the TypeScript language server settings to stop the auto-completion from treating function imports as callable entities. Here's how you can do it:

1. Create a Lua plugin file: Create a new file in ~/.config/nvim/lua/plugins/ called nvim-lspconfig.lua

2. Add the Configuration: Within this file, paste in the following code.

   return {
    "neovim/nvim-lspconfig",
    opts = function(_, opts)
      opts.servers.tsserver.settings.completions.completeFunctionCalls = false
    end,
   }
   

   This code effectively informs the TypeScript server to avoid completing function imports as if they were being called, thus preventing the addition of parentheses.

3. Restart Neovim: After saving the changes to your configuration file, ensure to restart Neovim for the changes to take effect.

4. Test the Fix: Once everything is set, try importing a React component the way you normally would. The unwanted parentheses should no longer be an issue.

With this simple adjustment to your Neovim setup, you can now import React components without the unnecessary auto-completion of parentheses. Happy coding!