Configuring ESLint and Prettier to automatically fix 'import/no-duplicates' error in Visual Studio Code on save

Question

I have the ESLint and Prettier extensions installed in Visual Studio Code, and I have configured the "Editor: Format on Save" option, which is working well for other errors. However, I am still encountering the "import/no-duplicates" error, and it is not being automatically fixed on save. I have already tried to resolve the issue by making changes in the .prettierrc and .eslintrc.json files, but to no avail. Can someone help me configure ESLint and Prettier to automatically fix the "import/no-duplicates" error on save in Visual Studio Code?

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "next/core-web-vitals",
    "plugin:react/recommended",
    "airbnb",
    "plugin:@next/next/recommended",
    "prettier"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react", "prettier", "import"],
  "rules": {
    "prettier/prettier": ["error"],
    "react/react-in-jsx-scope": "off",
    "react/prop-types": "off",
    "react/jsx-props-no-spreading": "off",
    "import/extensions": "off",
    "import/no-unresolved": [
      2,
      {
        "ignore": ["^@/", "^~~/", "^/"]
      }
    ],
    "import/no-duplicates": "error"
  }
}

{
    "singleQuote": true,
    "importOrder": ["^[./]","^components/(.*)$","^@/" ],
    "importOrderSeparation": true, 
    "importOrderSortSpecifiers": true 
}

Answer 1

Get eslint plugin, add this code to your settings.json

 {  
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript"]
 }

source