ESLint and TSServer errors reported twice in diagnostics

Question

I'm trying to configure ESLint for my React (TypeScript) project.

This is my initial eslint.config.js file located in the root of the project.

// @ts-check

import eslint from "@eslint/js"
import tseslint from "typescript-eslint"
import reactPlugin from "eslint-plugin-react"
import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended"
import hooksPlugin from "eslint-plugin-react-hooks"
import { fixupPluginRules } from "@eslint/compat"

export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  reactPlugin.configs.flat.recommended,
  eslintPluginPrettierRecommended,
  {
    plugins: {
      "react-hooks": fixupPluginRules(hooksPlugin),
    },
  },
  {
    rules: {
      // "react/react-in-jsx-scope": "off",
      // "@typescript-eslint/no-unused-vars": "warn",
      ...hooksPlugin.configs.recommended.rules,
    },
  },
)

I found an interesting case where diagnostics show the same error twice. It's likely that one error came from TSServer and the other from ESLint.

How can I avoid this?

I would like to see only one error (probably from ESLint) if they both point to the same issue.

This is my pacakge.json file

{
  "name": "Example",
  "devDependencies": {
    "@eslint/compat": "^1.1.1",
    "@eslint/js": "^9.9.0",
    "@types/d3": "^7.4.3",
    "@types/eslint__js": "^8.42.3",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^7.16.0",
    "@typescript-eslint/parser": "^7.15.0",
    "@vitejs/plugin-react": "^4.3.1",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.35.0",
    "eslint-plugin-react-hooks": "^4.6.2",
    "eslint-plugin-react-refresh": "^0.4.7",
    "prettier": "3.3.3",
    "ts-node": "^10.9.2",
    "typescript": "^5.5.4",
    "typescript-eslint": "^8.2.0",
    "vite": "^5.3.3",
    "vite-plugin-svgr": "^4.2.0"
  },
}

It’s also worth mentioning that I use neovim with lsp-config.

And this is nvim-lspconfig.lua file used by LazyVim plugin manager

return {
  "neovim/nvim-lspconfig",
  config = function()
    local lspconfig = require("lspconfig")



    vim.api.nvim_create_autocmd('LspAttach', {
      group = vim.api.nvim_create_augroup('UserLspConfig', {}),
      callback = function(ev)
        vim.bo[ev.buf].omnifunc = 'v:lua.vim.lsp.omnifunc'

        local opts = { buffer = ev.buf }

        vim.keymap.set('n', 'gd', "<cmd>Telescope lsp_definitions<cr>", opts)
        vim.keymap.set('n', 'gr', "<cmd>Telescope lsp_references<cr>", opts)
        vim.keymap.set('n', 'K', vim.lsp.buf.hover, opts)
        vim.keymap.set('n', '<space>cr', vim.lsp.buf.rename, opts)
        vim.keymap.set({ 'n', 'v' }, '<space>ca', vim.lsp.buf.code_action, opts)

        -- vim.keymap.set('n', '<space>f', "<cmd>PrettierAsync<cr>", opts)

        vim.keymap.set('n', '<space>f', function()
          vim.lsp.buf.format { async = true }
        end, opts)
      end,
    })

    -- configure lua lsp
    lspconfig["lua_ls"].setup({
      settings = {
        Lua = {
          diagnostics = {
            globals = { "vim" }
          }
        }
      }
    })

    local function organize_imports()
      local params = {
        command = "_typescript.organizeImports",
        arguments = { vim.api.nvim_buf_get_name(0) },
        title = ""
      }
      vim.lsp.buf.execute_command(params)
    end

    -- configure TypeScript lsp
    lspconfig["tsserver"].setup({
      on_attach = on_attach,
      capabilities = capabilities,
      commands = {
        OrganizeImports = {
          organize_imports,
          description = "Organize Imports"
        }
      }
    })

    -- configure HTML lsp
    lspconfig["html"].setup({})

    -- configure JSON lsp
    lspconfig["jsonls"].setup({})

    -- configure TailwindCSS lsp
    lspconfig["tailwindcss"].setup({})

    lspconfig["eslint"].setup({})
  end
}
-- end

Thanks!

Answer 1

There are a number of ways to solve this problem.

Project level

You can either disable rules already covered by ts_ls in your eslint.config.js (and let the ts_ls take care of those) or disable the warnings in your tsconfig.json (thus moving the responsibility to eslint).

Globally

Filter diagnostics on the lsp server level.

ts_ls = {
  settings = {
    format = { enable = false },
    -- disable unused vars hint
    diagnostics = { ignoredCodes = { 6133 } },
  }
}

By disabling 6133 code I'm getting rid of the unused vars error from ts_ls.